Responsive Images

Working with responsive images 0:00 is another subject that seems simple at first glance. 0:02 Set your images to 100% width, allow them to scale with 0:07 the viewport, and, unless your intent is a full screen hero 0:11 image, make sure there's a max width established preventing 0:15 them from growing unnecessarily large on a wide screen. 0:20 That's all there is to it, right? 0:24 When working with vector graphics, like logos and 0:27 icons, I'd say yes, that's pretty much it. 0:31 But bitmap images like photographs present two unique challenges. 0:35 The first is loading time. 0:42 When delivering images for the web, you want to be 0:45 careful not to deliver an image that's larger than necessary. 0:48 For example, this kitten I downloaded from Unsplash is awfully cute, 0:52 but it's 4500 pixels wide and weighs more than 3 megabytes. 0:58 Imagine the frustration of someone waiting to download a 1:04 3 megabyte image on their tiny phone screen. 1:07 Even on a laptop with a high resolution retina screen, if we're 1:12 setting a max width on our content to, say, 1000 pixels, there's no 1:16 reason to provide an image larger than twice the size or 2000 pixels. 1:21 I've included an article on web graphics for 1:28 retina displays in the Teacher's Notes. 1:31 I'm going to shrink this photo down to 2000 pixels wide 1:35 using Photoshop. If you don't have Photoshop, 1:39 there's tools on the web that can accomplish the same thing. 1:43 Exporting as a JPEG for the web reduces my image to under 800k, 1:47 or about one-fourth of our original size. 1:53 But that's not all. Watch what happens when 1:57 I drop my image into TinyPNG, an online image compressor. 1:59 This kitten pic is now around 420K in size and 2:07 still sharp enough to be used on a retina laptop. 2:11 Getting bitmap image sizes right is a complex subject and 2:19 involves coordination with the development team. 2:22 You might be asked to deliver multiple images for the web. 2:27 I might, for example, prepare a 2000 pixel wide kitten image for 2:31 a laptop and a 1000 pixel wide version for smaller screens. 2:35 And then let the HTML and CSS choose the appropriate image. 2:41 But clearly, care with bitmap images is needed. 2:47 If an image's dimensions are too small, it will look pixelated. 2:50 Too large and you could soon be serving a 3 megabyte 2:55 image to your audience where a 420k image would suffice. 3:00 Do this and you'll find your bounce rate, or rate of 3:06 users leaving the site rather than continuing on, skyrocketing. 3:09 The other challenge with responsive images is the art direction 3:16 problem, and most frequently applies to hero images. 3:19 Here's a mock up of a website as it appears on a variety 3:26 of devices: desktop, laptop, tablet, phone. 3:30 Something you might have seen on a design portfolio website. 3:35 And on a large monitor this extreme landscape image looks 3:40 pretty impressive. But what happens as the viewport gets smaller 3:45 until we're viewing the image as it might be seen on a phone 3:50 in portrait mode? It's awfully hard to make out any details. 3:55 This is where an art directed image comes in handy. 4:02 Rather than just continuing to shrink the image, we can 4:06 use our breakpoints creatively to change what image 4:09 loads depending on viewport width. For example, I might 4:13 want to load an image with more squarish proportions, 4:18 unless the viewport is at least 600 pixels wide, 4:22 then switch to my landscape version. 4:27 We've learned that designing responsively 4:33 means considering changes in navigation, 4:36 body copy presentation, and sometimes image choice. 4:39 In our next video, let's put what we've learned into practice. 4:43