How to format website images the best way for all devices
Choose the right quality, file size and dimensions
Make your images the right way for desktop, tablet & mobile
Updated 15 May 2017 If you have a website, you really should be thinking about the size and quality of your images, especially these days. With more and more high-resolution devices such as Mac products with Retina screens, and with broadband getting faster and cheaper, websites are using larger and larger images. However, at the same time, more users are accessing the web through mobile devices or in remote/developing countries with bad internet connection, so we must also consider the file size of our images.
As I earned a degree in Fine Art Photography and worked as a professional photographer for several years, I reckon I've got a pretty good eye, so I'm writing this post to help anyone who puts images onto websites find the ideal balance of image quality and file size. I'll also let you know the best number of pixels to use for a range of purposes online.
The right physical size / number of pixels to use
First, you'll want to ensure your images are the right number of pixels. Too large, and the files will be massive, too small and your high-res visitors will see fuzzy pictures on their HD Retina screens. Retina screens show twice as many pixels in the same size space, so the days of 72dpi (dots per inch) are limited. These days, many users will see 144 dots or pixels per inch on their screens.
Most website management systems such as Squarespace and WordPress automatically serve up the 2x resolution images to HD viewers, so if your website is built in one of these, then you don't need to worry about anything other than ensuring that you always use images that are 2x the number of pixels of the space. Without getting into too much detail, I can suggest the following rules of thumb:
- FULL SCREEN: 2200 - 2500 pixels wide for images that will fill the screen, such as banner images or full-screen backgrounds
- LARGE: 1800 - 2200 pixels wide for images that will fill the width of the content area on most websites
- MEDIUM: 1200 - 1500 pixels wide for images that will appear at 1/2 to full width of the content area
- SMALL: 700 - 800 pixels wide for images that will only ever be shown at sizes up to 1/3 of the content area
These numbers will ensure your HD visitors will have a high quality viewing experience. The 'content area' on most web sites is usually around 960-1100 pixels wide as of May 2017 - though it's getting larger. In future, this number will most certainly change. Here's a handy illustration to help - the content area is the part of the main body below the top banner image where all of the text and images fit:
The right file size
The size of your file is determined by the overall number of pixels, combined with the amount of compression that has been applied. We'll cover compression next, but as a general rule, even if you don't use compression, you never really want to be uploading files larger than 1MB - and ideally, your images should be a lot smaller than that. We'll cover how to reduce file size using compression now...
The right % quality to export
Most of the time, if you are using stock images, free images from the great resources like pexels.com or your own images from a photographer or your camera, then your original images will be uncompressed. In order to make them web-friendly, you should compress them when you export them from your image viewing software such as Mac Preview, Photoshop, Windows Paint or Live Gallery - usually you do this by dragging a slider or specifying a % quality when you export. Compressing the image means to reduce the file size, but there will be a loss of quality whenever you compress. The art of compression is to minimise file size without noticeably affecting the image quality too much.
There are also specialist tools that have been created to help reduce file sizes of images. My favourite is called JPEGmini, and I recommend to most of my clients that they use this tool on their images. JPEGmini will only reduce file size if it thinks it can do this without affecting the overall quality, so there's no risk of messing up. Check it out here >
Every software application has a slightly different method of compressing images. As I'm a Mac user, I am comparing Photoshop vs Preview on their own, and then with JPEGmini applied to each. Here's a chart showing file size at the different quality export settings when applied to a 1500 x 1000 pixel image:
You can see that JPEGmini really makes a massive difference on very high quality images. JPEGmini stops working at quality of 60% or so. And Preview won't let you export at anything lower than 20% (if you're a Preview user, note that the lines on the slider mark 20-100% in 10% increments).
As a general rule, I recommend the following % quality for images:
- 70-75% with JPEGmini if you are a photographer or creative business and need stunning images
- 55-65% for normal purposes at larger sizes
- 40-45% if you are using images at small sizes, or if your website visitors are on slow internet connections
You can actually get away with even lower quality in certain circumstances. I've made a page showing this, so click the button below to see this in action.
See some real life examples
These are just guidelines, but I hope they will help you when preparing your images for use online. If you want to see side-by-side comparisons of the different images head on over to my Squarespace portfolio site now:
When you click you'll land on a page that shows different compressions and compares JPEGmini to standard images, for the real eagle eyes out there (like me!)