Responsive Images with the Picture Element

[00:00:00]
>> All right, so if you take a look at this image, it may or may not look good on your computer, depending on how big your screen is. Does it look like a quality image? Does it feel kind of big? Maybe it feels a little bit big. Maybe it's a little bit tall.

[00:00:18]
I mean, this is how the webpage is gonna look when you arrive on it, right? So it looks like magenta line. And there they are. And if you're not looking for a scroll bar, you could easily miss the actual content of this web page, yeah? Okay, so there is a way that we can deal with these images, and we are going to do that here inside of our HTML.

[00:00:42]
So if you open up your HTML here, make this just a tiny bit smaller. There we go. If you open up your HTML here and take a look for the banner, which happens around line 5, right now we have a single image in place. See that. That is our image of the guys here.

[00:01:03]
And it is actually at 475 pixels. It actually doesn't get any bigger than that by default. Remember, we have a style on it that has a width set to 100%. So this definitely is stretched to at least 800 pixels, okay, which will make it a little bit fuzzy.

[00:01:19]
Again, that may come through on your computer, or it may not. It's a little bit bigger than the original size we designed it for. One of the things that we can do with pictures, especially banner pictures like this that need to switch their quality, is we can leverage HTML for that, believe it or not.

[00:01:39]
And it's very efficient. It will not impact the performance of your page. This is through something called the picture element. And the picture element is designed to swap between different pictures. It is smart enough to load the right picture into your webpage, depending on how wide your screen is.

[00:02:02]
So if you're not familiar with the picture element, this is gonna change your life, [LAUGH] okay? So let's set this up. So right after the banner here, let's put in our picture. And it starts with picture, exactly as you'd expect. And it ends with /picture. So this is the responsive way to deal with images here inside of HTML.

[00:02:28]
And then with this picture, we can add, I'm actually just gonna copy my image tag here. Just copy that, and we can make changes to it. So it's not image, it will be source, is the name of your element, source. And it's not src for the attribute, it's srcset, Okay?

[00:02:57]
So we have a picture element around the whole thing. The first element is gonna be our source with a source set of, and this is gonna change to 1200 pixels, so 1200.jpg. So that's gonna load in the right version of the picture. See how that picture is a little bit less tall?

[00:03:18]
Pulls up the rest of the content there on the bottom, okay? And there is no alt text on a source item. That alt text is only on the image, which is part of the picture. So the image down there always comes last. It has the alt text on it, and it is the default.

[00:03:39]
So if your browser doesn't support picture, which at this point is pretty much none of them but if doesn't support picture or you're on a mobile device, that is kind of the one that's going to load, okay? On your source, we're gonna add a test. And that test is gonna be media is our attribute.

[00:03:59]
And to this we can add a media query, that kinda style. So min-width: 800px, just like that. So at 800px and higher, we'll load in the 1200px version of this image. And when it's smaller, we'll go to the other version of the picture. See how that happens? We maintain our quality and these are slightly different, so the headspace here on this picture is lower than we have on the original version of the picture.

[00:04:36]
See that? Cool? So we did a min-width that matched our media query, right? So we have a min-width 800px media query. We have a min-width 800px picture. Don't have to. We could have different versions of this picture, right? We could load it in at all different points for media.

[00:05:03]
You can also do other tests here as well, once again. Makes sense? So if you're on portrait, load something. If you're on tablet, load something else. That kinda thing.
>> Where do you add those additional media-
>> That would be part of this media query here, yep. How fun is that?

[00:05:25]
>> So would you keep adding sources then?
>> You could, you could have as many sources as you want. So, just for illustration sake, whoops. Here I go. I've got, whoops, [LAUGH]. I-
>> You copied an opening tag.
>> I did. Here we go. Let me try again.

[00:05:53]
Here we go. Now I've got four different sources. And I could write all kinds of different media queries. I can have different source images for that. I could be loading, for example, we have a whole bunch of new image formats, right? We have WebP image formats. And we have AVIF and stuff.

[00:06:10]
If I wanna load one of those in but I'm not sure that we have enough browsers that are supporting it yet, I can do that kind of thing here with my source images. Make sense?
>> So you have one source tag per query that you want?
>> Yeah, in theory something is going to change.

[00:06:27]
Yeah, and the browser's gonna iterate through those, and the first match that it finds will load. So in this case, if we're at 700 and, whatever, here I am. I'm at 642 pixels. So the browser goes to my first source here, and it says min-width: 800px. And it goes, not that one, and then it'll jump to the next one, where it's still not 800px, and it's still not 800px, and it's still not 800px.

[00:06:55]
So then it gets to the image tag, make sense? Okay, we don't need all those. That is something that I hope you all take home and put to work immediately. Very handy thing to know.
>> Why did it crop the top of the picture?
>> That's what the graphic designer did.

[00:07:14]
>> Okay. That's the picture itself.
>> Yeah, the graphic designer has the eye to figure out what should be shown and what shouldn't and where the focus, sort of that quote art direction. There are other ways of loading images if you're just looking for the smallest image, based on whatever is going on with your web browser and your Internet connections and stuff.

[00:07:39]
There's a whole bunch of these, and I cover that. I think I covered that in my Flexbox and grid course. And if you wanna watch that chapter, there's a whole bunch of ways of dealing with pictures, yeah, but this way is art direction.