2.3 Adding AMP Images

Hey, welcome back to up and running with AMP. In this lesson, we are gonna look at images in an AMP page. Lock with a lot of things when you creating an AMP page, images done a little bit differently to how you would be used to. So with AMP images, instead of just using a regular IMG element you're gonna use one of AMP's custom elements. They have a whole collection of custom HTML elements that by just using, you tap into all of the inbuilt optimizations that are in the AMP system. So in the case of images you're gonna use amp-img instead of a regular img element. And what this does is it makes sure that the loading of your images is optimized in multiple different ways without you having to actually manually do anything. It does a couple of different things with your images. And there's two particular standouts among the things that it does too. One of those things is a prevents page reflow and the other is it does lazy loading. So what are these two things? With the first one you avoid page reflow. Normally when a page is loaded, that has one more images in it, at first the browser has no idea what dimensions that image is gonna be. Until it loads it, it doesn't know how wide or how high it is. So when the image actually does get loaded in what usually happens is the content around the image then has to be moved and adjusted in the layout which you called reflow. So you probably had the experience you so where you started reading something perhaps on a slow immobile connection. While the waiting for the rest of the page to load. Then suddenly big image blows in all the text that you're reading jumps around and you lose your spot. And that's something that can be pretty annoying and it just doesn't look very smooth either. What AMP does is it always sets up a placeholder for every image before it's loaded in. So even before that image is showing up on your page the correct amount of space is already allocated in that page for the image. And this can be done in a responsive way so that even though your image may be larger or smaller depending on the view port you still gonna have an accurately sized placeholder this he didn't get any reflow. And the other thing that it does is lazy loading. If you have a page that has several images on it then by default your page doesn't actually finish loading process and become probably available for viewers to look at and so all the images for the entire page are loaded. So let's say you've got 20 images then all 20 of those need to load in even though the person looking at the page is not going to see those last images until they scroll down to them. What lazy loading does is it just loads in the images that a user is going to see when they first load in and the images that they're gonna see right after they scroll down. The other images are pulled in as they're required. So that means that the initial load can complete much earlier in the picture which lets the user start actually experiencing the content much faster, so it's very, very efficient. And this is not something that is exclusive to AMP, there are some really cool lazy loading scripts around. And you're also gonna achieve excellent results by using these other scripts as well. If you prefer to do that that's certainly an option. It's just a matter of going in downloading the correct script deploying it and configuring it yourself. But if you wanna do it hands free then you can work with AMP and all you have to do is use this amp-image element instead of a regular image element and all of that stuff is gonna get handled in the background for you. All right, so let's go ahead and start integrating images into the page so working on. We're gonna start with just a great big headed background image and between this lesson and the next lesson we're gonna turn it into a cover for a page. You've probably seen this style, plenty of times it's fairly common layout right now. So to get the images that you're gonna be embedding into the webpage, just jump back into your source files that you go with the course. Going to the completed project folder and then copy the images folder that you find in there. And place it into the project folder that you're working on. So if you have a look inside you can see we've got this header background image that we're gonna work with and by the way the image that you going to see me using in this video is this really lovely shot from photographer Leonid did. I'm sorry I don't know how to pronounce the name correctly but it's a really lovely image from footage in. There is a link in notes below this video if you wanna get a copy of that image yourself. Otherwise, I'm including a back-up the means in your source files from onsplash.com that you can use instead. There's also a few portfolio images that we gonna integrate into the site in a later lesson. So, here we are back in our index edge email template. So, we're gonna start by deleting this h1 tag that we had here by default. And now we just need to add in a wrapper, this is just for styling. So create a div with a class doc_header. And then inside this, we're gonna add in our AMP image tag. Such as amp-img and then every single amp element needs a closing tag there are no self closing tags. So we're also gonna add in the closing amp-image tag. Now let's start adding our attributes in. First one that we're going to add in is src. So this works just like a regular image tag and they will add in the path to the image which is just images/headerbg.jpg. And now the other important thing with images is every single one of them needs to have a height and width specified. We already talked about how it sets up a placeholder for you and how that placeholder can be responsive. But in order to facilitate that functionality, AMP needs to have some initial dimensions set. And it's gonna take the aspect ratio that those dimensions give it and use that to make sure that your image is styled correctly when it's resized for different viewport sizes. So I'm just going to jump into a final minute here and have a look at the properties of this image and And we can see here that the width is 2,000 pixels and the height is 1300 and 33 pixels. So now we're just going to add in these attributes again this is just like a regular image tag so. One with equals 2,000 and height equals 1,333. And then the last thing that we need to add is a layout attribute and this is how you create responsive layout in and pages. Most of it is pretty much hands free with images all you need to do is add the attribute layout and set the value of that to responsive. And that's it. So now we've got our head up background image in place and that's everything that we need to do to make this a fully functional AMP image. So let's check out what we've got on the front end on our site preview. And this is our image and this already has responsiveness built in. So if we change the laws about people you can see that this is already scaling the image up and down as required. So that covers all of the essentials of working with amp images. And in the next lesson, we're gonna to take this image that we've added in, and we're gonna make it operate as a cover image. So we're gonna make sure that this height is never more than the height of the view port. And part of the reason that we're doing that is, normally an image like this would be done as a background image. But AMP can't get at a background image in order to apply all of its optimizations to it. So what we're going to do is go through a way that you can make a large image operate like a background image but still take advantage of AMPs optimizations. So we're gonna go through how to do that in the next lesson. I'll see there.