Image Formats

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