From the course: HTML: Images and Figures
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Using srcset and sizes - HTML Tutorial
From the course: HTML: Images and Figures
Using srcset and sizes
- [Instructor] Using srcset to let the browser choose an image by display density is a good first step, but sometimes you'd like to have more accurate control over which images are chosen. In the images folder in the exercise files for this video, I've created four versions of a picture of the seal of the city of Bruges with the varying widths 200, 400, 600, and 800 pixels. Ordinarily, these would be identical images other than their dimensions, but in order to show the effect more clearly, I've labeled each of the pictures with their width as shown in this example. Here's the HTML so far with just the 200 pixel image on line 16 and 17. As before, we have the meta element on line six to tell the browser to use the full window width with an initial scaling factor of one. Once again, I'm going to add a srcset attribute to the image, whose value is going to be a comma separated list of the candidate images and their widths, but this time using a W as the width unit instead of X for…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.