Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Pragmatic Responsive Images

Pragmatic Responsive Images

The topic of responsive images is full of confusion and misunderstandings. This is not a coincidence because it is a complicated subject with a lot of historical baggage. I've been searching for the perfect solution for years and instead found a pragmatic approach that has served me well in numerous web projects.

This talk was presented at HTML Meetup Hamburg.
https://hhtml.de/events/2023-09-28-third-meetup/

Simon Praetorius

September 28, 2023
Tweet

More Decks by Simon Praetorius

Other Decks in Technology

Transcript

  1. ✦ 13 years in web agencies ✦ technical leadership in

    big projects ✦ independent since June 2023 hire me for 
 your project! Simon Praetorius
  2. two new attributes Simon Praetorius Pragmatic Responsive Images <img src="image.webp"

    srcset=" [email protected] 800w, [email protected] 1000w " sizes="(min-width: 1000px) 1000px, 100vw" alt="…" />
  3. srcset attribute Simon Praetorius Pragmatic Responsive Images 600w 900w 1200w

    1500w srcset = same image in different sizes image pixels
  4. sizes attribute Simon Praetorius Pragmatic Responsive Images 1000px sizes =

    displayed width on website ≥ 1000px 100vw < 1000px
  5. Simon Praetorius Pragmatic Responsive Images ✦ srcset + sizes ✦

    display pixel density 
 (aka “high DPI” aka “retina” aka “2x”) ✦ cached images ✦ user preferences ✦ network speed ✦ …
  6. same display size across all viewports e. g. icon, user

    avatar Simon Praetorius Pragmatic Responsive Images <img src="200.webp" srcset="400.webp 2x" />
  7. Simon Praetorius Pragmatic Responsive Images same aspect ratio across all

    viewports <img src="fallback.webp" srcset=" 500.webp 500w, 700.webp 700w, 850.webp 850w, 1000.webp 1000w, 1300.webp 1300w " sizes=" (min-width: 1100px) 500px, (min-width: 700px) 50vw, 100vw " /> e. g. teaser card, image in column
  8. Simon Praetorius Pragmatic Responsive Images <img src="fallback.webp" srcset=" 500.webp 500w,

    700.webp 700w, 850.webp 850w, 1000.webp 1000w, 1300.webp 1300w " sizes=" (min-width: 1100px) 500px, (min-width: 700px) 50vw, 100vw " /> based on responsive design
  9. Simon Praetorius Pragmatic Responsive Images <img src="fallback.webp" srcset=" 500.webp 500w,

    700.webp 700w, 850.webp 850w, 1000.webp 1000w, 1300.webp 1300w " sizes=" (min-width: 1100px) 500px, (min-width: 700px) 50vw, 100vw " /> 1x: 500w 2x: 1000w 1x: 350w – 550w 2x: 700w – 1100w 1x: 0w – 700w 2x: 0w – 1400w srcset?
  10. Simon Praetorius Pragmatic Responsive Images 1x: 500w 2x: 1000w 1x:

    350w – 550w 2x: 700w – 1100w 1x: 0w – 700w 2x: 0w – 1400w <img src="fallback.webp" srcset=" 500.webp 500w, 700.webp 700w, 850.webp 850w, 1000.webp 1000w, 1300.webp 1300w " sizes=" (min-width: 1100px) 500px, (min-width: 700px) 50vw, 100vw " />
  11. picture tag Simon Praetorius Pragmatic Responsive Images <picture> <source srcset="…"

    media="(min-width: 700px)" /> <source … /> <img src="fallback.webp" alt="…" /> </picture>
  12. Simon Praetorius Pragmatic Responsive Images different aspect ratios for viewports

    <picture> <source srcset="[email protected] 800w, …" sizes=" (min-width: 1600px) 1600px, 100vw " media="(min-width: 700px)" /> <source srcset="[email protected] 500w, …" sizes="100vw" /> <img src="fallback.webp" /> </picture> e. g. hero image, image slider
  13. Simon Praetorius Pragmatic Responsive Images <picture> <source srcset="[email protected] 800w, …"

    sizes=" (min-width: 1600px) 1600px, 100vw " media="(min-width: 700px)" /> <source srcset="[email protected] 500w, …" sizes="100vw" /> <img src="fallback.webp" /> </picture> 700px mobile crop desktop crop art direction
  14. Simon Praetorius Pragmatic Responsive Images <picture> <source srcset="[email protected] 800w, …"

    sizes=" (min-width: 1600px) 1600px, 100vw " media="(min-width: 700px)" /> <source srcset="[email protected] 500w, …" sizes="100vw" /> <img src="fallback.webp" /> </picture> 1x: 0w – 700w 2x: 0w – 1400w 700px mobile crop desktop crop
  15. Simon Praetorius Pragmatic Responsive Images <picture> <source srcset="[email protected] 800w, …"

    sizes=" (min-width: 1600px) 1600px, 100vw " media="(min-width: 700px)" /> <source srcset="[email protected] 500w, …" sizes="100vw" /> <img src="fallback.webp" /> </picture> 700px mobile crop desktop crop 1x: 700w – 1600w 2x: 1400w – 3200w
  16. Simon Praetorius Pragmatic Responsive Images ✦ no pixel-perfect sizes queries

    ✦ pragmatic srcset selection, focus on: ✴ mobile @ 2x ✴ desktop @ 1x ✦ only use picture if absolutely necessary Best Practices