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/

Transcript

1. SIMON PRAETORIUS Pragmatic Responsive Images using responsive images without going insane
2. ✦ 13 years in web agencies ✦ technical leadership in big projects ✦ independent since June 2023 hire me for 
 your project! Simon Praetorius
3. Basics Simon Praetorius Pragmatic Responsive Images
4. img tag Simon Praetorius Pragmatic Responsive Images <img src="image.webp" srcset=" image@800.webp 800w, image@1000.webp 1000w " sizes="(min-width: 1000px) 1000px, 100vw" alt="…" />
5. two new attributes Simon Praetorius Pragmatic Responsive Images <img src="image.webp" srcset=" image@800.webp 800w, image@1000.webp 1000w " sizes="(min-width: 1000px) 1000px, 100vw" alt="…" />
6. srcset attribute Simon Praetorius Pragmatic Responsive Images <img src="fallback.webp" srcset=" image@800.webp 800w, image@1000.webp 1000w " sizes="(min-width: 1000px) 1000px, 100vw" alt="…" />
7. srcset attribute Simon Praetorius Pragmatic Responsive Images 600w 900w 1200w 1500w srcset = same image in different sizes image pixels
8. sizes attribute Simon Praetorius Pragmatic Responsive Images <img src="fallback.webp" srcset=" image@800.webp 800w, image@1000.webp 1000w " sizes="(min-width: 1000px) 1000px, 100vw" alt="…" />
9. sizes attribute Simon Praetorius Pragmatic Responsive Images 1000px sizes = displayed width on website ≥ 1000px 100vw < 1000px
10. Simon Praetorius Pragmatic Responsive Images Which image file?
11. Simon Praetorius Pragmatic Responsive Images ✦ srcset + sizes ✦ display pixel density 
 (aka “high DPI” aka “retina” aka “2x”) ✦ cached images ✦ user preferences ✦ network speed ✦ …
12. Simon Praetorius Pragmatic Responsive Images I choose 1200w!
13. Use Cases Simon Praetorius Pragmatic Responsive Images
14. same display size across all viewports e. g. icon, user avatar Simon Praetorius Pragmatic Responsive Images <img src="200.webp" srcset="400.webp 2x" />
15. 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
16. 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
17. 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?
18. 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 " />
19. Advanced Simon Praetorius Pragmatic Responsive Images
20. picture tag Simon Praetorius Pragmatic Responsive Images <picture> <source srcset="…" media="(min-width: 700px)" /> <source … /> <img src="fallback.webp" alt="…" /> </picture>
21. Use Cases Simon Praetorius Pragmatic Responsive Images
22. Simon Praetorius Pragmatic Responsive Images different aspect ratios for viewports <picture> <source srcset="d@800.webp 800w, …" sizes=" (min-width: 1600px) 1600px, 100vw " media="(min-width: 700px)" /> <source srcset="m@500.webp 500w, …" sizes="100vw" /> <img src="fallback.webp" /> </picture> e. g. hero image, image slider
23. Simon Praetorius Pragmatic Responsive Images <picture> <source srcset="d@800.webp 800w, …" sizes=" (min-width: 1600px) 1600px, 100vw " media="(min-width: 700px)" /> <source srcset="m@500.webp 500w, …" sizes="100vw" /> <img src="fallback.webp" /> </picture> 700px mobile crop desktop crop art direction
24. Simon Praetorius Pragmatic Responsive Images <picture> <source srcset="d@800.webp 800w, …" sizes=" (min-width: 1600px) 1600px, 100vw " media="(min-width: 700px)" /> <source srcset="m@500.webp 500w, …" sizes="100vw" /> <img src="fallback.webp" /> </picture> 1x: 0w – 700w 2x: 0w – 1400w 700px mobile crop desktop crop
25. Simon Praetorius Pragmatic Responsive Images <picture> <source srcset="d@800.webp 800w, …" sizes=" (min-width: 1600px) 1600px, 100vw " media="(min-width: 700px)" /> <source srcset="m@500.webp 500w, …" sizes="100vw" /> <img src="fallback.webp" /> </picture> 700px mobile crop desktop crop 1x: 700w – 1600w 2x: 1400w – 3200w
26. There is no perfect image for everyone. Simon Praetorius Pragmatic Responsive Images
27. 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
28. Questions? Simon Praetorius Pragmatic Responsive Images
29. Thank you! Simon Praetorius Pragmatic Responsive Images
30. Simon Praetorius Web Consultant, Coach & Web Developer www.praetorius.me @s2bproject @s2b@norden.social moin@praetorius.me