1 00:00:00,450 --> 00:00:05,040 The source set and sizes attributes, along with the picture element, 2 00:00:05,040 --> 00:00:08,700 allow us to deliver the most optimal image assets. 3 00:00:08,700 --> 00:00:13,620 If a device has a large display with a 1x pixel density, or 4 00:00:13,620 --> 00:00:19,200 if it's a small mobile screen with double pixel density we can use these elements 5 00:00:19,200 --> 00:00:24,680 to more carefully craft the experience, rather than wasting bandwidth or 6 00:00:24,680 --> 00:00:28,530 delivering images that are too low resolution. 7 00:00:28,530 --> 00:00:33,790 To make sure these new pieces of HTML work in old browsers as well as current 8 00:00:33,790 --> 00:00:39,350 browsers we can include a piece of JavaScript known as a polyfill. 9 00:00:39,350 --> 00:00:43,260 A polyfill will implement specific features in browsers that 10 00:00:43,260 --> 00:00:45,870 don't support those features natively. 11 00:00:45,870 --> 00:00:51,010 That way we can code to the HTML standard, browsers that support our 12 00:00:51,010 --> 00:00:55,495 HTML natively will work as intended, and browsers that don't will use the polyfill. 13 00:00:57,130 --> 00:01:01,700 In this case we'll be using a polyfill called picturefill. 14 00:01:01,700 --> 00:01:06,320 I've included a copy of picturefill in the workspace associated in this video, but 15 00:01:06,320 --> 00:01:11,360 if you want to learn more, check out the link to picture fill in the notes. 16 00:01:11,360 --> 00:01:15,960 Now let's take a look at our workspace and see what we have so far. 17 00:01:17,340 --> 00:01:21,670 So here is actually what it will look like when we're all finished. 18 00:01:21,670 --> 00:01:23,940 We'll have two different images here. 19 00:01:23,940 --> 00:01:28,920 There's a banner image at the top and then what I'm calling a profile picture here. 20 00:01:28,920 --> 00:01:32,170 You could easily say that this is a blog post or 21 00:01:32,170 --> 00:01:34,760 any other kind of site that you'd like. 22 00:01:34,760 --> 00:01:42,990 And when I re-size the browser here, we'll get different images and 23 00:01:42,990 --> 00:01:48,780 different crops on those images, and we'll get into all of that very soon. 24 00:01:48,780 --> 00:01:54,360 But here is what our workspace should look like when we first start out. 25 00:01:54,360 --> 00:01:56,370 It should just be this block of text. 26 00:01:57,510 --> 00:02:02,190 So let me go into the code here in my workspace, and 27 00:02:02,190 --> 00:02:05,530 just give you a quick tour for some context. 28 00:02:05,530 --> 00:02:10,108 So we have the head here, and there's pretty standard stuff in there. 29 00:02:10,108 --> 00:02:16,060 We're including normalize.css, just to create a level playing field with our CSS. 30 00:02:16,060 --> 00:02:21,030 There's a Google font I'm including and then, I have main.CSS here. 31 00:02:21,030 --> 00:02:23,780 And we're not going to be writing any CSS, 32 00:02:23,780 --> 00:02:27,590 but if you'd like to take a look at that, you can. 33 00:02:27,590 --> 00:02:31,170 Up at the top here, we have some basic styling. 34 00:02:31,170 --> 00:02:35,800 Tthere's a few helper classes, just to make the page look nice. 35 00:02:36,800 --> 00:02:41,870 There's a few layout classes, and I'll be using this profile image to 36 00:02:41,870 --> 00:02:47,300 style that image of a flower, and then we have a few media queries. 37 00:02:47,300 --> 00:02:50,660 But despite this being a course about responsive design, 38 00:02:50,660 --> 00:02:55,010 we actually don't need to worry about these media queries a whole lot. 39 00:02:55,010 --> 00:02:59,040 We will change a few things in the CSS but not much. 40 00:03:00,220 --> 00:03:05,780 So in our HTML here, we also have this content-block helper class, 41 00:03:05,780 --> 00:03:11,540 and then we have a block of text here, but we're going to be focusing on images. 42 00:03:11,540 --> 00:03:15,770 The first thing we need to do is add the picturefill polyfill. 43 00:03:15,770 --> 00:03:21,920 When we include this into our HTML we're also going to add an async attribute. 44 00:03:21,920 --> 00:03:26,540 This doesn't change the way the polyfill or our HTML will behave. 45 00:03:26,540 --> 00:03:30,190 Rather it's just a small front end performance improvement 46 00:03:30,190 --> 00:03:34,180 that tells the browser it can load this script asynchronously. 47 00:03:34,180 --> 00:03:37,350 Meaning that it won't block HTML rendering, and 48 00:03:37,350 --> 00:03:40,070 will just load whenever it can. 49 00:03:40,070 --> 00:03:45,030 We can only add the async attribute to scripts that have no dependencies, 50 00:03:45,030 --> 00:03:47,837 because this can be loaded in at any time. 51 00:03:47,837 --> 00:03:52,937 If, for example, we were loading in jQuery and a jQuery plugin, 52 00:03:52,937 --> 00:03:59,040 we couldn't add async because the plugin depends on jQuery being present. 53 00:03:59,040 --> 00:04:02,470 But in this case we can use it, so let's do that now. 54 00:04:02,470 --> 00:04:05,360 So here in my workspace, 55 00:04:05,360 --> 00:04:11,000 I am going to put a space just below main.css. 56 00:04:11,000 --> 00:04:18,150 And then, I'm going to type, script, then the source attribute, src. 57 00:04:18,150 --> 00:04:25,540 And I have a file here in my JavaScript folder, called picturefill.min.js. 58 00:04:25,540 --> 00:04:29,238 So that is the picturefill polyfill, and it's been minified for 59 00:04:29,238 --> 00:04:31,670 us, for better front-end performance. 60 00:04:31,670 --> 00:04:36,047 So I'm going to say picturefill.min.js, and 61 00:04:36,047 --> 00:04:43,640 then I will type the async attribute, and the async attribute does not need a value. 62 00:04:43,640 --> 00:04:48,470 So we can just leave that as is with no equal sign. 63 00:04:48,470 --> 00:04:54,130 And now, if we save that out, picturefill will be included into our page. 64 00:04:54,130 --> 00:04:58,950 So if we switch back and refresh, we shouldn't notice anything different. 65 00:04:58,950 --> 00:05:04,860 But, if we view the page source, we should see that picturefill is now included. 66 00:05:04,860 --> 00:05:08,930 And if you want to test that really quick, you can click on it and oops, 67 00:05:08,930 --> 00:05:13,710 it's actually not working so let's see why that is. 68 00:05:13,710 --> 00:05:16,300 Oh, it's because it's in the JavaScript folder. 69 00:05:17,500 --> 00:05:20,680 So I actually need to say js followed by a slash. 70 00:05:21,890 --> 00:05:25,479 And now, if I refresh this page source, 71 00:05:27,280 --> 00:05:29,830 there it is, so it's being loaded in properly. 72 00:05:29,830 --> 00:05:33,490 So that's exactly why it's important to just run a quick check, 73 00:05:33,490 --> 00:05:37,960 make sure it's being included because there's no visual changes on the page. 74 00:05:37,960 --> 00:05:43,100 So now that that's being properly included, 75 00:05:43,100 --> 00:05:46,796 we can go ahead and move forward. 76 00:05:46,796 --> 00:05:51,804 Now, I just want to show you really quick that we have some images here in 77 00:05:51,804 --> 00:05:56,728 the image folder, and these have already been sized appropriately, 78 00:05:56,728 --> 00:05:59,830 but of course you would use your own images. 79 00:05:59,830 --> 00:06:06,380 So if we click on each one of these, we can see the resolution in pixels and 80 00:06:06,380 --> 00:06:10,380 it also gives us a preview of file size, so that's nice. 81 00:06:10,380 --> 00:06:14,340 So, there are small, medium, and large banners here and 82 00:06:14,340 --> 00:06:16,290 they're all at different crops. 83 00:06:16,290 --> 00:06:21,190 So, just to show some contrast between the large and the small here, you can 84 00:06:21,190 --> 00:06:26,200 see how those are pretty different, and of course the medium is somewhere in between. 85 00:06:26,200 --> 00:06:31,190 We also have square versions of that same image, and we'll be using those later on. 86 00:06:31,190 --> 00:06:34,870 And then we have the image of a flower I was showing you earlier, and 87 00:06:34,870 --> 00:06:42,690 we have that at 1x and 2x resolutions, so we'll be using those very shortly. 88 00:06:42,690 --> 00:06:48,420 We can use the source set, or src attribute on any normal image element. 89 00:06:48,420 --> 00:06:51,530 However, instead of just using one file, 90 00:06:51,530 --> 00:06:54,750 like we would with the more typical source attribute. 91 00:06:54,750 --> 00:07:01,240 The source set attribute allows us to specify multiple files for a single image. 92 00:07:01,240 --> 00:07:04,420 For example, we could provide a 2x image for 93 00:07:04,420 --> 00:07:10,320 devices that have double pixel density and a 1x image for more traditional screens. 94 00:07:10,320 --> 00:07:16,040 The magic here is that we don't know when the browser will choose each file. 95 00:07:16,040 --> 00:07:19,640 It's not specified and it's up to browser vendors 96 00:07:19,640 --> 00:07:23,410 to make the most intelligent choice about which file to deliver. 97 00:07:24,870 --> 00:07:30,190 That might not sound desirable but in most cases, this is actually a good thing. 98 00:07:30,190 --> 00:07:35,000 We can be more explicit about choosing files using the picture element, which 99 00:07:35,000 --> 00:07:40,180 we'll learn about later on, but it's often best to just use the source set attribute 100 00:07:40,180 --> 00:07:45,240 on an image element because, in essence, it makes our site more future friendly. 101 00:07:45,240 --> 00:07:49,740 If browser vendors come up with a better way to choose sources, or 102 00:07:49,740 --> 00:07:53,300 new devices come along, this implementation will leave the hard 103 00:07:53,300 --> 00:07:57,160 thinking out of our code, and in the hands of the browser. 104 00:07:57,160 --> 00:08:01,670 Using the picture element, we can do a more custom implementation, but 105 00:08:01,670 --> 00:08:06,240 our custom implementation, might be slightly worse than any new and 106 00:08:06,240 --> 00:08:10,340 improved browser algorithms that come along in the future. 107 00:08:10,340 --> 00:08:14,960 Still, when we learn about the picture element, we'll learn about some instances 108 00:08:14,960 --> 00:08:21,150 why we do need more granular control than what the source set attribute can provide. 109 00:08:22,220 --> 00:08:25,270 Now that we understand more about the source set attribute, 110 00:08:25,270 --> 00:08:26,790 we're ready to learn how to use it.