- 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 elements,
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 to responsive images attributes.
Source sets and sizes.
Source sets allows you to provide a literal sets
or list of image sources for the browser to choose from.
So in addition to providing the default source attribute,
you also provide a source set 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
on 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 all 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.
Source set 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 width to save.
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 of the 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 seismic 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 we'll figure it out for you.
So let me give you a good baseline to go with.
Because if you just use common sense
you can apply a pretty straightforward process.
First off, always provide an image
for the smallest possible width.
The smallest possible with
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 with 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 with 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 around four or five image sizes.
This will cover almost any scenario.
And anything more becomes unnecessarily complex
for very little benefit.