Web optimized image delivery

Transcript

I want to show you how to enable web optimized image delivery for your AIM as a cloud service sites. Web optimized image delivery is available for when you use core components, specifically the image component or any of the components such as teaser that leverage the image component. So we’re going to head over to the weekend site and just open up the home page. So first I’ll show you what it looks like when web optimized image delivery is not enabled. And to take a look at this let’s open up our network panel in our browser. Note that I’m only filtering image requests so we can see those more clearly. And I’m going to go ahead and simply refresh this page. And it starts loading all of the images in as we can see below. Since lazy loading is enabled for images I’m going to simply scroll down to the bottom to make sure that we load all our images so we can see this more clearly. All right we’re down to the bottom and looking at our image requests we can see that we have a type column and this displays the image type that’s being loaded. So you can see here that the image type is jpeg and over here we have our jpeg asset that is being loaded through the image core component but originates in am assets in the dam. And likewise for the rest of these as well. So what we want to do is enable web optimized image delivery. So these are delivered as webp renditions of the asset as the webp format is optimized for web use. So it’s very easy to do this all we have to do is head over to the template for the page and we’ll be editing the image policy. So we simply have to find the policy for the image component. So you can see here on the left we have a single image policy that we use for all of our instances of the image component on the weekend site. So we’ll be editing this and you can also see that this same policy is reused across all of our templates. So this is nice in that we have to enable web optimized images for a single policy and it will cascade through our site. So to do this all we have to do is head over here and select enable web optimized images. Now keep in mind that this checkbox is only available on am as a cloud service author services and is not available on the am sdk. So keep that in mind if you’re developing locally and you want to turn this on you won’t be able to you’ll use the adaptive image servlet like before. Okay so let’s save our changes here click done we’ll head back to our home page. I will refresh the page and we should start seeing some web optimized images coming in just like before let me scroll down so we load all of our images from the dam for all of our articles and adventures and scrolling down through our image request list you can see that all of these images that are served from the dam and were previously png or jpeg have switched to the webp type and this is because we’ve enabled web optimized images. If we click into one of these requests we can see that the url is a little bit different than we’re used to. So now with web optimized images enabled it’s going through a adobe dynamic media delivery prefix so it sets a couple query parameters such as the quality if the webp format is preferred which is set to true as well as the width of the image. So this is all well and good but let’s check out some objective metrics on how this impacts our website’s performance and for this we’re going to head over to the am publish service so let me head over here and I have the weekend site loaded and note that because I haven’t published our new weekend image policy yet we’re still using the unoptimized web image delivery so let’s go ahead and use google lighthouse to quantify our site’s performance so let me just go ahead and analyze the page load and this should provide us a performance score for our website as well as some guidance on how to improve it and as you can see we have a performance score of 97 which is pretty good but let’s scroll down and see if we have opportunities to improve it so you can see here that one of our opportunities is to serve images in a next gen format and if we click into this you can see that it suggests to use webp or avif so when we enable web optimized image delivery we should see this opportunity disappear since we’ll have and our score will hopefully go up so let’s go ahead and try to do this we’re going to head back to our am author we’ll go to our template and we’ll republish our template and this will pick up our change to our weekend image policy as well so we can publish this out and now let’s head back to our am publish let’s empty the cache and do a hard reload just to make nothing stuck in our browser and let’s rerun google lighthouse and see what our new score is all right and there we go our performance jumped to 99 and if we scroll down we can see that the opportunity has disappeared since we’ve satisfied it all right well i hope that now that you know how easy it is to enable web optimized images on your aim as a cloud service website you’ll go ahead and do it right away thanks