Reduce image size: use media queries for background images

SPEAKER: According
to HTTP Archive, a medium page on mobile weights
1.5 megabytes, and about half of that weight are images. Serving images of
the right size, not too small, not too
big, can speed up your site significantly. This page uses a lot of images. Let’s see what Lighthouse
Report can tell us about it. Well, it tells us that if you
reduce the image dimensions, you can make your page load
faster by three seconds. Now that looks like a good
idea, so let’s get down to it. Let’s look at the
worst offenders first. The best place to start
looking is Chrome DevTools network panel. Here, you can see a list of
everything loaded by the page. Let’s select Image filter
to focus on images only. The page is loading 11
images, and the total weight of the images is 2.3 megabytes. The biggest one weighs
over 700 kilobytes. This image is the hero
image on the page. Because it’s a
hero image, it has to be as big as the
window is, but it doesn’t have to be bigger than that. The current pixel
size of this image is about 2,200 by 1,400 pixels. Let’s create two new versions
of this image, a medium and a small one. This is much more than we need
on most of our users’ devices. Generally, the size of
the image you need to use depends on the user’s
device, its screen size, and pixel density. High resolution screens
display a lot of pixels, but don’t go crazy. Start small and then
test what works best. You will rarely
need an image that’s more than 800 pixels wide. A rule of thumb you can use
is that most images should be below 100
kilobytes, and an image should be no bigger than 200
kilobytes times the portion of the screen it takes up. Because this image is
used as a CSS background, I cannot do source it to tell
the browser what images are available. Instead, I’ll use
media queries to tell the browser exactly
which image to use with the respective screen size. Well, let’s re-load the page. You just reduced the page
rate by over 500 kilobytes by optimizing only
a single image. For an average user
on the 3G network, the site now loads
three seconds faster. Faster images lead to
better perceived performance on the site and can positively
impact the bounce rate, as well as user engagement. I hope you find this tip
useful, and thanks for watching. Check out our other
videos for more tips on how to make your
website even faster.

Leave a Reply

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

Back To Top