Responsive Images Best Practices

[00:00:00]
>> So we had came up with a prime directive I would say that only one image should load even if many are specified. So this is the big problem back in the earlier days of responsive images where we used to line up a hole bunch of image tags and we'd set some display properties.

[00:00:16]
All of those images would typically load and we display one of them so we actually made situations worse for ourselves. So whatever solution you have, however many images you may choose from to display on the webpage, we only want one of them to load. So that is the thing to always keep in mind.

[00:00:35]
As you look at responsive design solutions. So here's an example of the bad code that I was talking about here just a moment ago we used to do this in Bootstrap back in some of the early versions. We would have a div inside of it we'd have two images we'd give them classes and then we'd use display none to turn on and off those images.

[00:00:56]
Even if they're set to display none both of these images are going to load you've actually made your web page load more slowly. Then you would have if you just stuck with one image and just reframed it. So this don't do this bad code okay, other code you can use cautiously so you have seen me use all the way up to this point in the course and going forward you have seen me do this.

[00:01:22]
We have an image on the page, we set the width to 100% and you can throw a max width on top of that too if you don't want it to get bigger than a certain point. That's optional but what this will do is give your image flexibility within the space.

[00:01:37]
Okay, the problem here is that you have one image that loads regardless of what device you're using regardless of the speed of the connection. And that is going to cause potentially a very large image to download to a mobile phone device for example. And so this works if you're working with small images that are already small and file size in other words you don't have to use responsive image code for every image that ever was on your webpage.

[00:02:05]
It takes a lot of time and effort to put the stuff together. And quite frankly sometimes it's just not needed if they're small images and they're reasonable file size. And you're getting good performance out of your webpage don't take the time to do responsive image, this may be the right solution for you.

[00:02:23]
So let's talk about those two different possible approaches that you have the first one is the picture tag. And so this one lets you the webpage author decide which image displays under which conditions and this is the one that I talked about on the previous version of this course.

[00:02:41]
So let's say that you have this lovely picture of the hot air balloons again. So what you might do is art direction you have various pieces of this that you might wanna display under different conditions. Just taking this giant image and scaling down to something small for a small device results in this as you see here, and you lose a lot of detail out of that image.

[00:03:06]
So a better approach is to do the art direction which means let's crop it and pick out the important parts of the picture. Maybe it's this these two balloons that are here together. Or maybe you actually want to put the focus somewhere else about the flattened balloon that's there on the ground.

[00:03:21]
You might not have even noticed that was there. So using this technique of art direction, you're going to go to photoshop or whatever tool you're using for cropping images. And you'll create those alternative versions of the imager self outside of your code. Then you're going to drop that into your HTML and it's going to look like this you have a picture element that goes all the way around it.

[00:03:45]
And then you're going to make use of the source element. If you're familiar with the audio and video elements, the source element is familiar to you. You can have as many of these source elements as you want. They stack one on top of the other, and they contain a source for the image, and they contain a media query and the media query says.

[00:04:06]
Under whatever conditions you want that you'd like this particular image to load, the media query is optional. You could use this in other ways. I'll show you in just a moment. But that is the typical way that the picture element is used. And then you can provide an alternative image.

[00:04:24]
In this case, this is the smaller version of the image. That will load, either when the picture element is not supported. So you're on an old version of MIE or, when you have this, this is the default image. So none of the media queries are satisfied. So this other image loads and this particular code if your screen was less than 850 pixels, you'd get the smaller image.

[00:04:53]
You can also do this with different kinds of media query. So here I've said, load this first one if the orientation is landscape. So let me say a little bit about media query with an orientation of landscape. Landscape and portrait just like you've used in print for years.

[00:05:10]
Landscape is wider then tall, portraits the other way around taller than wide. When you are talking about this, you are not talking about your phone, in portrait or landscape that is not what we are referring to. We are actually referring to dimensions here so if the window of the browser window the window of the device is wider than it is tall it is considered landscape.

[00:05:39]
If it is taller than wide then that's considered portrait so it's doesn't have anything to do with the orientation of the device. So, in this case if it is wider than it is tall we're gonna get the larger version of the picture or maybe we'll get the skinnier version art direction picture here that shows a very different kind of view of this image You can also use this type of element if you want to make use of web P images for example those are supposed to be very good for images optimization.

[00:06:16]
They're brand new format that are coming out from Google. They're supposed to be really good for compression and communicating more information and less disk size. So you really want to make use of your web P images for performance reasons. But you want to provide a PNG in case the browser doesn't support Web PNG, Web P excuse me.

[00:06:34]
So here we've got two versions we've got the the web P version we have a different version that's a PNG and then we have a fallback that might be something smaller it's just a regular old jpg. But there's a lot of things that pictures forget about responsive elements along the way.

[00:06:55]
So it forgets to tell the browser things like how big is the image location that hole in the page layout. Remember that the browser is going to load from the top of the page going on down, when it hits that image. If it doesn't know how big of a space to leave for it, it's going to wait until it downloads the picture before it starts downloading the rest of the webpage.

[00:07:17]
So if we tell it how big that hole should be, then the browser knows to save that much space and it will continue to download it feel faster. How big are the images or the peg that fits into that hole? How big are those images that might be displayed?

[00:07:34]
So we have the size the image the size of the hole and what is the pixel density of the screen these are things that the browser doesn't know as it's waiting for these pictures to download. So you could compensate for that you could write this piece of code with all of these different media queries with min-width and max-width and device-pixel-ratios and all the rest of it.

