Responsive Images Overview

[00:00:00]
>> So the next thing I would like to talk about are responsive images. And specifically, we're gonna talk about the picture element, source set and sizes. And we're gonna talk about when to use each one. The actual code for these things is just an HTML and it is not all that difficult to write.

[00:00:17]
And it's not that difficult to understand, but choosing the right HTML element at the right moment in time. Is not necessarily all that straightforward or easy so I wanna talk a little bit about these types of responsive images and give you some background so that you can make more intelligent choices.

[00:00:36]
When it comes to responsive images inside of your web pages, so that's what this little PowerPoint deck is all about. So in the beginning, it was really easy. We just had an image tag and we would just put in one image and it would display on all the websites and everything was just fine.

[00:00:50]
It was a beautiful world to live in and we had rainbows and unicorns and ponies. But then within market had to ruin it. And we came up with this concept of responsive images, which makes us ask a whole bunch of different questions when it comes to what kind of image should be displaying on which device.

[00:01:11]
So first of all, you have many content choices. One of those might be the so called art direction. Lot of people when they write about responsive images they talk about art direction, but we never really have any idea what they're talking about. I'm gonna demonstrate for you what art direction is here in just a moment.

[00:01:29]
You might be thinking about the format of your image because there are so many, where's GIF JPG and PNG which we've had for years SVG is a relatively recent addition of course for illustration types of things. But now we're just about to come up with a whole new suite of image formats, AVIF, WebP.

[00:01:50]
And there's several others that are coming down the pipe. You may need to think about pixel density. So you have retina images, for example, on Apple devices or you have some other different type of pixel densities on other devices. So are you serving up the right image with the right pixel density to the right device?

[00:02:08]
What dimensions is the image going to display at? Sometimes we have images that are quite large that we display in a small space. Hopefully we don't go the other way around to the images look terrible. So we need to know what size will that image display on the webpage it'll actually affect your performance and how things load.

[00:02:27]
And then finally, who is going to choose what image you use at any particular point in time? Do you wanna make those choices as the webpage author? Or are you okay with letting the browser decide and we're gonna take a look at that in a little bit of detail as well.

[00:02:46]
So, a lot of these things are outlined in Addy Osmani's fabulous book image optimization which came out in April of 2021 from Smashing Magazine. It's a great book, it's 528 pages. So if you thought there wasn't that much to know about images, you're wrong. There's a ton to know about images.

[00:03:05]
It does have information about HTML, CSS, and all kinds of JavaScript and performance implications. So, what I'm gonna talk about here is a tiny, tiny subset of everything you need to know. I would encourage you to check out his book for more information. So the brief history of responsive images of this.

[00:03:23]
In May 2010, Ethan Marcotte defines what a responsive image is. And then from 2010 to 2014, it was just a disaster. We had a big disaster where responsive images were concerned. There were server side solutions for serving up different images under certain conditions. There were clients sign images driven by JavaScript.

[00:03:43]
There were paid solutions. There were free solutions. There was all kinds of different things. But that was the time when everybody was talking about it and seeing what a responsive image was. We ended to find some standards and then finally in 2016 the picture element was the first one that was supported by the big four web browsers Firefox Chrome edge and Safari all supported picture at that point in time.

[00:04:06]
And then at as I mentioned a little bit earlier in 2017, source set and sizes were released as part of edge, meaning that all of the major browsers supported those attributes as well. And so now here we are in 2021. We have different solutions available to us for responsive images that are all free, that are HTML driven.

[00:04:31]
That are very good and so it's a great place to be finally 11 years after the beginning of responsive design