All language subtitles for 24 - Responsive pictures.en

- In the last two videos, I showed you the source set

in sizes attribute for the image element

and how they could be used to provide multiple image files

to the browser and let it decide

which one to load and display.

In all of those examples, the image itself,

the photo of a dog was the same photograph.

It'd been saved as many different copies with more pixels

or fewer pixels, but the content in the photo was the same

the whole entire time.

The way it was cropped, its aspect ratio.

But what if we want to do more than swap out

a low-res file for a high-res file?

What if we want to use a different image on a small screen

versus a big screen?

Maybe we want the image to be tall and narrow on mobile

where it's short and wide on desktop.

Or even use a completely different photo altogether.

Let's look at another example.

How about for this photo, on big screens,

will show some of the field and her whole body,

but on small screens, will crop in and focus on her face?

The image element alone, even with the source set

or sizes attributes, can't do this.

For this, we use the picture element.

We'll start with the good old image element as always

with the alt text and a URL to a file that will be used

by any browser that doesn't understand the picture element.

Like Internet Explorer 11.

Even if you don't care about old browsers,

you still have to have an image element.

If you leave it out, none of this is going to work.

Then, let's wrap this image element with a picture element.

Now that we have a wrapper for the whole thing,

we can list alternative options through the sources element.

I want to provide two options,

so I'll create two source elements.

First, let's point to an image file

with the source set attribute on the sources element.

Here, we'll pick our mobile image

at the cropped version of the photo at 320 pixels wide.

Now, let's put a kind of media query

in the other source element and point that

to an image that we want to use on bigger screens.

When the viewport is a minimum of 600,

600 hundred pixels wide or bigger,

the landscape version of this photo loads.

When the viewport is smaller than 600 pixels,

the cropped version loads.

It's pretty fantastic.

Now you notice, we're using source set

on the sources element.

It works exactly the same way it does on the image element.

Which means we can take everything that we learned

from the last two videos and apply it here.

In this demo, I combined multiple techniques

using picture, source, source set

and providing multiple file options in each source set

telling the browser how wide each file is.

The browser swaps from one file to another

only using the bigger files when they're needed.

It's taking both the viewport size

and the retina screen into account.

Then when the viewport becomes 600 pixels wide,

it switches from the cropped version to the wide version.

Of course, because I keep changing the viewport

as I'm showing you this demo, this browser is downloading

all of these different files.

And that's not the point of this HTML.

Normally, a person is looking at a web page

through one screen.

Their viewport is staying one size

and they just get the one image file.

The one that's best for them.

None of the rest of the files are downloaded.

Which is the whole point to save on downloads.

HTML gives us a powerful set of options

for optimizing images on the web.

So we can send the smallest file possible

while still publishing gorgeous images

that are sometimes displayed quite large.

Now, you might be thinking,

wow that's a lot of files to create.

There's a lot of math involved

in figuring out all these numbers.

Yeah.

On most sites though, the work needed to publish each image

in this way is automated.

A person who adds content to the site

just uploads one large image.

And then magical robots on the server do all the work

of creating the image files and writing out all the code.

Those magical robots do need to be told what to do of course

and perhaps, that will be your job,

to figure out how this should work for your team's website.

And then, you set it up for everyone else.

It's definitely worth doing.

The image files for this demo range in size

from 27k to 593k.

That's half a megabyte difference per photo.

If we created a web page that has six photos on it,

and save our users 500k per photo,

that's three megabytes of data we've saved.

Definitely worth doing.

If you want to learn more about how to use this HTML,

there's another course on responsive images

that goes even deeper into the details.