From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

What are responsive images?

What are responsive images? - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

What are responsive images?

“

- If you go look at the source code for a webpage that has a lot of images on it, there's a good chance you'll notice that the image elements look something like this, where you have your regular image element attribute's source which points at the original source, and then you have an alt attribute that describes the image if you don't see an image or if you're using a text-to-speech browser. And then you have these new ones; source set, which is a long list of other image names, and then you have sizes which is this weird mix of media queries and some widths. This looks far more complicated than what we used to do, which was just those two first lines here. What's going on? This is what's known as responsive images. It's a spec that's been around on the web for quite a while now. It is a spec that is extremely important, very powerful, and a little bit hard to understand because of the naming conventions and so on. Let me try to explain what's actually happening here and what these…

Contents