6.1 The picture Element

Hello and welcome back to Responsible Web Design Revisited. In this lesson, you're going to learn how to use the picture HTML tag as part of your optimization processes. Now what the picture HTML tag does is it allows you to load different versions of your images, depending on whether or not the user can actually support those images. So let's say, for example, you want to have a retina version of your logo, but you only wanna serve that up to people who have retina enabled or high DPI enabled devices. The retina version of your logo would be twice the size, so you don't want to make people download that image if they're not going to be able to enjoy that additional resolution. That's where you can use the picture tag to detect whether or not the user has retina support. And if so, only then load in the higher resolution version of your image. Now before we go ahead and setup that picture tag code in your HTML, the first thing we need is the two different versions of your logo. Now what you're looking at here is a version of the logo that you've seen throughout the course, but it's at twice the size. And Photoshop now gives you the ability to export multiple versions of any image and we're gonna go through how you can do that. Now the first step is to make sure that Photoshop's generate function is turned on. So head up to File, look for Generate and then select Image Assets. Now you can make sure that that is switched on by just looking to see that the little tick is showing up here. Now, all you have to do is just rename the layer or the group that you want to export. So let's say, I just wanted to export this as it was. I would just type in logo.png. But what I actually want to do is export two versions, one at its full width that you're seeing here and that will be our retina version. And another at 50% of what you're seeing here and that will be our normal version and here's how you can do that. First, we're gonna type in the file name that we want our retina version to be exported as. So that will be logo_retina.png and now we want to put in a second file name. So, I'll add a comma and a space to separate the two file names. And with this next file, I want it to be 50% of the size. So, I just type in 50%, followed by a space and then the file name that I want for this second file. So we've got our two files that are gonna be exported. Logo_retina.png at full size and then a 50% size version named logo.png. I'll right-click on this group and choose Extract Assets. [BLANK_AUDIO] And this is giving us a preview of the versions that are gonna be exported. This is our retina version at full size and this is our smaller default logo version at half the size. Now we can hit Extract. Choose a destination folder and then click the Extract button. Now that has created a logo-assets folder. And in there, we find the two versions of our logo that we need. Now we can grab those and copy them and we can put them inside the Images folder where we need them. And now we're ready to go ahead and load these images in using the picture tag. In order to make that happen though, we're just going to need to drop one more JavaScript into our project and that is picturefil.js. And the reason we have to add this is that the picture HTML tag is still in the process of being fully adopted by browsers, it is on the way. But in the meantime, we can use this picture fill script to make it work now. Now we can go ahead and add a small snippet of JavaScript to our HTML document and loading the actual picturefill.js file itself. And that will enable us to use the picture tag. Now, we will delete our existing image placement, HTML. And we will add some picture element code instead. Now what this code does? If you have a look, you can see this little two times syntax. So what that means is the browser will look and it will check to see if the user's device will actually support that high definition version. And if it does, then it will load up the specified image and that's the retina version that we just created a moment ago. And we're gonna save that and just do a quick test to see if that's working in actual fact. Because these look identical, I also made an alternative version of the retina logo something with a little two times written over the top of it, so you would be able to actually see the change. And we can test if that is actually working by, once more, using our current develop tools. Now we still have our regular logo loading up, so that is a good start. And this will actually allow us to emulate a higher DPI advice, so let's choose Google Nexus 10. And you can see here this two indicates it does have the support for those double-sized images, so we'll refresh. And now you can see our two times image. So that means that, that is working effectively. There are also several other ways that you can take advantage of the picture HTML element to optimize your image delivery and I'll link you through to a complete resource, where you can have a look at all the different things that you can do. In the next lesson, you are going to wrap up your optimization of everything that you've done so far. But learning how to auto prefix your CSS and to combine and minify all of your CSS and your JavaScript, so you have the smallest files that you can that will load as quickly as possible for your users. I'll see you in the next lesson.