Preview
Video Player
00:00
00:00
Delivering Responsive Images
3:41In this course, we're going to talk about two HTML attributes and an HTML element. The attributes are called srcset and sizes, and the element is the picture element. These pieces of markup allow us to deliver the right image to the right device, based on resolution, pixel density, and other factors.
[SOUND]
0:00
[MUSIC]
0:00
[SOUND] Web-browsing devices come in all
sizes, resolutions, and pixel densities.
0:04
Most of them can be in either landscape or
portrait orientation.
0:09
And we can use media queries to adjust the
layout of our webpages,
0:14
but what about images?
0:18
The image element with the source, or SRC
attribute,
0:21
is great if we just want to deliver one
image to every device and,
0:26
in fact, that's still a valid technique in
many cases.
0:30
The problems is that sometimes we need to
deliver different
0:34
images to different devices.
0:38
Say that we have an image that should take
up a lot of space on the screen,
0:40
such as a photo background and we also
need to deliver it at two x resolution for
0:45
high DPI screens, like Apple's retina
displays and most modern phones.
0:51
However if we send this single image to a
mobile device that's only at one
0:56
x resolution and has a small screen that
won't show most of the background anyway,
1:02
it will just make the page load slower for
no added benefit.
1:07
Put another way, the most basic approach
for delivering responsive images
1:12
is to just send one big image to all
devices and hope for the best.
1:17
As you may have guessed, we can do much
better than that.
1:22
In this course we're going to talk about
two HTML attributes and an HTML element.
1:26
The attributes are called, source set and
sizes, and
1:32
the element, is the picture element.
1:36
These pieces of markup,
1:39
allow us to deliver the right image to the
right device based on resolution,
1:40
pixels density, and other factors but
before we get in to those,
1:45
I want to clear up two aspects of this,
that confuse a lot of people.
1:49
First, why are we talking about using
elements and
1:54
attributes when we could just use CSS
background images?
1:57
After all, if we combine a mobile first
approach of media queries
2:01
with CSS backgrounds, devices will only
download the images that they need.
2:05
Much of the time, this is actually a
perfectly valid solution however,
2:10
we can't do this for every image on a
page.
2:14
Sometimes that's for technical reasons
whether it's for
2:17
CSS layout restrictions, or because a
backend server that generates HTML
2:21
needs to put images in the HTML and not in
the CSS.
2:26
[SOUND] A better reason is that many
images are content.
2:30
Including these images is good for SEO,
accessibility, RSS Feeds, and basically
2:36
any other mechanism that benefits from
parsing a webpage into another format.
2:41
As a general rule, images that are content
should go in the HTML, and
2:47
images that are purely for presentation,
2:51
such as a repeating wallpaper background,
should go in the CSS.
2:54
Second, you might be wondering, why not
just use JavaScript to figure out which
2:59
image to deliver to the client browser?
3:04
In some instances this might be necessary
but generally we shouldn't
3:07
have to rely on JavaScript to do something
as simple as deliver an image file.
3:10
JavaScript is much more error prone than
HTML and CSS and again,
3:16
if we deliver content using JavaScript
instead of HTML, there are many instances
3:20
where content [UNKNOWN] might not be able
to grab all the content as we intend.
3:26
If this doesn't really make sense so far
don't worry.
3:32
As we start to use these bits of mark up,
we'll see why they're so powerful.
3:35