Responsive Images Overview

[00:00:00]
>> So at this point, we've done extensive discussions about laying out web pages, media queries, grid based layouts. We've neglected the third component of responsive design, which are responsive images. So I wanted to be sure to give you an overview of responsive images and what is available to us today in the HTML specific that might be helpful for your next project.

[00:00:23]
So let us start with, in the old days when things were easy. In the old days, all we had to do was take an image, we'd throw it up on the screen, and we'd say something like our image source and an alt text for that. Isn't that great?

[00:00:39]
It was a beautiful world with unicorns and rainbows. Unfortunately, that day is no longer with us. Now we have a lot of things that we have to think about with responsive images. These are images that are gonna change across devices. So first of all, content choices. Some pictures look great when they're big, but when they go tiny, you're like, what am I looking at?

[00:01:01]
So that is something to think about. We have so many formats for images these days. You have to think about what are the appropriate formats for those particular images. You may have to think about pixel density. Remember that we have retina devices, non-retina devices. So what are the density of the pixels?

[00:01:19]
We have to think about the image display dimensions and we have to think about who is going to choose the image that will display. Are you the webpage author going to choose or are we gonna let the browser make the choice? So those are all the big questions.

[00:01:35]
In fact, this has gotten so complicated, there is a whole book on this. This is Image Optimization by Addy Osmani from Google, and it's a good sized book with a lot of stuff in it. So if you're really into it, I recommend you go get the book. So, just briefly about how responsive images have come to be, wasn't even a thing we never thought about it prior to about 2010 when Ethan Marcotte defined responsive images as part of his article on Defining Responsive Design.

[00:02:10]
Between 2010 and 2014, it was just an unmitigated disaster. We had no HTML specification for dealing with responsive images. We had back end solutions, with tests and back end images being served up. We had weird JavaScript solutions. We had all kinds of craziness going on. Finally, we got our standards defined.

[00:02:31]
Around 2014 or 2015, 2016, the picture elements started to be supported and by 2017 we got source set and sizes which. Which are attributes that go with the image element. So we're gonna talk about picture and source set and sizes coming up here. As always, the prime directive always the prime directive only one image should load even if many are specified.

[00:02:56]
So it is possible that you may have two or three or four or five different images that might load depending on certain conditions, but we only want one of those images loading into the browser. We don't wanna make the situation worse by loading five images into the browser and then only displaying one of them.

[00:03:15]
That adds a lot of weight to your webpages, right? Okay, so here's some bad code for you. And if you take a look at this over here on the side, we have a div with a class of fake-responsive. We have two images here, tiny and big. And then we're going to use CSS and media queries to display one of those images.

[00:03:39]
This is really bad. Okay, and the reason this is really bad, because why? Anyone wanna take a guess, yes.
>> Marquee.
>> [LAUGH]
>> The Marquee is a great start. What else would be another, yes.
>> Maybe the naming conventions?
>> Not necessarily naming conventions.
>> It loads both images.

[00:04:01]
>> It loads both images and then only displays one. And remember, we are the only crazy people who do this with webpages. Normal people do not do this, right? So this is not really the way to do this. Cautiously, you could do something like this where you have big kind of image and then we're going to set a max width on that big image, a big image, meaning let's download it off my mobile phone and it's this big.

[00:04:29]
We're gonna display it this big on the page. What is the downside of doing that, yes.
>> Mobile phones have tiny connections.
>> Well, yes, they have tiny connections, not a lot of data going through. So what happens here is, how many megabytes is this picture?
>> 3.

[00:04:47]
>> 3, 6, 9 megabytes, right? And we're displaying it this big. What is the file size here?
>> Kilobytes.
>> It's the same file size.
>> Right.
>> When we scale it this way, it is the same file size, right? Unless you take it out and you run it through Photoshop and you reduce the size of the image, you have the same bytes no matter what dimensions you display, right?

[00:05:09]
Okay, so that is not necessarily the best way to go about it. You would be right to point out that we have done it throughout this course [LAUGH]. That we have had our images all set to max width and they have scaled also nicely on the page. We are not very concerned with performance of all of our various code pens, right?

[00:05:29]
So it depends on the situation. This can be useful if you are working with smaller images, maybe they were only whatever, 40, 50k to start with. We don't really need to worry about swapping out responsive images. But if you are using a great big, huge, beautiful banner across the top of the page on your desktop site and you are reducing its size on the mobile site, this is a great time to start thinking about responsive images.

[00:05:54]
Okay, so the first one is the picture element. And this is you, the web page author are in control of which image displays at which time. So let's consider we have here our beautiful balloon picture, so pretty. Now we could turn this into multiple kinds of images. Obviously, we could take that big beautiful picture and we could just simply reduce its size inside of Photoshop.

[00:06:20]
So there it is small or we could just crop it to one specific focus of this webpage. So here I'm focused on the balloons or at bottom image is you might not have even noticed that in the main image as you were looking at it, that tells a totally different story.

[00:06:41]
And then the other images that are here on this page. So through the magic of Photoshop and similar tools, you could just crop your images to different dimensions, different compositions. And then we'll put them into the web page. So here, this is the picture element in action. So let's talk about what's here on this page.

[00:07:03]
As you see, we start with picture and we end with /picture, it's HTML. The second line there is the image element itself. This is the default. So for whatever reason, the browser doesn't support the picture elements or whatever else. This is the image that will display, that bottom image.

[00:07:22]
The one on top of it is the one that says source. Source as the HTML element, src as the source of the image, and then you'll see we have a media attribute in which we put a media query. So guess when this image is going to display?
>> When you have more than 850 pixels of width,

[00:07:43]
>> if you have more than 850 pixels of width, you'll see the top image. Otherwise you're going to see the bottom image, make sense?
>> So this is in contrast to loading two images. This is only loading one depending on the media size.
>> Exactly.
>> So if you're loading on your phone or your desktop?

[00:08:04]
>> Exactly, so the browser knows how big your view port is and whatever device you're looking at. If you're over 850 pixels wide, the browser will request the big image. If you're less than that, the browser will request the little image. Okay, and guess what? You can have multiple source elements.

[00:08:23]
I've only showed you two here to keep this really simple. Guess how many source elements you can have? A ridiculous number. Okay, far more than you require. [LAUGH] Okay, all right, so there are other ways you could deal with this. You could say that rather than using a min width or max width style media query, you can actually do tests like orientation landscape.

[00:08:51]
So the orientation landscape test to see if the width is greater than the height of the web page. That is the test for landscape. And if that's If that's true, it'll load the appropriate image, okay? So that's another way you could do this. We haven't talked a lot about all the other kinds of media queries, but that's an alternative kind of media query, okay?

[00:09:16]
You can also use this kind of test for different types of images. So WebP at this point is fairly well supported but if for some reason you are supporting older browsers than most people, and WebP is not supported by those browsers, you can do a test here to say, basically, the first image will load if it's WebP.

[00:09:38]
And if your browser supports WebP. If the browser doesn't know what it is, it'll skip over that and it'll go to the landscape.png. And if it still doesn't know what that is, for whatever reason, it will go on to the fallback image at the end. So there's three different ways that you might wind up working with the picture element.