Picture Element

[00:00:00]
>> Finally, there is a website, I'm gonna do a demo for this, which is responsive breakpoints.com. And this is going to help us generate a lot of the code that we need, okay? So I'm wanna start with working with my picture element. So here I have, there's our Jupiter moons again, we love them so.

[00:00:22]
So here they are, stretched all the way across the screen. Here I have them as a four-up and here I've got them turned long ways and here I have them tinty-tiny, okay? So I have four images and I have put them here in the HTML so that you can see what they are, there's my four images, okay.

[00:00:43]
So I'm gonna rewrite this for you using the picture element. So we gonna have one of these images display depending on the size of our screen. So how we would go about setting this up, we gonna start by putting the picture element first and the slash picture element at the end, okay?

[00:01:08]
Easy start. This is all gonna be the picture element. The next thing you have to do is decide which one of these is going to be your small picture. I'm gonna say it's this one here, okay? And that is corresponding with this one here, I think, this is default.jpg, then moon's default jpg.

[00:01:34]
All right, so this one we're gonna leave alone the code for this we gonna leave alone just like it is. This is gonna be the alt texts that's gonna serve for all of the other images. And there's nothing we need to change with this image at all, so it's all set and ready to go.

[00:01:51]
Okay, as for the other items here, the other three images, these are no longer going to be images, they are going to be source, okay? So this is source and source set this the attribute that pulls in the picture, okay? No more alt text. And here I'm gonna put my largest image.

[00:02:21]
So min-width 1200 pixels, okay? Notice that it suddenly disappeared. Everybody see that? It's gone, all right? Or maybe it's the only one showing. Weirdness has happened, okay? We haven't finished coding this thing, so who knows what's going on. Okay, for our second one, we're gonna do exactly the same thing.

[00:02:52]
We gonna change our image to source, source to source set. No, u text, and I made an error there, that's part of the reason why that didn't work. This would be media equals, quote, min-width 1,200 pixels, that's why weirdness happened, there we go. Yes.
>> Is it safe to assume media is literally a media query?

[00:03:24]
>> It is a media query. Yeah, so any kind of media query would work. And so here for this one, let's say that our media query is 900 pixels, okay? So you can see that we have some weirdness here, but it is in fact working, look at that, uh-uh, cool.

[00:03:47]
The picture changes depending on the size of the screen. All right, and then the last one here on line four, we need to change this one as well. So this will be source, source set. And no alt text, and my media query will be for 600 pixels. Now I'm down to one image.

[00:04:14]
Phew, that is what we want, right? So right now my screen size is 459 pixels, so I'm gonna make it bigger when I get to 600 pixels, see I get now, now I get one image. This one, okay? And you can argue with my art direction choices here, by the way.

[00:04:35]
You can say that was a terrible choice, Jen, and that would be fine, but it's my. Okay, so as we make this bigger There we go, now we go to my larger image. So there it is my big version of the four moons all in the four up here.

[00:04:55]
And then when I make the screen really big, there they all are side-by-side. How cool is that?
>> It's very cool.
>> Totally awesome, all right? So keep this in mind the next time you are coding your next website and you have that giant banner image across the top of the page, as is required by law in all websites now.

[00:05:19]
This is how you might handle making this giant banner picture resize, depending on the size of your web browser. So, that is how the picture element works. The next thing I wanna look at is the responsive breakpoints.com demo. So I am going to open up responsive image break points, and I am going to download a picture for that.

[00:05:51]
Now I can't download this picture. Okay, save image as, put this on my desktop. Okay, so now what I'm going to do is I'm gonna go to the responsive image breakpoints generator. And what this is going to do is it's gonna give us the code for sources or source set and sizes.

[00:06:13]
It'll actually write this code for us and make all of the images. It is a beautiful thing. So you could do this manually if you want, inside of photoshop and similar programs, or you can use a tool like this to do it for you. And I would not be surprised, our backend friends, if there isn't a backend tool that would do this for you.

[00:06:32]
Where a user could upload an image and this would spit out some number of background images with the appropriated HTML. Sounds reasonable, doesn't it? It sounds reasonable, I'm sure somebody has written it. I have no idea exactly what it would be. Okay, so I'm gonna first of all upload my image, and I am going to take this from my desktop.

[00:06:55]
And I'm gonna work with that same big image we were just working with there it is. And we can set up then, before scroll down, we can set up the resolution. So this is going from 200 to 1,400 pixels wide. So we could say well I have a max width on my site set to 1200 wanna go smaller than that and you can't really see this picture until it's 300 pixels so let's say it's from 300 to 1200.

[00:07:28]
The size step is happening here every 20k so we could increase that let's say we want it to happen every 30k and then we can have the maximum number of images because this can get ridiculous very quickly, so I'm going to say [COUGH] give me no more than three images.

[00:07:45]
I think that's fine. And then I'm gonna say regenerate. And then down here at the bottom, down here at the bottom you'll see we have our large image, our medium image, and our small image. And it's given us the source set and sizes is all set here, okay?

[00:08:04]
So it's all written for us. So remember this is saying for a max width of 1200 pixels, display our image at 100 viewport widths or 1200 pixels. So basically that's kind of the same thing. You may wanna modify this, right? So we may wanna say 33 viewport widths as we had in the previous example.

[00:08:27]
So may be something to modify there. But otherwise, this is, here's the four images or three images that it generated for us of the different dimensions at 300, 800 and 33 and 1200 pixels and we have our default image as well. You don't need to write your alt text, make sense?

[00:08:48]
Interestingly, it's also given this to you as a picture, in a picture format, which is weird cuz it's a picture format but it's got sizes and source set in it, which means the browser is actually making the decision. So, I don't know what the purpose of that is, but there you go.