Creating Responsive Images
Web users browse the internet in many ways – desktop computers, tablets, mobile phones, and more. Developers can accommodate many of these by using media queries to adjust the layout of pages, but you’re probably wondering how to do the same with images. This tutorial explains how to create responsive images that adjust to different devices, letting you deliver the correct image to the correct device.
In the images folder depicted here, the ending of the filenames describes the resolution or width of the photo – 1x, 2x, small, medium, and so on.
Add the Picturefill polyfill to your HTML in the head, along with an async attribute. The async attribute improves performance by making the browser load the script asynchronously.:
Note: You can only add the async attribute to scripts that have no dependencies – for instance, you can’t add it when loading a plugin that depends on jQuery being present first.
You can use the srcset attribute in images on your page, like so:
The 1x portion of srcset is a pixel density descriptor. Now, your image will adjust according to the device used to view it.
Using width descriptors
You can also use width descriptors on your page, like so:
Now, the browser can select the correct width at which to display your image.