This post is based on Responsive images on MDN
When talking about responsive images, we want our images look good on both smartphones and laptops, there are two ways to do it under different conditions, to show good images on smartphones, one way is to display the main part of the original image by zooming it in, another way is to supply a smaller sized image for smartphones user, we call the first one Art Direction Problems, and the second one Resolution Switching Problems. For the resolution switching problems, we also have two categories, one is to display different size images on different size devices, one is to display the same size images on different resolutions devices.
<picture> to solve art direction problems,
sizes attributes of the
<img> element to solve resolution switching problems,
srcset with x-descriptors to solve the same size images on different resolutions devices.
Showing the same image but containing different pixels. small screen size users don’t want to download a large image with pixels more than its device, which waste the bandwidth.
For example, think of a phone with 500px width wand each pixel can only show a pixel of an image, if you supply a 1000px width image to it, it will diplay the same as a 500px width image, but with extra bandwidth used.
<img> element can only reference a single
src, to solve the problem above, we need two new attributes —
sizes — to provide different sized images along with hints to help the browser to pick the right one.
For example, to provide smaller images for smartphones and larger images for laptops or desktops:
Let’s explore these attributes in more detail:
srcsetdefines the set of images we will allow the browser to choose from, and what width each image is followed by the file position.
sizedefines a set of media conditions and indicates what image size would be best to choose when certain media condition are true, if one image size not comes with a media condition, that’s the default condition, always put the default condition in the last one of the list because the browser ignores everything after the first matching condition.
With these attributes set, the browser will:
- Look at the width of the device
- Work out which media condition is true in the
- Look at the slot size given to the media condition
- Request the image referenced in the
srcsetlist that most closely matches the chosen slot size.
A common metadata in the
<head> element is
<meta name="viewport" content="width=device-width">, this forces mobile browser to adopt their real viewport width for loading the pages (because some browsers lie about their viewport width, and instead load the page at a larger viewport width and shrink the loaded page down, which is not helpful for responsive design).
To support multiple display resolutions but keep the image in the same size, you can do like this:
In this case, size is not needed, the browser will get the resolution of the display and serves the most approprite image refered in the
srcset list. So if the device accessing the page has a standard/low resolution display, with one device pixel representing one CSS pixel, the
apple-320w.jpg image will be loaded, if the device has a higer resolution of two device pixel representing one CSS pixel, the
apple-640w.jpg image will be loaded.
Use different images (like cropped images) for different space allocations.
We use the
<picture> element to implement:
You must provide an
<img> element after all
<source> elements, otherwise no images will appear, because it’s the
<img> element that makes the image (or alt) displyed. This also provides the default case if none of the media conditions above return true (So you could actually remove the seond
<source> in the above example), also, it works as a fallback for browsers that don’t support the
<picture> element, the
sizes attributes of the