Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Srcset, sizes, and picture should work with any image format the browser supports. You could also, for example, deliver WebP to browsers that support it and deliver a fallback for browsers that don't. However, in these lessons, we're going to use JPEGs, since they represent the most common use case and they'll give us the best filesize to image compression ratio.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
There are many image formats on the web,
so we should take a moment to review our
0:00
options before diving into responsive
images in HTML.
0:04
You might have already learned about
scalable vectors graphics otherwise
0:08
known as SVGs, but this is [UNKNOWN] is
one of the best options for
0:12
delivering images that work at all pixel
densities resolutions and most sizes.
0:17
In fact, because SVGs are just mark-up,
0:23
we can modify them on the fly using media
queries.
0:26
SVGs work best for images that have large,
flat areas of color.
0:29
For any image that has lots of rich
detail,
0:34
such as a photograph, we will need to pick
another image format.
0:37
For more details on SVGs, see the notes
associated with this video.
0:41
For any image that isn't a photograph, you
have a few choices.
0:47
There's Ping or png.
0:51
There's the graphics interchange format or
gif.
0:53
And there's more common formats like jpeg.
0:57
And then finally, there's newer emerging
formats like webp.
0:59
In general jpegs tends to work best for
photographs.
1:04
In the rare case that we need an image to
be animated,
1:07
we can use an animated gif and
additionally,
1:11
if we need full alpha transparency on an
image, we can use a 24-bit png.
1:14
However, just know that gifs and pngs have
a tendency to
1:19
increase load times due to their typically
higher file sizes.
1:22
JPEG is designed for digital photography,
1:27
which is why it compresses photographs and
detailed artwork so well.
1:30
Source set sizes and
1:36
picture should work with any image format
the browser supports.
1:38
We could also, for example, deliver WebP
to browsers that support it and
1:42
deliver a fall-back for browsers that
don't.
1:47
However, in these lessons, we're going to
use .jpgs since and
1:51
they represent the most common use case,
and
1:54
they'll give us the best file size to
image compression ratio.
1:58
Now, when working with .jpgs, there is a
trick we can use to get
2:02
a small file size on images that are at 2X
pixel density.
2:06
We'll talk about how to properly deliver
these images next.
2:12
But, first let's take a look at these in
an image editing tool, like Photoshop.
2:15
So, here I have an image open in In
Photoshop, and
2:22
you'll be able to find this image in the
workspaces associated with this video.
2:26
So we'll take a look at that soon.
2:30
But first I just wanted to show you this
little compression trick that you can use
2:32
for 2X images.
2:36
So this is a fairly high resolution image.
2:38
I'll zoom in here.
2:41
So this is at 100%, and you can see that
there's a lot of find detail here and
2:42
it would be nice to have this at 2x
resolution and
2:49
still get a good file size to compression
ratio and
2:53
the thing about 2x images is that you
can't really see
2:58
jpeg artifacts as much as you can in 1x
images, so
3:02
I'm going to go up here to file, and I'm
going to go to save for web.
3:07
And this will bring up the save for web
dialogue box.
3:13
And you can scroll around and pan the
image here just to see what it looks like.
3:19
And over here, I have the jpeg preset.
3:24
And I'm going to set the quality as low as
possible here.
3:28
And now you might not be able to see this
perfectly, but basically there's a lot
3:34
of JPEG compression artifacts going on in
this particular image.
3:40
So I'm going to bump this up a little bit
to about 20% here.
3:45
And, actually, maybe even go a little
higher, maybe like 30 or 40.
3:50
Let's try 40.
3:54
Here we go.
3:56
Now, there are still some JPEG compression
artifacts here,
3:57
but the file size is pretty good.
4:02
This is about 300K for an image that is
2048
4:05
pixels across by 1366 pixels in height.
4:10
And that's a pretty good file size to
compression ratio,
4:16
but like I said, there's a lot of JPEG
compression artifacts.
4:22
However, when this is actually viewed at
2x resolution on a webpage, and
4:25
it's shrunk down, so maybe I can zoom out
here to show you what that looks like.
4:30
You'll see something that looks more like
this.
4:35
So, you'll see all of the crisp detail on
a high DPI display, but
4:38
because of the scale of the JPEG artifacts
you won't really see those.
4:43
So, basically, you can get away with much
higher compression on 2 x images.
4:49
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up