[00:07:58]
I don't have time for this. I don't know about you, but I have better things to do than to write this kind of HTML. So that is a possibility. [LAUGH] you could do this. I think you'd be a little bit crazy. So this is where source set and sizes come in.

[00:08:13]
But potentially the downside to this is that the browser is going to decide which image is going to display. So with picture you have total control but then you might wind up writing some crazy HTML in order to get the right image displaying at the right place. Here you're gonna write much less HTML but you leave it to the browser to decide.

[00:08:35]
So as Eric Portis describes in his article here I've cited it here. I encourage you to go and read this he does a great job explaining this stuff. He says, what the author knows those as they write the web page and what the browser knows as it's loading the web page and if you notice they are sort of staggered in terms of their yes and no.

[00:08:54]
In terms of viewpoint dimensions and screen density, it's source files and so forth. They stagger on down here. So what source set and sizes do they work together to tell the browser everything it needs to know to make its best decision as to which image it should load okay.

[00:09:12]
So it's gonna tell all of that but remember, once again, I'm going to say this like 1000 times, the browser gets to decide, and it may not decide what you think is best. So if you're a control freak, the picture element is totally for you. But if you're willing to give it up to write less code, then source set and sizes may be a better way to go.

[00:09:35]
All right, so as I said, one more time. The browser decides which image is going to load and it may not load the image that you expect. Also different browsers may make different choices. That's the crazy part. So what Firefox decides to do may be different than what Chrome decides to do.

[00:09:53]
>> Can I somehow foot picture when the same image is used in like a variable instead of repeating the entire path over and over and over again.
>> Well, this is HTML, not CSS, so I don't think you can do. I mean, maybe you could do something with JavaScript, but not in straight HTML.

[00:10:15]
In fact, for that matter where's the stuff gonna come from, most likely you're not gonna write it in straight HTML, it's going to come off the server or you're probably gonna do something with JavaScript anyway. But I'm talking straight HTML here today. All right, so this was what the source set and sizes code winds up looking like.

[00:10:34]
It's like this, so let's walk through what this code is line by line. So first of all the image tag and love so you have your image source and you have your alt text always. So that's going to be the same regardless of what image loads. So this is why you're going to use the same image and let the browser choose so there's no art direction here.

[00:11:00]
There's no different images that might require different alt texts all the same alt text. Okay, this part in the middle or the filenames and the next to it is something like 1024w that is the width in pixels of that particular image. So here we've got three possible options small JPEG is the default with the source set we have a 1024 and 640 and 320 pixels.

[00:11:27]
So it's kind of like in the old days when you used to put in the width and your image tag you said width of 1024 that was 1024 pixels. And then sizes is the hole in the webpage. So what this bit of code here says is if the minimum width is at least 36ems, then display the image at 33.3vw otherwise display the image at 100vw that's what that line of code means, okay.

[00:11:58]
So that's the way you would set up a code for source set and sizes. And you use them together. You might think, this is a great way to deal with retina images as well or other pixel-dense images as Eric Portis points out in his article here this one's at a list apart.

[00:12:17]
It's a nice compact way to supply hi-DPI imagery. But, it only works for fixed width images so if your image is going to change dimensions. Or if it's going to flex using that width of 100% or something this type of code is not going to work for that.

[00:12:35]
But it is another possible syntax and you can combine these which is probably the next question somebody had. So you have the picture tag inside of it you can have your individual state source elements and then each of those can have source sets and sizes associated with them.

[00:12:54]
So this is an example of how that code might look if you wanted to combine these things. All right, notice here that in the source media, this particular example that I got was from of using the aspect ratio in the media query. So in other words, if it's a 16 by 9 screen, we're going to load one set of images but if it's a 1 by 1 or square type of screen we're gonna load different types of images.

[00:13:23]
Okay? So what should you use? Here's the big summary. So if you're on a picture tag, the image is optimized for content reasons rather than technical reasons. So the content of that image is far more important than the technical considerations of speed of download. And then of course for source and source set, it's the other way around there we're going to have the technical reasons for downloading a particular image Trump whatever is in the image.

[00:13:56]
For the picture, the author is going to choose the best image. The browser is going to choose it under source and source set. And the images may be varied in different composition and dimension on the picture tag. But they should probably all be the same on source and source set.

[00:14:14]
That's the wrong source set and sizes. And because that's because the browser is going to choose which image is going to be used on the page, you probably don't want to have a variation of the composition of the picture. So finally, let me also just mention here real quick as we go forward.

[00:14:33]
Background images can also be responsive what you wanna do in order to make your background images be sure that only one of them loads is that you wanna contain your background images in a media query. In other words you're never gonna have as we have done many times now to this point.

[00:14:50]
We have some styles that are outside of the media query that tend to be mobile in nature. You're never ever gonna put background images out in that particular part of your stylesheet. The background images are always gonna be inside of some kind of media query, so that only one image will load under those conditions.

[00:15:10]
Remember, we're the only crazy people that do this stuff with our browser windows. And cause lots of images to download. Most people just open their browser window and read web pages. And so only one background image should download under those conditions. Okay, that's all those points. On, so here's an example of that we have a media query with a max width of 700, it's going to download this.

[00:15:34]
But if it has a minimum width of 701 will download a different image that's what that code would wind up looking like.