Let’s Make the Web Faster – Images

Photography Credit: Made U Look Photography

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.

12 comments

  1. Perfect Gareth, it is like this post was written for me! I have been struggling with this for a while now! Thank you!!

  2. A ha! I almost unsubscribed from Rock ‘n’ Roll Bride a while back because the super slow page loads were driving me crazy (but I couldn’t bring myself to stop seeing all the pretty pictures…) – then they sped up and I promptly forgot about it; now I know why!

    I upload all my photos to Flickr (this is really only a practical option for small sites, but it might be useful for other readers who have small blogs and no Photoshop/no inclination to resize all their pictures first); it offers a variety of image sizes to link to, so I select the 500px width, rather than the original file. Problem solved. :)

  3. Post author

    Lydia, I don’t actually know much about Aperture so I can’t give you a fair comparison, sorry. The best thing to do is take a dozen photos and run them through both Aperture and Photoshop. I would expect the Photoshop-processed files to come out significantly smaller without looking degraded.

  4. Great post Gareth.

    Lydia, when you export jpegs from Aperture 3 there is a slider (0-12) that sets jpeg quality. Tweet me if you want more info.

  5. I just tried this out but an error message came up, saying “You must specify width and height when using resize image options for JPEG”. ARGH…please help!

  6. @Nina, to solve this you need to specify the height limit. As normally you just want to limit the width, just put a very high value for the height like 3000px (don’t worry, you will keep pic ratio, height wont be taken in account because the width limit will do the job). PS just don’t like the empty “height” field.

    Gareth, nice post!

  7. Nina Hollington

    Thanks very much for your help, Marcio. I’ve done what you suggested but it re-sizes my landscape pics as 600x400px and my portraits as 600x900px. Also I can’t find a way in PS to specify the dpi, so that I can shrink to 72 for web use. Any suggestions? Many thanks in advance :)

Reply

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