From the course: Responsive Images
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Introducing sizes
In the example we built in the previous movie, I brought your attention to a logical fallacy in using just SourceSet and the width descriptor, to mark up responsive images. Because we're only providing the browser with information about the width of our image files, and the only other width the browser has for reference is it's own full viewport width, it'll keep selecting larger and larger image files as the viewport grows. Even if the actual displayed image stays the same size. In this example, you can actually see it really well. The display image never gets above 800 CSS pixels wide, but even so, when I scale the browser window to pass 800 pixels right here, we load in the large image which is 1200 pixels wide, and then eventually also the extra large image which is 1600 pixels wide. So we're loading in more images than we actually need. And we're also loading in the wrong images, because the size of the image is based on the width of the view port, not the width of the actual…
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.