Learn how you can use the srcset and sizes attributes to help the browser more accurately choose the right image for a device.
- [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 multiplication.…
The first candidate is images/bruges_seal_200.jpg…
AuthorJ. David Eisenberg
- Using the img element
- Resizing images
- Obtaining images for your website
- Image formats and when to use them
- Styling images with CSS
- Adjusting borders, margins, and padding
- Adding background images
- Testing screen resolutions
- Autonumbering figures with CSS
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
1. Image Essentials
2. Image Formats
3. Images and CSS
4. Responsive Images
Next steps1m 19s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.