Responsive Images
Preamble
Responsive images are images that adapt to the context of a user’s device. The purpose is to serve up an image that is appropriate to the resolution, size and orientation of the viewport it will be rendered on while maintaining the style and intent of the author’s design.
There are effectively two problems that responsive image seeks to solve. The resolution switching problem and the art direction problem. The resolution switching problem can be decomposed into two parts; different size and same size, different resolution. The art direction problem can be described as the desire to use different images to suit different display sizes or orientations. We’ll explore these in the next two modules.
Basic Image Recap
Basic images are implemented on a web page through the use of the <img> element.
<img src=“img/hungry-kitten.png” alt=“A picture of an orange striped kitten eating a mouse”>
If the image above happens to have a resolution of 1000px x 1000px but the viewport is only 480px wide there’s a significant amount of data that isn’t rendered. Furthermore, there’s a potential waste of bandwidth to fetch resources that could have been optimized without impacting user experience. Another situation could arise where the image resolution isn’t high enough to take advantage of higher resolution display resulting in blurry or pixelated images.
As mobile devices with different viewport sizes, pixel densities and aspect ratios proliferated, a need arose to conditionally serve up images appropriate to the device context.
The <img> element has evolved introducing attributes that accommodate images of varying resolutions and pixel densities.
The <picture> and <source> elements can be used to apply different images in situations where different images are needed for art directions. In fact, the <source> tag can also accommodate various resolutions conditionally loaded through the media attribute.
Further Review
This YouTube video was created by Steve Griffith.
- Read Images | Web Fundamentals | Google Developers
- Read Images in HTML - Learn web development | MDN
Lesson File
See Also
- Responsive images - Learn web development | MDN
- Responsive Images 101, Part 1: Definitions - Cloud Four
- Responsive Images: If you’re just changing resolutions, use srcset. | CSS-Tricks