Responsive images on the web are an incredibly powerful tool. The most basic use case is the ability to load different versions of an image, with different sizes and resolutions, based on the user's viewport dimensions, which can avoid sending huge images across the wire to a device with a small screen.
But even more exciting than that is doing art direction on images, which is what I'll cover here.
If all you need is to display the same exact image with different sizes or resolutions, then the plain old <img> element with the srcset attribute is what you're after. The syntax allows you to define multiple source files for an image and helps the browser figure out which one to deliver.
But if you want to deliver different crops of an image based on certain conditions, such as viewport dimensions or orientation, then the <picture> element is the answer.
Displaying a landscape image on a portrait device is a common challenge developers are faced with, as simply displaying the original image in full width often produces suboptimal results — the image looks tiny and detail is lost. We want to have multiple crops of the image and display the one that best fits the user's device.
Showing different image crops based on screen aspect ratio
This can be achieved with the <picture> element, and the markup would look like this:
<picture
Tutorials
Last Updated:
September 2019
