(upbeat music)
- [Narrator] Even a fully optimized image can slow down
the performance of your site,
if it's delivered to the wrong browser
at the wrong time.
This is the problem, responsive images markup
is meant to solve.
Here's a quick intro to responsive images.
Using a standard image element,
the same image file is delivered to all browsers
regardless of how big the displayed image is.
That means if you want to deliver a full bleed
1,920 pixel wide image to full width desktop browsers,
that same 1,920 pixel wide image will also be delivered
to a 320 pixel wide feature phone,
which is not great for performance on that phone.
To solve this issue,
we have two responsive images attributes.
Srcset and sizes.
Srcset allows you to provide a literal set
or list of image sources for the browser to choose from.
So in addition to providing the default source attribute
you also provide a srcset attribute,
holding a list of different sized image files.
For each of these files, you'll annotate them
with the URI to the location of the image file
and then a W value indicating the total pixel width
of each of these images.
So in this case, I have four different images.
The first one is 320 pixel wide.
The second one is 600 pixel wide.
The third one is 1200 pixel wide.
And the fourth one is 1,920 pixel wide.
Now when the browser finds the image element
it checks its own viewport width
and finds the image with the width
that is the closest matched upwards.
So in our example, if the viewport
of the browser is 800 pixels wide
the browser will pick the 1200 pixel wide image
because it is the closest size upwards.
600 is too small for the browser
but 1200 is the closest to 800 you can find right now.
And it gets even more interesting.
If you then choose to scale up the viewport
by just scaling up the browser window
the browser will automatically pull down larger versions
of the image to fill in the space if it's necessary.
So that means if you are opening the browser
in a small window and then scale the browser up,
you could actually end up downloading
several different versions of the image
but this is not normal user behavior.
It just shows you that this is a dynamic loading capability
that the browser now has built in.
But the important thing now is,
by carefully planning your image sizes
you can now deliver appropriately sized image files
to all browsers and old devices.
So a 320 pixel wide feature phone
gets a 320 pixel wide image,
while a 30 inch 4K desktop monitor
gets a 1,920 pixel wide image all with the same markup.
There's one problem though, srcset alone
always conforms to the full width of the viewport.
But for most of your images, the actual displayed width
of the image is determined using CSS and media queries.
And you rarely display all your images
as full width in the browser.
To address this, we have the sizes attribute.
Sizes holds a list of media queries
and corresponding widths to say,
for this image if the viewport is 1200 pixels or wider,
the actual width this image will be displayed at
will always be 1200 pixels.
The browser will then serve up the image closest
matching 1200 pixels.
The reason why I'm still providing the 1920 pixel image here
is to provide a higher resolution image
to higher resolution displays.
The 100 VW at the end of the size attribute says
for all other conditions, meaning screen widths
under 1200 pixels, the image is always full width
because this is a responsive layout.
This means you can use the sizes attribute
to define clearly the displayed size and image
at any width using regular CSS media queries.
This is especially important when you have a design
where an image has a max size smaller
than the viewport width,
which is almost every single image on the web.
Which brings up an important question.
How do we know what image sizes to target?
Figuring out what image sizes to provide has become
a very complex science and it can be a bit overwhelming.
You can even offload it to external services
that will figure it out for you.
So let me give you a good baseline to go with.
Because if you just used to use common sense
you can apply a pretty straightforward process.
First off, always provide an image
for the smallest possible width.
The smallest possible width for pretty much
any possible screen is 320 pixels.
So your smallest image should be 320 pixels wide.
Second, cap out your widest possible image at 1,920 pixels
and set the max width of all images to 1,920 pixels
so that the images don't scale beyond this intrinsic size.
Yes, that means very large monitors
won't get those beautiful, full bleed images,
but frankly very large monitors
shouldn't get full bleed images, because it looks weird
and takes up the entire available space.
Third, your design will almost always have
a standard max width for in content images.
So they stay in line with the rest of the layout.
Whatever this max width is,
create an image size to match it.
Because then your images will always fit
within the content width.
Number four, if your design has natural break points
that significantly change the display of images
make image sizes to match these break points.
And finally, all in all, you should end up
with a round four or five image sizes.
This will cover almost any scenario
and anything more becomes unnecessarily complex
for very little benefit.
(upbeat music)