Resizing and Optimizing Images

Resizing and optimizing your images is a straightforward way to improve load speeds.

This is a great photograph:

But that file is over 9 megabytes in size. To give you an idea of how large that is, the file size of a 3-minute MP3 (about the length of an average song) is likely to be 3-5 megabytes. So if you add just one 9 megabyte image, that’s like asking a visitor to download 2-3 MP3s every time they visit your site, just to load a single page.

Especially for visitors whose primary device is a mobile phone with mobile data, that’s going to result in quite a wait for each page.

After you’ve resized an image you can still tweak it a bit to get an even smaller file size.

Just as an example, I’ve been using XnConvert:

After installing and launching XnConvert, click the “Add files” button to select which images you’d like to resize and optimize.

Next, click the “Actions” tab.

Click “Add action”->”Image”->”Resize” to add the Resize action to the list.

For “Mode” choose “Longest side”. This will reduce either the height or width, whichever is longest, to the length you choose.

For “Size” enter “1500” or “2000”. You can adjust this to whatever you need, but higher number=larger file.

Where it says “Enlarge/Reduce” choose “Reduce only”. Trying to resize an image to a higher resolution will result in a poor quality image.

Next, click the “Output” tab.

Under “Options” you can choose settings such as whether or not to overwrite files if one already exists with the same filename or to save the “metadata” from the original image.

I do NOT recommend using the “Delete original” setting. If you make a mistake, you’re going to want that original file to try again. And it’s always a good idea to keep the originals in case you want to re-use them later.

Editing an image that has already been edited is like making a photocopy of a photocopy, quality always declines.

Select “JPG” as the “Format”, then click “Settings”.

The most important setting here is the “Quality” slider. I’d recommend setting the slider to the lowest number you can tolerate. Just remember that if you go too low, the image will be pixelated.

Other than the “DCT Method” and “Subsampling factor”, I recommend leaving all the other settings as-is.

Once you’ve chosen your quality, click “OK”.

Click “Convert” to start the resizing and optimization process.

In this example, using a “longest side” of 1500px and a “Quality” of 80, the images have been drastically reduced in size.

Here are the original photos used for the homepage slider.

The new files are exponentially smaller than the originals. If you’d like the files to be even smaller you can try again using a lower quality setting.

Return to Top

Return to Guides