Optimise your images for the Web

[vc_row][vc_column width=”1/1″][vc_column_text]What export settings to use for use on the web is something there seems to be a great deal of confusion about, even among people who really should know better!

So I’m going to start with the incorrect information I see repeated so often:

PPI/DPI does not impact a digital file.

Changing your PPI on export doesn’t make the file size any smaller, and it doesn’t mean it prints at any less quality either. Anywhere you see “export at 2048px wide and 72ppi” is adding a completely un-necessary step into the process and perpetuating the myth that PPI matters.

For digital files, the only thing we care about, is pixels and file size. We want to minimise the file size, while keeping pixel size adequate for our usage and preserving as much quality as we can.

With Adaptive Images

If you’re using a theme such as Uncode, which uses Adaptive Images, then it’s a little simpler. Simply work out the maximum size you’d want for a full image. I generally work on 2048px for a full width image, but you can use higher if you’re catering especially for Retina / 4K screens.

Because Adaptive Images means smaller versions will be created for you, you can just worry about optimising the master image file, and your theme will do the rest.

So we’ve decided on a resolution for our export, now we need to get the file size down as low as possible whilst also maintaining display quality for screen.

Some of this will be a matter of taste and dependent on your RAW file, but generally – 75% to 80% quality gives a good balance. I use 75% on my photography site, with images from a Nikon D750.

This will give you a file with good enough quality for web, and a small enough file size in order to not slow down your site.


Without Adaptive Images

If you’re using a theme that doesn’t have Adaptive Images built in, then it’s a little more tricky as you really need to know how you’re going to be using the image and how big it will display.

Sometimes this just has to be trial and error, add it to your page and run GTMetrix, and see if it complains about the image size (it will tell you the correct size if it does) then re-export at that size.

The quality setting should remain the same, 75% – 80%[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vc_single_image media=”146″ media_lightbox=”yes” media_width_percent=”70″ alignment=”center” shadow=”yes” shadow_weight=”std” shadow_darker=”yes”][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vc_column_text]One extra step, in order to really get that file size down, is to use the awesome Jpeg Mini. With some sort of wizardry, this further compresses the Jpeg size without reducing quality. There’s a trial version if you want to try it out.

I use the Pro version as you get a Lightroom Plugin for it, so there’s no additional step to my workflow. I also use it on images I upload to Pixieset to deliver to clients.[/vc_column_text][/vc_column][/vc_row]

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top