srcset and sizes

What srcset and sizes does this image need?

The two attributes that decide which file a browser downloads, written from the widths you have. The sizes attribute is the half people leave at 100vw, and that is what makes a 200px avatar fetch the 1600px file.

file, without the width widths available drawn at, percent of viewport never wider than, px

4 widths Drawn at 50% of the viewport, never wider than 800px.

ready to paste

sizes (min-width: 1600px) 800px, 50vw
chosen on a 1x phone, 390px 480w
chosen on a 2x laptop, 1440px 1600w
largest gap between widths a gap over about 400px wastes bytes at the top of it 400px

out

<img src="/img/hero-1600.webp"
  srcset="/img/hero-480.webp 480w,
          /img/hero-800.webp 800w,
          /img/hero-1200.webp 1200w,
          /img/hero-1600.webp 1600w"
  sizes="(min-width: 1600px) 800px, 50vw"
  width="1600" height="auto" alt="" loading="lazy" decoding="async" />

how to use it

List the widths you have rendered, in pixels, separated by commas.
Say how wide the image is drawn - as a percentage of the viewport, or in px.
Copy both attributes; sizes is not optional, and a wrong one costs more than a missing srcset.

what this page cannot do

The extension reads what a live page actually downloaded against the box the image was drawn in, so an oversized fetch is measured rather than predicted.

Images in the panel Why is my page so heavy?

Add LoupeKit

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more the Chrome build

no host permissions · the reading is free