The Ultimate Guide To Optimising Your Images For The Web

Have you ever heard the saying that "a picture is worth a thousand words"? You've likely heard of this on the web and in person as well, so optimising your images for the web to ensure your page loads as efficiently as possible will allow your users to have a better, more refined user experience on your website.

In fact, around 64% of a website's weight comes from those images that you've got.

Also, if a web page takes longer than 3 seconds to load, you could be losing up-to 40% of visitors from your website, causing you to experience a high bounce rate!

It's not ideal, so I was thinking, how can I help you optimise your images for the web?

And I thought, why not create an article on this topic, an ultimate guide to optimising images for the web since I have to optimise every single image before it goes live, and you should too!

Are you ready? Grab a cup of tea, sit back and let's dive straight into this!

What Is Image Optimisation?

Image optimisation is the process used to reduce the file size of images as much as possible and extends to image resolution optimisations so that your page load and page speed times remain low, fast and efficient for users.

You're probably wondering why you might even want to do image optimisation right?

There's several reasons why you'd do it:

• To improve your SEO and page ranking in the search engine
• To improve the user experience for the end user
• To reduce the file sizes to save hard drive space

Of course, there might be other reasons, but these are just a few!

Understanding Different Types Of Image Formats

Depending on the web page that has images on, you're going to need to optimise images differently.

For example, the optimisation process that you put product images through might vary slightly from the process that landing page images go through.

To figure out how to optimise different types of images based on where they're used, you need to understand the various image types, and primarily, there are three types:

1. PNG - typically used for flat colours like infographics
2. GIF - these tend to be used for animated images
3. JPEG / JPG - if you've got an image with a lot of detail such as a photo of a product with a lot of fine detail, this image type is likely going to benefit you the most

PNG image format

PNG (Portable Network Graphics) images are a common image file format used for transparent images.

You see, unlike a JPEG image, PNG images can have a transparent background which makes them useful for overlaying images on one another.

You might even find this type of image being used for infographics...

Why?

Because PNGs work great when there's a limited set of colours, and infographics tend to have a limited set don't they.

You might have a solid background colour, with maybe some white text on top, and this image format works well for that.

GIF image format

Have you ever used WhatsApp?

Chances are you've received a GIF from a friend, and it's made you laugh.

That's because GIFs can be both static and animated, meaning you can either a GIF that doesn't have animations, or one that does.

GIFs have been around longer than the PNG file format, just how long?

Well, over three decades!

They were invented on June 15th, 1987, and that's why people are so knowledgeable with them.

JPEG / JPG image format

Then we get on to another common image file type, and that's the JPEG format, you might've come across it as a JPG as well.

This image file type makes up for a large proportion of images online, in fact, a study shows that they make up for 72.4% of all images of all websites on the web.

That's a lot.

Typically, you won't find many colours, vibrant colours in these images and that's because they're commonly used for images with a lot of detail, for example, in photography.

What Image Format Is Best For A Website?

When you're choosing what image format is best for a website, you're going to want to go with the JPEG file format.

Why?

Because although a JPEG can't contain a transparent background, unless you're making infographics, using icons or something with less detail then you aren't going to need the extra file size that a PNG might come with.

JPEGs work great for photographs, such as those product images that you've got on your site, but if you're using other images without a lot of detail, then a PNG is the way to go!

Ultimately, depending upon where you get your images from, whether you take them yourself or download them online, there's likely going to be some kind of option for you to change the image file format, and download the image in a different format

What's The Best Image Format For Website Speed?

If you want the fastest website performance (which you of course do), then stick with JPEG images because you can compress these down to smaller file sizes than you typically can with a PNG image.

PNG images tend to be slightly larger and GIF images can be even larger and will need the most image compression.

Image Optimisation Techniques For The Web

Did you know that if a website takes up to 10 seconds to load then there could be a bounce rate increase of 123% a study found?

That's massive, so using the right technique to compress your images is super important.

Would you stick around on a website if it took longer than 10 seconds to load?**

You might even think that the website is broke, or that the website is down, and you may never return to that website.

Balance Compression Quality with File Size

When you compress an image, regardless of what the file type is, you're essentially removing data from that image that makes up the image's quality.

Let's take two images, one image that has the highest quality, which is also the largest, and the other that has a high compression rate, but a lower file size.

It's important to balance quality with file size because if you compress your image too much, then it could look unprofessional, remember, most smartphones have a retina display, meaning picking up on images that have been compressed too much will be easily identified by your customers.

