Scott Cole, a Norwich based Web Designer and Developer, creating brilliant things.

Scott Cole
Web Designer
& Developer

4 awesome image optimisation tips for faster websites

I’ve been optimising lots of images lately. There’re a few optimisations I do most simply because they give me the best results in a small amount of time. I thought I’d put a few of the quickest image optimisation tips in writing to help you make your websites load faster. I’ve aimed this at people who might not have considered image optimisation before. As such, I’ve avoided covering some other techniques like a Content Delivery Network (I’ll post more techniques at a later time).

Why make things faster? The internet’s pretty fast… Well… Most searches are carried out on phones now, and large file sizes can still make a big difference to loading times. Even an extra second loading time may force valuable visitors away from your site.

Your web designer/developer should carry out image optimisation as one the steps in creating you a website/optimising your current website. You can read more about the steps a web designer takes here.

Others have written about this subject too. Here’s a blog post from Moz on the subject. I’ve decided to focus on making your image sizes more appropriate for the web in this post, rather than tell you everything you can do to an image.

1. The first of the image optimisation tips is a little counter-intuitive: Do you actually need all those images?

This first one is kinda the best of these image optimisation tips. Do you actually need them all? Here’s a quick list of situations where you might not need them:

Buttons and navigation:

Still using images for the buttons on your navigation bar? You really don’t need to. Focus on using text links inside lists etc. and then styling them with CSS. They often end up looking better and the code is always far smaller than an image will be! Not to mention search engines can’t read the images you use for your buttons, but they can read text links styled with CSS! Faster site, easier for the search engines to read. Two birds, one stone.

Tons of product photos:

Got lots of images displaying your amazing products? Great! But carefully consider how many you actually need per product. Maybe you can remove one or two, but instead, have photos that display the products a little better.

Background images:

Try using a background that tiles where possible if you want a patterned background. Use the CSS properties “background-image” and “background-repeat”. Let the browser do the heavy lifting for you; don’t over-rely on your bandwidth.

2. Downsize those photos!

This is another of the image optimisation tips that make a big difference. Pictures taken on any camera these days have lots of pixels. They look great and if you’re going to print them, you need those pixels.

If they’re displayed on your website, chances are they don’t need to be that big. Re-size them (using any tool that’d do the job. I use Photoshop mostly, but I’m going to look at some different tools for batch re-sizing soon and I’ll post my thoughts).

For images on my blog, I re-size them to 700 pixels wide as that’s the biggest I’ll have them displayed at. There’s no need to make the visitor download a big image if their browser is only going to re-size it down anyway. If they’re not going to be displayed as big as the original image, there’s no need for it. Most screens websites are viewed on just aren’t that big anyway.

3. Take a look at the quality

Most applications allow you to reduce the quality of a picture. In Photoshop it’s easy (but I know there are many tools that are quicker at this task). When you’re saving out a Jpeg or exporting an image you can choose what quality you want it at. 100% quality almost always isn’t necessary.

For my blog again, I usually save out images at 70% quality. I could probably push some of them down further to reduce the file sizes too.

Test out what quality you can push your images down to without them looking too different. Each image might be different.

The context of the image is important too. If it’s a product gallery you might want them to be a slightly better quality (but you can still probably have about 70-80% quality without noticing a difference). If it’s not integral to the website, test out different qualities of the image to see what works.

4. You’ve got file type options too

Jpegs are good for most photo situations like photos with lots of colours. If you’ve got a logo that only has a few colours, try a PNG file instead. Even better, try an 8-bit PNG file. It’ll make a big difference.

Some examples

I’ll show you some examples below of what can be done with some stock photos.

Image dimensions

The original image size is 13.1mb as a Jpeg at 5760 x 3860 pixels. I’m not going to make your browser download that original image though, as on its own it’s bigger than the average web page. But once I resized it to 700 x 467 pixels it dropped to 166kb. That’s a massive difference, and if I was to display that image at 700 pixels wide but making you download the original version, well, that’s a lot of wasted bandwidth and loading time. You can see that 166kb version below.

Image optimisation full quality

We want to get this image downsized even further though.

Image quality

Below you can see the same image at 70% quality instead. I can’t tell much difference, but the file size? 47kb.

Image optimisation at 70% quality

Below, I’ve dropped the quality to 40% of the original. It’s really not that noticeable, but the file size is down to a brilliant 23kb. You can tell some small details aren’t as sharp, but for a general image, I think it’s quite acceptable (remember your context).

Image optimisation at 40% quality

That’s much better than someone’s browser having to download a 13mb image.

File type

Jpeg works best for the above image; I looked at exporting this as a PNG and it comes in at around 400kb.

To demonstrate the power of a PNG for a logo image, I’ve taken my logo at the top of this page. Its dimensions are 358 x 256 pixels. As a Jpeg, it’s 15kb. That’s already pretty small, but when it comes to these image optimisation tips, every little really does help. Jpeg also doesn’t support transparency which was needed for my logo.

As a PNG it’s 12kb, not much different from the Jpeg’s 15kb. But as an 8-bit PNG, it’s down to a very slim 6kb without any visual difference.

I’ve set out each image below so you can see if there’s any difference. From top to bottom it’s Jpeg, PNG and then 8-bit PNG.

My logo as a jpeg demonstrating image optimisation
My logo as a standard PNG demonstrating image optimisation techniques
My logo as an 8-bit PNG showing the best image optimisation tips for logos

Conclusion

I hope these image optimisation tips give you some basic guidelines to get started with optimising your images. Speed is incredibly important as any extra time loading your website can drive visitors away. Soon, your websites will be so fast they’ll appear on people’s browsers before they click on the link.

Ok, that’s a bit far-fetched… happy image optimising.