Preparing images for use on your website can be confusing, not least because of a certain myth that is perpetuated by people who should know better!

For most people, especially those working in any kind of creative industry, the balance of the quality of the image vs how long it takes the page to load is extremely important. I know everyone has fast internet connections these days, but in order to deliver the best User Experience, your site should load as quickly as possible.

How big should my image be?

How big you’ll need your image to be, in pixel dimensions, depends on how you’re going to be using it.

A high res Retina screen can be up to 2880 pixels wide. So if you want to show an image full screen, and have it look amazing on a Retina display, then you’re going to need to export it at this width. But you’re going to pay a penalty for this on smaller screens, as resizing images is slow (unless of course you’re using Adaptive Images, which I’ll cover in a bit).

Other common widths can be:

• Full width HD: 1920px
• Standard width of content: 1080px
• Image taking up 1/2 of your content space: 510px

In order to get the best balance out of your website, you’ll need to know what size image you need. If you upload it too big, then any speed reports are going to flag “not serving scaled images” as an issue with your site.

Keeping the file size low

Once you know the pixel dimensions of your image, you then need to adjust your settings to get the file size down. Especially in the case of retina-ready images, 100% quality jpegs will be huge!

If you’re exporting from Lightroom, then you want to dial that quality slider down to 75%.

If you’re exporting from Photoshop then you want to use quality 9.

You can also run the image through JpegMini if you have it, I always do and it does reduce file size with no visible loss to quality of the image.

But what about PPI?

Contrary to popular belief the PPI of an image makes absolutely zero difference to file size. The only thing it does, is set a meta-tag which determines the default print size.

If you have a 3000px wide images set to 300 PPI, then the default print size is 10″ wide.

If you set the same image to 72 PPI, then the default print size is 41.67″ wide.

It makes no difference to actual print quality, if you were to print that 72 PPI image, 10″ wide, it would still be 3000/10 = 300 PPI.

Try it for yourself, export an image at 300 PPI and 72 PPI, with the same pixel dimensions. I guarantee that the file size will be identical!