What About Lossy or Lossless Image Optimisation?

There are two primary types of optimisation techniques that you can use, and I'll help you choose between the two to give you the best result

• Lossless optimisation - this type of optimisation is a filter that essentially compresses data, it doesn't reduce the quality of the image but requires the image in question to remain uncompressed before they can be rendered, tools such as Photoshop will allow you to pick compression like this.
• Lossy optimisation - this will remove some of the data in the image, it's why it's called "lossy", because you're losing some data in the image compared to a "lossless" image. You can reduce the file size of this type of image by quite some margin and it's available in many image tools.

I'd recommend that you go ahead and try both, but start with lossless since it should give you slightly better image quality overall to begin with.

6 Image Optimisation Methods

There are several ways that you can go about optimising images for your website or blog, and I'm going to tell you what those methods are.

The first thing you can do is...

Reduce Your Image's Resolution/Scale

The easiest way to optimise an image for the web is to adjust the image's resolution. Typically, your web page will be a certain width, and it's measured in pixels.

If you're on a phone, such as an iPhone 5, 6, 7, 8 or iPhone X, even the XS, then the width of any web page on your smartphone is going to be approximately 375 pixels wide.

That's not very wide, if you're on a laptop, such as a Macbook, then the content on your website is going to be around 992 pixels wide.

You might think that downloading an image that has a resolution of 1920x1080 or similar is fine, but actually, you don't really need any image wider than 1200 pixels.

Optimising and scaling your images down not only will benefit page speed, but will also improve your website's responsiveness, it's actually on our responsive website design tips!

If you're on WordPress, you're in luck with reducing the resolution of images...

How?

Because since WordPress 4.4, they introduced a feature which would automatically create several sizes of each image that's uploaded to the media library.

Use A Image Compression Tool

There are many different image compressions tools that you can use, they're usually free and you simply drag & drop your image and it'll compress the image for you.

The way these tools work is by automating the process that you would go through to adjust those optimisation techniques that we covered earlier?

Lossy and lossless compression?

That's how these tools work, one tool I highly recommend that you use, which is completely free to use is called TinyPNG.

The benefit of TinyPNG is that you can (for free) compress both PNG images and JPEG images, whereas some tools will only allow you to compress one type of image format.

Use A CDN To Serve Images

Any website on the web should be thriving to deliver a great user experience that is both refined and fast!

CDNs (Content Delivery Networks) are a great choice for this since the CDN will essentially cache the image and serve up a version of your image and other website assets without having to redownload the image from your web server each time you load a page.

CloudFlare is a great CDN and is free to use for blogs and personal websites.

Consider Whether You Even Need An Image!

Okay, so this optimisation method is more of a question for you...

Do you really need an image to convey a message?

What do I mean by this?

Well, your image might be so simple that you could recreate the same element using CSS, for example, you might have an image with a coloured background with an icon and some text...

This can easily be achieved with pure CSS meaning you're optimising not just how you display what looks like an image, but the whole feature for your users.

Consider An SVG Instead Of An Image

If you're unfamiliar with SVGs, then now's the time to understand a bit more about them, because they're great!

Unlike an image, an SVG is a special piece of HTML that resembles an image on the web page, and is considerably smaller in size than an image.

SVGs don't have to be physical files, instead, they can be downloaded and the contents of them can be pasted into your page as markup. You'll also get far better quality results with SVGs since they're a form of vector images.

On the domain monitor we use SVGs, just take a look at our homepage, we've got some there!

Test Your Images - What Do Your Customers Prefer?

Your customers and/or blog readers are at the heart of your website and brand identity, so it's a good opportunity to optimise your images for what your customers want.

If you've never asked them how many images they prefer, do it, if you find that you've got too many images on a web page that it looks cluttered, customers will be drawn to a different website, maybe one of your competitors.

Here's some tips for how to test your images:

• Test the image angles - what angles of product images do your customers prefer? Do they prefer product images where the image was taken in front of the product? Or maybe off to one side, you might just be able to build additional customer loyalty by nailing this!
• Number of images per page - sometimes as humans we can get too excited with the number of visuals on a page and can completely forget about the content. It turns out that if there's too many images per page, you could overwhelm your customers

Wrap up

Optimising your images on your website is super important, both for page speed and to build and retain customer loyalty.

Hopefully you've found this guide full of information about optimising images for a website and I hope you can take something away with you from this.