How to speed up your website 2.5x times by using responsive images

S1.E1 from the Achieving 100ms Series.

One of the biggest bottleneck a mobile user is facing when visiting your website is when the images are being downloaded.

The problem is, most of the time, even if they have been optimised, they have been for the biggest screens available. As it turns out, this heavily impacts the user experience in a mobile-first world.

Initial Time to Interactive: 4.2s

Lesson Learned

Instead of using the regular <img src="{url}" /> tag, also specify a set of variants using the srcset attribute so that the browser can pick the correct version based on the device type and screen size.

<img
    src="/images/woman.png"
    sizes="100vw"
    srcset="
        /images/woman-640w.png 640w,
        /images/woman-750w.png 750w,
        /images/woman-828w.png 828w,
        /images/woman-1080w.png 1080w,
        /images/woman-1200w.png 1200w,
        /images/woman-2048w.png 2048w,
        /images/woman-3840w.png 3840w"
    />

Pretty straight forward. It’s a little bit of work to prepare upfront all the image variants, but as you can see in the Benchmarks, the 2.5x speed increase is worth it.

New Time to Interactive: 1.5s - 2.5x speed increase

Benchmarks

Before & After Benchmarks

If you want to dive a little deeper, you can find the source code on GitHub.

This article is part of the Achieving 100ms Series, where I post a new lesson learned each week, so make sure to Clap and Follow to not miss any of them.