Articles

Working with Responsive Images – PWA #03


[MUSIC PLAYING] SARAH CLARK: All
right, so welcome back. I hope that lab went OK. It should have been pretty easy. It should have been a review
for pretty much everybody. The only thing that would
have really been new to you was maybe Flexbox. But the first lab of the
day, I want to keep it easy, just so you can make sure
you get used to the labs. You can get to everything. It’s familiar. So they won’t be quite
as easy from here on out. We’re going to go into
some new territory. How many people have
used responsive images? Ah, that’s a nice number,
actually– about a third of the room. So again, for you,
this will be familiar, except that there are some
things that you may not have seen before. All right, I’m going to
move over to the middle here and click. So why are images important? Because if you look at the
average bytes per content type, per page– we have this little thing
called a Google search engine that looks at all your pages. So we can calculate, OK,
what’s the average HTML in those pages? How big is it? How big is the average image? We can figure that stuff out. So the average image weight of
a site is 1 and 1/2 megabytes. That’s average. Now, some sites are much
heavier– some are lighter. But compare that to 54K of HTML. So images take up a
disproportionate amount of the page weight of
the stuff on the wire. And so if you can get
this image size down, that would be a good thing. Now, some of the
ways you get it down is by using better
image compression, maybe a JPEG with lower settings, or
WebP, or any of the things you can use. But another way to do it
is to select the best image for your given screen size. If somebody has a small
phone in their pocket, you don’t need to give
them a desktop-size image. You could give them
the right thing. Or if they had a 1X display,
a lower resolution display, you could serve them a
low-resolution image that matches their display and save a
lot of bytes, because remember, the goal here is to
make web apps that are extremely useful on mobile. And remember that
you have networks that might not be that
fast when you get out of the major urban centers. And you’re paying per byte,
so you’re really trying to minimize your data budget. Yeah, we were
having a discussion at the break about fonts. And we’ll talk about a strategy
for caching those later. So responsive images–
long definition, but basically what it breaks
down to is helping the browser to pick the best image for
your current conditions– don’t need to read you the
whole big list of words. So what can we do with
responsive images? So you could serve different
images for different resolution screens. You could serve different images
for different display sizes. You could serve based on
different formats or art direction. Now, there’s a little demo
here of re-changing images as you resize the
screen, but I’ll show you a little demo
later that’s the same one. So first rule is, well, if
you don’t need an image, don’t use it. That’s kind of obvious. If you can use SVG
or an icon font– little button, where are you? There you are. That’s much smaller,
and it scales to any device resolution. Or, using responsive
images, select the lowest possible
resolution and quality, and pick the right format
for the image type. So for a photograph, JPEG
or WebP work really well. If it’s a diagram, it
might be WebP or PNG. JPEGs are less useful
for diagrams because of the way they compress. Oh, I don’t need to walk
over– sorry, habit. So responsive images introduce
a new element, Picture, an element from
HTML5, Source, which you might have seen before,
and two new attributes, Source Set and Sizes. So here’s an example
of a Picture element. How many people have used the
Audio element or the Video element in HTML5? OK, mostly on this
side of the room. You must all know each other. So the way it works is Picture,
as well as Audio and Video, is you put the Wrapper
element in Picture. You list one or more
sources, and the browser goes down and picks the
first one that it can do. So you list them in
most preferred to least preferred order. So in this case, kittens– so I could say, OK, WebP format. And if the browser
doesn’t know WebP format, it’ll try the second line, JPEG. And if it doesn’t know anything,
it’ll fall back to this image. Now, remember the rule
in HTML, not just HTML5, is if a browser
doesn’t know what a tag does, render the content. So if the browser is
an older browser– maybe it’s an older IE, doesn’t
know what a Picture element is, it’ll ignore the Picture tag. It’ll ignore the Source tags. But it’ll still render this
image, the thing that it knows, on the inside. Now, somebody asked me
last week, wait a minute. This Source Set and this Image
Source are the same thing. So do I need them both? The answer is no,
you actually don’t. If this is your
ultimate fallback, you can have it by itself. But you’ll see later
that we actually put this in because we’re
going to do some special things with this line. But in this example,
I could actually just do the single source
and then the fallback image, and we’d get
something that works. Now, for art direction,
I have an example here of injecting a media query
into the source statement. So in the previous
slide, we had a type here on the source statement. We can have a type
and a media query. And in this case– so if it’s at least 650 or
bigger, use the large kitten. If it’s 465 or bigger– if this one fails, but
it’s 465 or bigger, use the medium kitten. If that fails, use
the small kitten. OK, so that’s changing
images, based on screen size. But I also said you
could change images based on screen resolution,
and here’s how you do it. In the Image tag, you
include a source set, which is a set of alternate
variations on the image. And you say, if this is a
1X screen, load this image– 1X meaning a resolution
of the older screens that had 72 to 96 DPI. If this is a higher resolution
screen, the so-called retina resolutions, anything above
300, then it’s considered 2X. So 1X goes up to about 144. 2X is 300 and up, and
load that image instead, the advantage being, if I
have an older 1X screen, I can load an image that’s
much smaller in byte size. Now, there’s another
interesting thing here. What if I wanted [INAUDIBLE]–
one thing I can do also is, instead of using
the Source tag– so the Source tag
said, if the screen is this size, when you’re
sending a media query, load this image. Well, how does the browser
know how big the image is? If I’m doing a set of
images, maybe the browser has to look at everything
to decide what’s best. So in this case, I can hint the
browser in the Source Set tag. I could say, here’s small,
and this is 500 wide. Medium’s 1,000,
and large is 1,500. And the browser will
auto-select from these sizes, without needing to use a bunch
of source elements and media queries, because how much
of a pain would it be– let’s say I’ve got
20 images on the page at three different sizes. Do I really want to
write 60 lines of source, when I can do it this way? And think about it. These could be auto-generated. You could have a Build tool
look at the image on the disk, look at the width, and
inject that into your code at build time. You don’t have to do it by hand. And what I can say is,
now, to the browser, here is the size of
the image to load. Here’s the display
size that I want– 50 viewport width, so I want
half the viewport width, because, remember,
in an Image tag, you can say Size to say
what size screen you want. So I can say sizes, plural. I’d say, OK, I want you
at 50 viewport width. And there’s the alt
tag, so now it’ll pick the best image to fit
in half of the viewport size. So on a thousand-wide
screen, it’ll pick small– a thousand-wide
screen or smaller. On a 2,000-wide screen, it’ll
get medium, and on a 3,000, it would get large. But the browser can then
pick the single best fit. So altogether, this time
using Picture and Source– so Picture, Source,
media query for this– different resolutions, media
source, media query, also different resolutions, and a
fallback to a regular bird. Lots of resources– again,
this is in the slide decks that you can get online,
also in your textbook. So it’s lab time again– ah, nice, quick. So we’re going to give you
a blog site, non-responsive, and have you give it
responsive images. So you’ll get to work
with source set and width. Use the Sizes attribute. Use media queries to change
the image, based on the size. It’s called art direction. And then use the Picture
and Source elements to do the same thing
for art direction. So this one should be
a little different. Now, I’ll tell you one
interesting mystery here. People last week
were doing this, and then they were
opening the Network tab and looking at what got loaded. And people said,
hey, wait a minute. This screen that said
small, medium, and large, in that order– they said, the Network tab says
it’s pulling in the big picture first. It’s because they looked
at it at full size, and then they shrunk it down. So we grab the full-size
image for the big screen. We grab the small image
for the small screen, but because they’re
both in the cache, they will both show
up in the Network tab. But they’re not actually
hitting the network. So good luck with this. This will give you a really
good feel for how these work. This should be new
for most of you. And we’ll come back
in about half an hour. [MUSIC PLAYING]

Leave a Reply

Your email address will not be published. Required fields are marked *