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. The talk will conclude with some generic tips and a checklist for debugging and optimizing image rendering in Neos.