It’s one thing to understand how to do something and another to actually do it. For the last few weeks I’ve been talking about responsive images, specifically the srcset attribute, the picture element, and the image-set() value on the background-image property. Along the way I promised a demo, which I’m presenting today.
Tag: responsive images
Responsive Images Revisited—High Resolution Images
What makes for a high resolution image? Is it the pixels per inch (ppi)? Is it the dots per inch (dpi)? What distinguishes an image as @1x, @2x, or @3x? If we’re going to create pixel dense images for high resolution devices, it probably makes sense to understand a little about what is a high resolution image.
Responsive Images Revisited—The Picture Element
Responsive images have some challenges beyond the best pixel density to display for a given screen. There are issues maintaining the correct aspect ratio and overall image hierarchy. There are also issues with important details being lost as an image gets much smaller than the original.
Responsive Images Revisited—The Srcset Attribute
One of the main challenges with responsive design is how to handle images. It’s not that we don’t know what we want to do. It’s that the ability to do it has been lacking. Fortunately the situation is starting to change for the better.