An “image ladder” is the same image resampled at several widths. It’s not a standard term; MDN calls the technique “resolution switching”.

A srcset lists those versions, and the browser picks the one that fits the current viewport and screen density. https://responsiveimages.org/ has details.

For an example, view the source of https://photostructure.com/tags/. All the header art looks like this:

<picture><source type="image/webp" srcset="/img/2026/05/desk-2000w_hu_f9b8e901c6d3512c.webp 400w, /img/2026/05/desk-2000w_hu_4e2d65cccd03c969.webp 800w, /img/2026/05/desk-2000w_hu_11f3bf6c90dbf78d.webp 1200w, /img/2026/05/desk-2000w_hu_8c1a7d0a013e4ee2.webp 1600w, /img/2026/05/desk-2000w_hu_4cebe999e55b5486.webp 2000w" sizes="100vw"><source type="image/jpeg" srcset="/img/2026/05/desk-2000w_hu_cf5671a2e3bdd0cc.jpg 400w, /img/2026/05/desk-2000w_hu_2906e4ba7cda040.jpg 800w, /img/2026/05/desk-2000w_hu_f59ef0388799d4d2.jpg 1200w, /img/2026/05/desk-2000w_hu_e183d28df837e14a.jpg 1600w, /img/2026/05/desk-2000w_hu_ea9c422963c8e0e1.jpg 2000w" sizes="100vw"><img src="/img/2026/05/desk-2000w_hu_f59ef0388799d4d2.jpg" width="1200" height="600" alt="About" class="w-100 header-image" loading="eager"></picture>

That’s generated by https://gist.github.com/mceachen/d5915e46d1294489698e155eb11..., which uses Hugo’s resources.Get and .Resize.