Beautiful photographs are our bread and butter. They’re eye-catching, enticing and transcend language barriers. But they are often the heaviest elements on a web page and so they’re the focus of today’s article on speeding up your site.
Resizing
When uploading photos to your blog you typically don’t need to preserve the original resolution. For example, the main content column of Rock n Roll Bride (i.e. this bit you’re reading now) is only 576 pixels wide while a JPEG from a 15MP camera is over eight times that. If you’re simply embedding photos in-line with the blog post, make sure you are resizing the images before uploading. WordPress will do this auto-magically leaving you one less thing to worry about but other blogging platforms may vary. I dug around and found an old photo which was saved straight from the camera, the filesize (and therefore download size, to your visitors) is 3524KB (~3MB). If you look back at last week’s article on measuring your website you will see this is around the same as our entire front page, just for a single image. However, after resizing in Photoshop to 576px wide it shrinks to just 210KB, a 16-fold reduction.
This kind of reduction in filesize will be of enormous benefit to your visitors. To resize an image in Photoshop just click the Image menu and select Image Size.
Recompressing
You may not know this but JPEG is actually a kind of file compression, a bit like ZIP files. Unlike ZIP files, however, the compression method is lossy, which means it works by permanently discarding bits of the original data. We can usually get away with dropping a substantial amount of data before the observer notices any degradation in a photograph. The more we compress, the smaller (and faster) the file but the worse the image will look for it.
When saving a JPEG file, Photoshop will prompt for a quality value on a scale from 0 to 12. The image below attempts to demonstrate how the image degrades at three of these quality values.
Using this method the 210KB file from earlier can be reduced all the way to just 29KB, albeit with quite hideous image artefacts. Ideally you should re-save a wide variety of your images at various quality settings and inspect the outcome so you can decide which setting works best for you overall. But if you just want to get on with it, I’d recommend 7.
Rolling it all together
I guess by now you might be thinking “yeah, that’s great and all but I don’t have time to do all that to every single photo I upload”. Well the Photoshop developers thought that too so they gave us a really easy way to automate the entire process!
From within Photoshop click the File menu, move down to Scripts and click Image Processor from the pop-out menu. You will now see a dialogue window with four numbered steps. Set it up to look like this screenshot and you’re essentially done.
In step 1 you must select the folder which contains the original images you want to resize and recompress.
In step 2 you should select the output folder, Photoshop does not want to overwrite your originals so create a new folder to store the new images.
Step 3 is where we choose a JPEG quality value and a new width and/or height. If you specify a width but leave the height empty, as in this screenshot, the original aspect ratio of the image will be maintained (this is definitely desirable).
Finally, click Run and sit back and relax while your computer does all the work for you.
Results
Resizing and resampling all images before uploading was, without doubt, the single most effective change we made to our website. In fact, the results were so good that I went back through all the images ever uploaded to our server and recompressed them all. There was around 90,000 files and it took our spare computer over a week, working 24×7, to get through them all but the impact on page loads was immediate.
And as an unexpected bonus, it cut our server’s bandwidth usage by two-thirds which came in quite handy yesterday when the launch of the print magazine went kinda viral.
