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!
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:
Of course, there might be other reasons, but these are just a few!
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:
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...
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.
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.
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.
When you're choosing what image format is best for a website, you're going to want to go with the JPEG file format.
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
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.
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.
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.
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
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.
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...
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...
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.
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.
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.
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.
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!
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:
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.
As a business owner, ensuring customer satisfaction should be a top priority. One key aspect of customer satisfaction is having a reliable and efficient online presence, which is where website uptime monitoring comes in.Read more
As an e-commerce store owner, you understand the importance of having a reliable and efficient online presence. Let's look at why website uptime monitoring is so important for e-commerce. Read more today.Read more
As a website owner, uptime monitoring is crucial to ensure that your website is always available and functioning properly. In this article, we'll discuss how to maximize the efficiency of your website uptime monitoring strategy, including the use of tools, setting up alerts, and optimizing your website's performance.Read more