Responsive images and how to implement them in Neos

Rendering images with optimal quality and minimal payload size is surprisingly complex because of the range of user-devices and network conditions. The talk will cover the standards behind responsive images and show the implementation in vanilla Neos and with Sitegeist.Kaleidoscope.

Usertracking aside images are the major payload of recent websites and while the standards regarding image rendering in HTML are not overly complex the details get complicated fast. Especially in a CMS like Neos where most of the work has to be automated.

In the main part of the talk I will give an overview about the relevant html-standards for responsive images like img.sizes, img.srcset and picture + source, how those actually work and should be used for optimal user experience. Following that I will demonstrate how this is implemented using off the shelf Neos and compare this to the optimized workflow we implemented with our package Sitegeist.Kaleidoscope.

Transcript

1. Real Values. Responsive images and how to implement them HTML & Sitegeist.Kaleidoscope Martin Ficzel Photo by Malcolm Lightbody on Unsplash
2. Real Values. Martin Ficzel • Backend Developer • ficzel@sitegeist.de • twitter/slack: @kopfaufholz • Neos Team-Member Atomic-Fusion, AFX, Fusion-Forms • Sitegeist.Monocle, Sitegeist.Kaleidoscope, Sitegeist.MagicWand
3. Real Values. Quick Poll: Who are you ? • Who is Backend Developer • Who is Integrator • Who is Frontend Developer • Who is Project Management • Who has not raised the hand yet 󰢧 󰢨 󰢨
4. Real Values. Responsive images and how to implement them • Why is that relevant • The relevant HTML standards • CMS specific challenges & the solution we ended up with • Questions
5. Real Values. Why is that relevant! 4 Reasons
6. Real Values. 1. Devices 600 > 6000 px
7. Real Values. 2. Bandwidth https://op.europa.eu/webpub/eca/special-reports/broadband-12-2018/de/ Rural areas General
8. Real Values. 3. Timing • Images are requested during parsing • At the same time as CSS and JS • Browsers only know about the HTML at that stage ⏰
9. Real Values. 4. Payload • HTML 10 > 100 KB • CSS 10 > 100 KB • JS 100 > 500 KB • Images 1000 > 2500 KB * unscientific guestimation
10. Real Values. You can mess up performance in many ways but you cannot achieve great performance without caring for responsive-images!
11. Real Values. Responsive images in HTML a simplified overview
12. Real Values. 1992 - HTML 1.0
13. Real Values. HTML 2.0 - 4.0 <img src="example.jpg" alt="Image showing things" title="Example image" width="600" height="400" />
14. Real Values. The long sleep • One highres image will be fine for all once bandwidth becomes cheap • Then Smartphones and Tablets became popular • And mobile use became common
15. Real Values. JS - Experiments <img src="…placeholder…" data-src-200="example-200.jpg" data-src-400="example-400.jpg" data-src-600="example-600.jpg" /> 🪄
16. Real Values. 1x 2x <Img> Multiple Resolutions
17. Real Values. 1x 2x <Img> Multiple Resolutions <img src="example.jpg" srcset="example-600.jpg 2x, example-300.jpg 1x, exa /> candidate-url descriptor
18. Real Values. <Img> Multiple Resolutions
19. Real Values. <Img> Multiple Sizes
20. Real Values. <Img> Multiple Sizes
21. Real Values. 600w 800w 1000w 1200w <Img> Multiple Sizes
22. Real Values. 600w 800w 1000w 1200w <img src="example.jpg" sizes="(max-width: 320px) 280px, … , … , 50vw" srcset="example-320w.jpg 320w, example-480w.jpg 48 /> media-query size-hint candidate-url width-descriptor <Img> Multiple Sizes default
23. Real Values. <Picture> - Art direction Case 1, same cat different crops
24. Real Values. <Picture> - Art direction 🌙 ☀ Case 2: Different cat depending on use case
25. Real Values. <Picture> - Art direction <picture> <source media="(orientation: landscape)" srcset="..." sizes="..." width="..." height=".. <source media="(orientation: portrait)" srcset="..." sizes="..." width="..." height=". <img src="..." /> </picture>
26. Real Values. <Picture> - Multiple formats
27. Real Values. <Picture> - Multiple formats <picture> <source type="image/webp" srcset="..." sizes="..." width="..." height=".. <source type="image/avif" srcset="..." sizes="..." width="..." height=" <img src="example.jpg" /> /picture>
28. Real Values. Cat loading behavior
29. Real Values. Image loading behavior <img src="example.jpg" loading="eager" loading="lazy" /> Request when close to viewport Or never Request immediately during parsing
30. Real Values. Cat appearance behavior
31. Real Values. Image appearance behavior CSS Request immediately during parsing <img src="example.jpg" width="600" height="400" style="aspect-ratio: 4/3;" />
32. Real Values. Future • Smarter Browsers? ◦ Consider current bandwidth ◦ Consider CSS for lazy images • Successor for JPEG / PNG? of cat images
33. Real Values. Responsive images are not that hard
34. Real Values. Non trivial to implement • Editors can select images with different aspects • Content Elements may be used in different contexts • Separation of Integration and Presentation requires error prone communication of many urls
35. Real Values. Hard to verify • You can only spot low resolutions • Offices have fast networks • Browsers other than Firefox stick to highres Versions
36. Real Values. Sitegeist.Kaleidoscope responsive images for Neos
37. Real Values. Quick Poll: Who knows Kaleidoscope ? • Who has heard about Kaleidoscope • Who actually tested it • Who uses it all the time 󰢧 󰢨 󰢨
38. Real Values. the idea • Avoid creating dozens of urls • Decide on dimensions in presentation • Make mistakes visible • In other aspects stay close to HTML
39. Real Values. AssetImageSource imageSource = Sitegeist.Kaleidoscope:AssetImageSource { asset = ${q(node).property("image")} title = ${q(node).property("title")} alt = ${q(node).property("alternateText")} }
40. Real Values. Kaleidoscope:Image <Sitegeist.Kaleidoscope:Image imageSource={props.imageSource} srcset="600w, 800w, 1200w, 1600w, 2400w" sizes="(max-width: 800px) 100vw, (max-width: 1200 width="600" loading="eager" format="webp"
41. Real Values. Kaleidoscope:Picture <Sitegeist.Kaleidoscope:Picture imageSource={props.imag <Sitegeist.Kaleidoscope:Source media="(orientation: portrait)" width="400" height="400" srcset="400w, 800w, 1200w" sizes="50vw" /> <Sitegeist.Kaleidoscope:Source imageSource={props.otherImageSource} edia=”(orientation: landscape) and (max-wi 00w, 8000w"
42. Real Values. DummyImageSource imageSource = Sitegeist.Kaleidoscope:DummyImageSource { backgroundColor = '00ff00' baseWidth = 400 baseHeight = 250 }
43. Real Values.
44. Real Values.
45. Real Values. Tips and Tricks
46. Real Values. Eager loading in keyvisuals keyvisual = Vendor.Site:Fragment.Keyvisual { prototype(Sitegeist.Kaleidoscope:Image) { loading = 'eager' } prototype(Sitegeist.Kaleidoscope:Picture) { loading = 'eager' } }
47. Real Values. Eager loading first content content = Neos.Neos:ContentCollection { nodePath = "main" content.iterationName = "mainContentIterator" prototype(Sitegeist.Kaleidoscope:Image) { loading = ${mainContentIterator.isFirst ? 'eager' : 'lazy } prototype(Sitegeist.Kaleidoscope:Picture) { loading = ${mainContentIterator.isFirst ? 'eager' : 'la
48. Real Values. renderer = Neos.Fusion:Case { inMain { condition = ${q(node).parent().is('[instanceof Vendor.Site: renderer = Vendor.Site:Component.MainImage { imageSource = ${props.imageSource} } } inGrid { condition = ${q(node).parent().is('[instanceof Vendor.Sit renderer = Vendor.Site:Component.GridImage { imageSource = ${props.imageSource} One content, many presentations
49. Real Values. Enforcing dummy images # Root.fusion prototype(Sitegeist.Kaleidoscope:Image) { imageSource.@process.dbg = Sitegeist.Kaleidoscope:DummyImage baseWidth = ${value.width()} baseHeight = ${value.height()} } } prototype(Sitegeist.Kaleidoscope:Picture) { imageSource.@process.dbg = Sitegeist.Kaleidoscope:DummyIm baseWidth = ${value.width()} baseHeight = ${value.height()} ⚠
50. Real Values. What to take home
51. Real Values. • no rocket engineering • not trivial and easy to mess up • Tooling is needed • like Sitegeist.Kaleidoscope
52. Real Values. Questions?
53. Real Values. Thank you! cat images from the internet: Pixabay, Unsplash, Rawpixel, Pexels, Wikipedia