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.