Responsive Images on the web
When I started working on the web, the big decision we had to make was whether we would accommodate screens sized 640x480, or just assume everyone had screens that were 800x600, and a page — HTML and images — over 100 kb caused angst and sleepless nights.
Now we have to not only expect huge screens — 4K devices have a resolution of 3840×2160 — we also have to make sites work on phone screens as small as 240x320. And we need pages to load quickly on mobile networks and public wifi, as well as home fibre optic cables.
We are lucky we have CSS. With HTML 4, layouts got horribly complicated with tables nested in table, twenty column tables with row-spans and col-spans all over the place. It would be impossible to make things work on such different devices with HTML 4, or DHTML or whatever Netscape and Microsoft were calling their latest versions.
All in all it has got much easier — but we want to do so much more. We want fast loading on mobile devices and massive images on TV's and high end desktops or laptops.
Which brings us to Responsive Design, a technique that lets you build a basic layout which will work best on small screens, and use CSS media queries to add complexity to the layout as screens get larger. This approach works well with font sizes, block placement and column widths and so on, but it is not practical to use CSS to deliver different images for different screen sizes. It could be done by adding images as element backgrounds … but, no.
Fortunately there is a way to do it - but it involves embedding layout information in the content … which is not ideal either.
Introducing the srcset attribute. srcset lets you define different images at different resolutions, and lets the browser pick the best image for the screen size being used. CSS Tricks has a good article that is a good starting point: Responsive Images: If you’re just changing resolutions, use srcset
If you are using Grav, there is a way to add srcset to your templates. The Media module will not only generate the srcset attributes, but can also generate the images needed. The only problem is that is makes the largest size the default.
