All language subtitles for 22 - Responsive images.en

- Sometimes, we want to display a big, beautiful,

high resolution image for people with big screens

and then, shrink it way down for people

on phones, on small screens.

CSS can do this.

One image file can be shown at any size.

But there's a problem.

A big, high resolution image contains millions of pixels.

And all that data can make the file size pretty big.

Which takes a lot of time to download

on a slow network connection

and can use up people's data plans

and in some markets, cost them a lot of money.

We don't want to deliver unneeded

high resolution data to small screens.

Instead, maybe we should just make

all of our images much, much smaller.

Physically smaller, less colored data, fewer pixels,

more compressed, that will work well for a smaller screen.

But then if we send that file to everybody,

people with big desktop monitors

won't get to see a large, glorious photo.

They'll get a low quality photo blown up really big.

Or our web designs are limited to keeping every image

physically really small.

So, what can we do?

Well, we can use the power of HTML

to deliver different image files to different size screens.

We can make several different files and list them

as a set of options in our HTML

and let the browser decide which image to download.

It can do so in coordination with the operating system

while taking the device hardware capabilities

and the network speed into account as well.

Let's first start with the basic code

for loading an image on the page.

I have an image element with a source attribute

that points to an image file with the alt text

and the width and the height.

Just like we talked about

when I first introduced the image element.

You can see here that I wrote 480,

in the big white text on the image itself.

So it's obvious which image has loaded when.

Now, this image is 480 pixels wide.

And it will look good when it's displayed at 480 pixels

or smaller on some devices.

More and more screen these days however, are not 1X screens.

The retina screens, high density, DPI, super retina,

ultra fancy billions of whatever the latest name is

for these amazing screens.

Basically, there are a bunch of screens out there

with a pixel density, is 2X, 3X, 4X

where more data can be displayed by the screen.

Right now, my older computer has a 1X screen.

My newer computer has a 2X screen.

I think my phone has a 3X screen

and I'm not really sure what the rest of my devices are.

I just know that I want photos to look good.

The simplest way to support these different screens

is to create multiple copies of our image

in different resolutions and then tell the browser

that those copies are available.

The device can then decide what it wants to do.

The browser will look at the screen density,

the network connection, the users settings

and decide which image to use.

Even if someone has a high resolution screen,

the browser might decide to download

a lower resolution image.

I've created four copies of this photo

at 480, and 960, 1440 and 1920 pixels wide.

Let me duplicate this basic HTML for displaying an image.

So we can change the second one and compare the results.

We're going to still write the code

for displaying the image in a normal way.

This is good for older browsers.

We need the source attribute

and we'll put our 1X version of the image here.

We need the alt text just like before

and the width and the height.

It will definitely still improve in performance, keep that.

It's OK that the pixel numbers won't always be accurate.

The aspect ratio is what's important here.

And 480 by 360 calculates to a four by three aspect ratio.

All of these photos are four by three.

Now, let's add a source set attribute.

Inside of it, we'll list the images

that we are offering the browser as choices.

It's a comma separated list.

With a URL to a file, a space, the resolution,

like 2X, 3X, 4X, 1.5X, whatever,

a comma, and the next one.

Now, the browser will swap out

one version of this image for another

based on what it thinks is best.

This is a great solution for providing different size images

to handle retina and high DPI screens.

But what about handling different size images

based on the layout?

Based on the width of the page?

Let's look at that next.