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

Introducing sizes - CSS Tutorial

From the course: Responsive Images

Start my 1-month free trial

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…

Contents