1
00:00:00,530 --> 00:00:04,970
There are many image formats on the web,
so we should take a moment to review our

2
00:00:04,970 --> 00:00:08,860
options before diving into responsive
images in HTML.

3
00:00:08,860 --> 00:00:12,690
You might have already learned about
scalable vectors graphics otherwise

4
00:00:12,690 --> 00:00:17,560
known as SVGs, but this is [UNKNOWN] is
one of the best options for

5
00:00:17,560 --> 00:00:23,650
delivering images that work at all pixel
densities resolutions and most sizes.

6
00:00:23,650 --> 00:00:26,390
In fact, because SVGs are just mark-up,

7
00:00:26,390 --> 00:00:29,900
we can modify them on the fly using media
queries.

8
00:00:29,900 --> 00:00:34,620
SVGs work best for images that have large,
flat areas of color.

9
00:00:34,620 --> 00:00:37,680
For any image that has lots of rich
detail,

10
00:00:37,680 --> 00:00:41,630
such as a photograph, we will need to pick
another image format.

11
00:00:41,630 --> 00:00:45,570
For more details on SVGs, see the notes
associated with this video.

12
00:00:47,200 --> 00:00:51,290
For any image that isn't a photograph, you
have a few choices.

13
00:00:51,290 --> 00:00:53,570
There's Ping or png.

14
00:00:53,570 --> 00:00:57,140
There's the graphics interchange format or
gif.

15
00:00:57,140 --> 00:00:59,550
And there's more common formats like jpeg.

16
00:00:59,550 --> 00:01:04,670
And then finally, there's newer emerging
formats like webp.

17
00:01:04,670 --> 00:01:07,780
In general jpegs tends to work best for
photographs.

18
00:01:07,780 --> 00:01:11,290
In the rare case that we need an image to
be animated,

19
00:01:11,290 --> 00:01:14,130
we can use an animated gif and
additionally,

20
00:01:14,130 --> 00:01:19,450
if we need full alpha transparency on an
image, we can use a 24-bit png.

21
00:01:19,450 --> 00:01:22,940
However, just know that gifs and pngs have
a tendency to

22
00:01:22,940 --> 00:01:27,130
increase load times due to their typically
higher file sizes.

23
00:01:27,130 --> 00:01:30,230
JPEG is designed for digital photography,

24
00:01:30,230 --> 00:01:34,750
which is why it compresses photographs and
detailed artwork so well.

25
00:01:36,280 --> 00:01:38,320
Source set sizes and

26
00:01:38,320 --> 00:01:42,850
picture should work with any image format
the browser supports.

27
00:01:42,850 --> 00:01:47,990
We could also, for example, deliver WebP
to browsers that support it and

28
00:01:47,990 --> 00:01:51,370
deliver a fall-back for browsers that
don't.

29
00:01:51,370 --> 00:01:54,990
However, in these lessons, we're going to
use .jpgs since and

30
00:01:54,990 --> 00:01:58,050
they represent the most common use case,
and

31
00:01:58,050 --> 00:02:02,310
they'll give us the best file size to
image compression ratio.

32
00:02:02,310 --> 00:02:06,620
Now, when working with .jpgs, there is a
trick we can use to get

33
00:02:06,620 --> 00:02:12,080
a small file size on images that are at 2X
pixel density.

34
00:02:12,080 --> 00:02:15,860
We'll talk about how to properly deliver
these images next.

35
00:02:15,860 --> 00:02:20,690
But, first let's take a look at these in
an image editing tool, like Photoshop.

36
00:02:22,770 --> 00:02:26,335
So, here I have an image open in In
Photoshop, and

37
00:02:26,335 --> 00:02:30,915
you'll be able to find this image in the
workspaces associated with this video.

38
00:02:30,915 --> 00:02:32,725
So we'll take a look at that soon.

39
00:02:32,725 --> 00:02:36,995
But first I just wanted to show you this
little compression trick that you can use

40
00:02:36,995 --> 00:02:38,535
for 2X images.

41
00:02:38,535 --> 00:02:41,285
So this is a fairly high resolution image.

42
00:02:41,285 --> 00:02:42,662
I'll zoom in here.

43
00:02:42,662 --> 00:02:49,535
So this is at 100%, and you can see that
there's a lot of find detail here and

44
00:02:49,535 --> 00:02:53,741
it would be nice to have this at 2x
resolution and

45
00:02:53,741 --> 00:02:58,050
still get a good file size to compression
ratio and

46
00:02:58,050 --> 00:03:02,771
the thing about 2x images is that you
can't really see

47
00:03:02,771 --> 00:03:07,080
jpeg artifacts as much as you can in 1x
images, so

48
00:03:07,080 --> 00:03:13,030
I'm going to go up here to file, and I'm
going to go to save for web.

49
00:03:13,030 --> 00:03:19,230
And this will bring up the save for web
dialogue box.

50
00:03:19,230 --> 00:03:24,680
And you can scroll around and pan the
image here just to see what it looks like.

51
00:03:24,680 --> 00:03:28,890
And over here, I have the jpeg preset.

52
00:03:28,890 --> 00:03:34,230
And I'm going to set the quality as low as
possible here.

53
00:03:34,230 --> 00:03:40,040
And now you might not be able to see this
perfectly, but basically there's a lot

54
00:03:40,040 --> 00:03:45,430
of JPEG compression artifacts going on in
this particular image.

55
00:03:45,430 --> 00:03:50,870
So I'm going to bump this up a little bit
to about 20% here.

56
00:03:50,870 --> 00:03:54,920
And, actually, maybe even go a little
higher, maybe like 30 or 40.

57
00:03:54,920 --> 00:03:56,110
Let's try 40.

58
00:03:56,110 --> 00:03:57,390
Here we go.

59
00:03:57,390 --> 00:04:02,230
Now, there are still some JPEG compression
artifacts here,

60
00:04:02,230 --> 00:04:05,240
but the file size is pretty good.

61
00:04:05,240 --> 00:04:10,680
This is about 300K for an image that is
2048

62
00:04:10,680 --> 00:04:16,570
pixels across by 1366 pixels in height.

63
00:04:16,570 --> 00:04:22,060
And that's a pretty good file size to
compression ratio,

64
00:04:22,060 --> 00:04:25,430
but like I said, there's a lot of JPEG
compression artifacts.

65
00:04:25,430 --> 00:04:30,690
However, when this is actually viewed at
2x resolution on a webpage, and

66
00:04:30,690 --> 00:04:35,790
it's shrunk down, so maybe I can zoom out
here to show you what that looks like.

67
00:04:35,790 --> 00:04:38,280
You'll see something that looks more like
this.

68
00:04:38,280 --> 00:04:43,890
So, you'll see all of the crisp detail on
a high DPI display, but

69
00:04:43,890 --> 00:04:49,240
because of the scale of the JPEG artifacts
you won't really see those.

70
00:04:49,240 --> 00:04:54,100
So, basically, you can get away with much
higher compression on 2 x images.