PETE LEPAGE: Hi.
I'm Pete, a developer advocate at Google.
Images play an integral part of almost every web page
and often account for the most number of downloaded bytes.
I'm going to show you a few techniques that you
can use today to serve the right image to the right device
on your pages without too much extra work.
First, let's take a look at background images
served via CSS.
One technique that you can easily use today
is to combine the background property
with media queries for conditional image loading,
based on screen resolution, viewport size, and more.
On the previous example, when the browser width
was less than 500 pixels, it only
used the image of the phone.
But when the window was more than 500 pixels,
the media query kicked in, adding an image of New York
City to the background.
And instead of showing the image of a phone,
it showed the image of a tablet.
Media queries can also apply styles
based on device pixel ratio, making
it possible to display different images for 1x and 2x displays.
Chrome, Firefox and Opera all support the standard min
resolution 2dppx syntax.
Say that 10 times fast.
While Safari and Android browser both require the older vendor
prefix syntax without the dppx unit.
Remember, these styles are only loaded
when the device matches the media query.
So you always need to provide a fallback.
This ensures that an image is always loaded.
Recently Chrome and Safari both landed the new CSS image-set
function, making it easy to provide multiple image files.
This allows the browser to choose the best image depending
on device characteristics, for example,
a 2x image for a 2x display or a 1x image for a 1x display.
The syntax is fairly straightforward--
a comma-separated list of image declarations
which consists of a URL string followed
by an image resolution.
Support for the image-set function
is still new, and for the time being,
requires the WebKit vendor prefix.
In addition to loading the correct image,
the browser will scale it accordingly.
The browser assumes that 2x images are twice
as large as 1x images, and will scale the 2x image so that it
appears the right size on screen.
Now, for images and markup, there aren't as many options
yet.
The picture element is coming, but hasn't landed.
In Safari and Chrome, you can use the new srcset attribute.
The srcset attribute enhances the behavior
of the image element, making it easy to provide multiple image
files for different device characteristics.
The syntax resource set is almost identical
to the CSS image-set function, taking a comma separated list
of image declarations, which consists
of a URL string followed by the image resolution.
Because srcset simply adds a new attribute to the image element,
if a browser doesn't know how to support srcset,
it simply ignores it and uses the source attribute.
That also makes it easy to build a polyfill,
and there are plenty available.
In some cases, images can be replaced
with CSS or other browser capabilities.
Rounded corners, gradients, text shadows, box shadows,
even reflections can all be done with CSS
without the need to download an image.
And when someone finally does ship a 16, or 20, or 30,
or whatever new display, you won't
need to create another new image file.
Adding responsive images to your site is easy.
For background images, I've shown you
how you can use media queries or the recently
landed image-set function.
For images and markup, picture is coming soon.
But today you can use the srcset attribute.
And there are more capabilities coming soon.
To learn more about responsive images,
check out the images section on the Web Fundamentals site
or just click on that link on screen.
Yeah.
That one right there.
Perfect.
Thanks for watching.
Go build something awesome.