How To Make Images Load Faster On Mobile

Why is mobile site speed important?

Google first announced that they were moving to mobile-first indexing back in 2016 – their reason being that most people search Google on a mobile device. In 2018 mobile internet traffic overtook desktop traffic. But this is a challenge for developers and site owners, because internet speeds are usually noticeably slower on mobile – because mobile browsers are working with less powerful devices compared to desktop, and because mobiles are often connected to the internet over a 3G or 4G connection.

There are a huge number of reasons  you’d want your site to load faster on mobile. Google has stated that page speed is a ranking factor on mobile, but even if it wasn’t – from a conversion point of view, studies have found that 53% of mobile visits leave if a page takes longer than 3 seconds to load.

Countless studies have been conducted into this, and the overall answer is always the same: faster loading pages are always better.

And while there are an overwhelming number of things that can be fine-tuned to improve page load times, some more complex than others, I wanted to focus on one main goal: making your images load faster on mobile. Images tend to be a huge part of adding weight to a page, and the time spent downloading them often plays a big role in increasing page load times.

 

Serve scaled images using the picture element

Responsive sites are the absolute dream and it’s almost always what we recommend for our clients. But one downside to them is that it can lead to situations where the same image file is used on mobile as it is on desktop, just resized to fit. If you use a large image – say one that’s 1200px by 600px (because that’s the largest size it’s shown on desktop) – but use CSS to resize it to be 400px by 200px on mobile (because that’s the largest size that it’s ever displayed at on that device), then you’re making that mobile browser download an image that’s a much larger file size than it needs to be. And frequently, sites do that for many images, which can lead to much slower page load times.

If you use Google’s PageSpeed Insights tool, this will often give you a warning telling you to serve scaled images – but it doesn’t really tell you the best way to approach this if your site is responsive. One great way of doing this is with the picture element.

The picture element allows you to have multiple different image files of the same image but at different dimensions – and serve the best version for the screen size that’s displayed. Instead of making a mobile user download a 1mb image designed for a desktop with a broadband connection, they could instead download a 150kb image designed for a mobile on 3G.

Here’s how the code for the picture element looks:

[html]
<picture>
<source media=”(min-width: 650px)” srcset=”big.jpg”>
<source media=”(min-width:460px)” srcset=”medium.jpg”>
<img src=”small.jpg”>
</picture>
[/html]

In the above example, the default image is “small.jpg”, and this will be displayed on all mobile devices or on a browser that’s been resized to be smaller. If the browser width is 460px or above (but below 650px), then the medium.jpg image will be downloaded and used instead, and if the browser window is 650px or wider, then big.jpg will be the image that’s downloaded and used. There’s a really great example of this in action here – try resizing your browser window to see the image change.

Losslessly compressing images

In addition to serving scaled images using the element, you can also losslessly compress those same images. Lossless image compression involves removing unnecessary data from the image (e.g. metadata), which can help to reduce the image filesize without changing the quality of the image – or at least not in any way that you can notice. Tools like compresser.io can help to reduce image file sizes – sometimes drastically. If you use a Mac, ImageOptim is another tool that can help you to reduce image file sizes using lossless compression.

If you want to be more drastic about page load times and don’t mind taking a hit on image quality, then you can also explore lossy image compression to reduce the file size even further. It’s worth comparing the losslessly compressed vs lossy compressed images side-by-side to see if it’s a sacrifice you’re comfortable with, but the improvement in file size can often be a huge positive.

Serve images (and other assets) over a CDN

A content delivery network (or CDN) involves a number of servers located around the world. Your static files – such as images, JavaScript files or CSS – can then be hosted on the CDN. When a browser based in the UK requests your web page, instead of the images being downloaded from your server in America, the CDN can instead deliver them from a server based closest to that browser – i.e. from the UK, which typically means it’s delivered faster.

CDN’s have another benefit in that good ones are also geared up to deliver assets as fast as possible, and have all kinds of server optimisations in place that yours may not have. There are lots of popular CDNs out there worth exploring – for security, reliability and speed, I’ve been impressed with Amazon Cloudfront.

Are you hiding images on mobile?

Finally, the other page speed recommendation is to question whether you really need to display that image on mobile at all.

Some responsive sites choose to hide certain images on mobile, but here’s where you have to be careful again. If your responsive site hides an image on mobile (or below a certain browser width), check to make sure that your mobile browser isn’t downloading that image anyway.

When you use CSS like this:

[css]
.image {
background-image: url(desktop-image.jpg);
}

@media (max-width: 480px) {
.image {
display:none;
}
}
[/css]

Then you’re telling the browser to first download desktop-image.jpg, and then later hide it if it’s on mobile.

Instead, you should use a min-width like this:

[css]
@media (min-width: 481px) {
.image {
background-image: url(desktop-image.jpg);
}
}
[/css]

This instructs the browser to only download the image if it’s on desktop.

How to debug and check which images are loading

Once you’ve made use of the picture element to serve scaled images, or the CSS method above, you’ll want to double check that browsers are genuinely only downloading the correct sized image.

To check using Chrome, right-click and open the Inspect Element toolbar. From there, click the Network tab, and then click the Img tab to make it easier to find your images.

 

When you reload the page, you should see all of the image files that the browser downloads. If you reduce the browser window size (or click the mobile icon – second from the left in the image above), you should see it download only the images that are used for mobile.

Are you struggling with your site speed? Our technical SEO team would love to help – drop us a line.