How To Use Responsive Images

September 30, 2019
3 min. read

Based on Andreas Bovens' article [Responsive Images: Use Cases and Documented Code Snippets to Get You Started](https://dev.opera.com/articles/responsive-images/) we will look at four use cases for responsive images: - Change image sizes based on responsive design rules (the sizes use case) - Optimize for high-dpi screens (the dpi use case) - Serve images in different image formats to browsers that support them (the mime use case) - Serve different art depending on certain contextual factors (the art direction use case) We'll look at some example native responsive images and how they apply to these use cases. ## Viewport Size Based The most basic case is to provide different images based on the width of the viewport. The idea is to not load huge images for devices that don't need or want them. Since we're only worried about sizes we can use `srcset` to indicate the sizes that we want to use. ```css

src="opera-400.jpg" alt="My House" ``` ## DPR based We can also use responsive images to handle images that will look good regardless of the DPR factor of the device. Some modern displays have up to 5x resolution so the standard image can range from 1x1 to o5x5 pixels per logical pixel ```css The Oslo Opera House

``` ## Media Query-like conditions ```css

``` When you use the srcset and sizes attributes on an `` element, you are providing information that the browser can use to make an informed decision about what image is appropriate for the user based on factors you as a developer won't see or won't care about. If we provide browsers with information via srcset and sizes then browsers can make smarter decisions about the appropriate image source. But none of that is possible when you use the `<picture>` element and its media attributes: ```css

``` When you use the `picture` element you're telling the browser that it **must** use the first element where the media matches or the default element if none do. The order of sources matters and you have to be sure that you have enough media conditions to cover all your cases and a good default. ## Different Images for Portrait or Landscape There are times when we may want to use different images for portrait and landscape modes. This picture element will check for the device orientation and use the appropriate source material. We could further refine this with viewport or DRP elements in the `srcset` attribute. ```css

``` ## Different Formats for Different Browsers Before WebP became [widely supported](https://caniuse.com/#feat=webp) (IE and Safari are the only browsers that don't support it) we had to make sure that we served the right images for the right browsers. In this picture element, both sources match the media so the browser will take the first source in document order and use that one if the browser supports the format and the second one if it doesn't. Finally, if it doesn't understand the picture element, the browser will ignore it altogether and use the image element inside the picture. ```css

``` ## Combining different techniques This is a more extreme example of combining different techniques. We use multiple sources and multiple formats to make sure we reach as wide a userbase as possible. ```css

``` We have a lot of options regarding responsive images. This barely scratches the surface of leveraging responsive images but it's a good start and a good tool to add to the arsenal. ## Links and resources - [Use Cases and Requirements for Standardizing Responsive Images](http://usecases.responsiveimages.org/) - [Retina revolution](https://www.netvlies.nl/tips-updates/algemeen/algemeen/retina-revolution/) - [Don’t use