srcset & sizes Attributes

[00:00:00]
>> Unfortunately, picture is gonna forget about a few things here. So, first of all, how big is the image location, or in other words, the hole, in the page layout? So, if you think about your page at a very specific dimension, how big is the hole that the image is going to fit into, okay?

[00:00:20]
That we don't know as webpage authors. And how big are the images? If you think of this as a hole and a peg, how big are those images that might be displayed? We may not necessarily know that either. And we may not necessarily know the pixel density of the screen if we wanna have a retina image for those kinds of devices.

[00:00:40]
So it is possible to write enough code to address all of those issues, and it's ridiculous, okay? Nobody wants this. [LAUGH] Right, just because you can, doesn't mean you should, but there you go. Okay, and I'm not even gonna explain it, that's what it would look like. All right, so if you have that kind of situation, where you're interested in serving up the right image, and you don't necessarily want control over the content of that image itself, then we have the alternative which is srcset and sizes.

[00:01:18]
These are attributes that go inside of the image element. And in this case, the browser is going to decide which image will display. Okay, you do not get to decide. So, generally speaking, when people work with srcset and sizes, we're talking about the picture at different dimensions. It's gonna be exactly the same photo, it's not going to be art-directed.

[00:01:42]
In other words, showing different parts of the image, or cropped in any way. It's gonna be exactly the same image at different dimensions, makes sense? Okay, so as they say here, these are the difference between the author when she's writing the code and the browser when it's loading the page.

[00:02:02]
Here's things that you need to know in order to really optimally load an image. You needed to know the viewport dimensions, the image size relative to the viewport, the screen density, and the source file dimensions, okay? And in some cases, the author knows a few of these things, the browser knows other of them, but we don't talk to each other.

[00:02:22]
And so we have a mess, yeah? All right, so what srcset and sizes does is it will resolve this particular situation. So now the browser will know not only the viewport dimensions and the screen density, it will also know the image size relative to the viewport. And it will know the source files dimensions, makes sense?

[00:02:46]
Okay, so again, there is a catch, the browser is gonna decide which of those images to load, and it may not load the image that you expect. Because every browser is gonna be programmed with their own special code, okay? And it may not all be the same, we know browsers, right?

[00:03:07]
So that is the thing that you have to keep in mind. You have to let the browser do its own thing, don't be a control freak, all right? So this is the way this code is going to look. This is all the image element, okay? So we have an img src, we have an img srcset, and we have img sizes, and we have alt text, okay?

[00:03:28]
So let's go through what these things mean. First of all, we have the image itself, so img src small, that is the fallback. If the browser doesn't understand srcset and sizes, this is the image it's going to display, all right? And the alt attribute is going to be the same thing for all of the images.

[00:03:47]
Which is fine, because these are images that are big, and they're small, and they're all the same picture, makes sense? Okay, the srcset part of this is gonna be the filenames and widths of these images in pixels. Unfortunately, you can't use any other units, so it's 1024w, that is 1024 pixels, 640w, that is 640 pixels.

[00:04:13]
And these are the actual dimensions of these particular images. So this is just like saying the image source is large.jpeg and the width is 1024. If you were working with the width and height attributes inside of the image element.
>> And these aren't max-widths or min-widths, it's just-

[00:04:33]
>> This is the dimension of the picture, right? This is the width of this picture. We are not dictating the hole in which it is fitting, okay? That comes with the next thing, which is sizes. This is telling it about the size of the hole, okay? So here's the picture and its dimensions, here's the hole you're gonna put it into.

[00:04:55]
And so, here, what size has been, width: 36em, 33vw, comma, 100vw. Here's the logic there. So if the min-width is at least 36em, or you could do that in pixels if you wanted, then display the image at 33.3vw. What does that mean? What is 33.3vw?
>> Vertical width?

[00:05:17]
>> Viewport width, so a third of the viewport width, right? So if the minimum width of the screen is at least 36em, I'm not sure what that translates to in pixels, then we're gonna display the image at the width of one-third of the viewport. So that is how srcset and sizes work, all right?

[00:05:37]
And that is how you would read this. And these slides are available for download in Chapter 12. You may wanna download these and keep them on file. And you can certainly refer to Eric Porter's excellent article on this. It's from 2014, it's still relevant today, this is still how it works, okay?

[00:05:55]
All right, so there's other ways you can use the same kind of source kind of thing. Some people have done this way, here's my retina image will be my 2x image, my super retina image will be this 3x image. And then, of course, we'll just have our standard image as the source for the image tag.

[00:06:15]
And as it says here, it's a nice compact way to supply that high DPI imagery, but this only works for fixed width images. So if you want your image to flex a little bit on the screen, this is not the solution for that. So here might wind up being some code that you could write on this for a picture, for example, here.

[00:06:36]
So here's an idea for incorporating aspect ratios. So we could load different images that are of different sizes. We might have 16 by 9 images if the screen is big enough. We might have square images for other size screens. And then we have our fallback picture. So you just look at that and go, wow, that's kind of cool.

[00:07:01]
Okay, so here I'm specifying seven different images, depending on what's going on on the screen. Now, where would you do this much work for one image? I don't know, maybe your big banner image across the top, but maybe not really much else, yeah.
>> I was actually gonna ask about, can you query just the actual ratio, screen ratio?

[00:07:26]
>> You could try doing some aspect ratio media queries here instead for your picture element as well.
>> Can I skip ahead? [LAUGH]
>> There you go.
>> Is that the next slide?
>> There you go, so there's that. Okay, so which should you use, picture or src and srcset?

[00:07:42]
So if you wanna use picture, you have to start to have to answer these questions. Is the image being optimum for content reasons more than technical reasons, right? So in other words, I'm gonna take my picture, I'm gonna take a part of it. Because when this picture goes down this small, I can't see that detail anymore, for example, okay?

[00:08:03]
For the picture, the author is going to choose the best image. So you're gonna program it so that the image you want to display where you want to display it. And those images may potentially be very different in composition and dimension, makes sense? Awesome, for src and srcset, the images are being optimized for technical reasons more than content reasons.

[00:08:25]
And what we mean by that is we are doing speed optimization for our webpage, and we want our images to load as fast as possible. Okay, so that would be an example of a technical consideration. The browser is gonna choose the best image, and that best image may not be the same across all of the browsers, okay?

[00:08:45]
And those images are gonna vary in dimension, but not in composition. They're all gonna be exactly the same image, makes sense? Okay, so finally, if you were working with background images, and you want them to be responsive. Because sometimes your background images need to tame their file sizes depending on what device you're working on.

[00:09:11]
So here you would contain your background images in a media query. And if you do that, then only one image will download, if your images are inside of the media query. And then you're gonna constrain all of your background images in specific media queries, or multiple images may download.

[00:09:27]
So what do I mean by that? This is what the code looks like. So if my max-width is 700 pixels, we're gonna load the small picture. If it's at least 701 pixels, we'll download the larger picture.