Letting The Browser Decide
Open the lesson folder
In our starter files, open the index.html page from this lessons folder:
> 2.Letting-the-browser-decide
Included images
In the lesson 2 folder you will find the index.html file and also some images to use:
The same image is supplied in widths of 320px, 640px, and 1500px wide. And some with the 1x, 2x, and 4x suffix which we will look at soon.
Using srcset
To help with the issue of choosing the correct image size for the device or browser, the <img> element has a built in attribute called srcset.
This allows us to list multiple images, and then the browser can decide which is the most appropriate one to use.
As previously, we set up a regular HTML image element:
<body>
<img src="images/road-320.jpg" alt="road image" />
</body>
Rather than having just one image, we can use the srcset attribute to provide some image alternatives:
<img
src="images/road-320.jpg"
srcset="images/road-640.jpg, images/road-1500.jpg"
alt="road image"
/>
The original src attribute is used if the srcset is unsupported However, srcset is widely supported in all major browsers.
Setting the width
To help the browser figure out which image to choose, we can declare the image size next to each option. We do this just after the image location, and the pixel size has a w suffix:
<img
src="images/road-320.jpg"
srcset="images/road-640.jpg 640w, images/road-1500.jpg 1500w"
alt="road image"
/>
Along with setting a pixel value, we will also cover setting the pixel density in the next lesson.
To test this in the browser, open up the network tab inside the developer tools:
right click > inspect
To test:
- Shrink the visible browser area to the smallest width available, and refresh the page. The network panel should reveal the 640px wide image has been selected.
- Increase the visible browser area to the largest width available, and refresh the page. The network panel should reveal the 1500px wide image has been selected.
Image selection may vary depending on your screen resolution.
The sizes attribute
This image selection is based on the width of the browser’s viewport, which is the browsers visible area. It is also making this choice under the assumption that we want the images to render at the full width of the browser.
We may not want this to be the case. To control this, we can set up the sizes attribute:
<img
src="images/road-320.jpg"
srcset="images/road-640.jpg 640w, images/road-1500.jpg 1500w"
alt="road image"
sizes=""
/>
If we leave out the sizes attribute, it is assumed the images will be the full width of the viewport.
At it’s most basic, we can add a size to apply to all images. For example, if we want all images to render at 50% of the browsers viewport width, we add 50vw:
<img
src="images/road-320.jpg"
srcset="images/road-640.jpg 640w, images/road-1500.jpg 1500w"
alt="road image"
sizes="50vw"
/>
Regardless of the selected image, it will only render at 50% of the browser width. You can also use a px value.
Responsive layout
For small screens, it is common to see images and content using all of the available width:
This makes sense as we have limited space available. And often a smaller percentage width on a larger screen size:
How would we do this?
We do this by combining the sizes attribute with media queries to tailor the images for the size of the device.
Using srcset we currently have two images to choose from. This means we add two values in the sizes attribute, separated by a comma:
<img
src="images/road-320.jpg"
srcset="images/road-640.jpg 640w, images/road-1500.jpg 1500w"
alt="road image"
sizes="(max-width: 600px) 100vw, 30vw"
/>
This means up to 600px, the image will be 100% wide. Then over that it would reduce to 30vw. This is a great way to control the sizes of the images for different screens.
If you have been watching the image changing closely in the browser, you may have noticed that the images we listed in the srcset attribute, may not be changing exactly when expected.
And this is something we will take a look at next.