 Good morning campers. I'm Chris. I just want to thank you very much for joining me for this talk today about responsive images I know that this is at least one of two today. I'm going first and Kevin Hoffman is going later and he's gonna be able to tear apart anything that I do wrong right now So please take it easy on me So basically I wanted to talk about today kind of responsive images the value of them Get into kind of just the kind of basics of responsive images But I really take it a few steps further and just talk about how you can optimize those images to make them really really High performance get your website in in basically as good of shape as possible for quick page load and and Taking it as far as you can So first of all why optimize? Obviously, we know this is all about performance and the different impacts that performance have on your website your conversion rate your engagement of your users and the Just all the aspects of you wanting people to be on your website performance has a huge impact on that so You know first of all just to quote Google sites that live in five seconds versus 19 seconds Observed 25 percent higher viewability and 70 percent longer average sessions 35 percent lower bounce rate So you're getting a whole lot of people or a whole lot more people looking at your site looking at it for longer and Not leaving your site as quickly And then since the dawn of web 2.0 You know quite some time ago sites have gotten larger and larger as they've gotten more interactive so Get part of that interactivity has been you know much more advanced JavaScript many more images and interactive images in different ways of engaging with those images and Because of that the page load has gotten larger For quite some time there for a number of years it was getting exponentially larger on a yearly basis It was accelerating in how much bigger images were or the overall size of the page load was getting And then it's kind of at this point still growing year by year Not quite as largely but the end result is that websites keep getting larger the page load of the assets keeps getting larger and at some point You know you need to start to account for that Alongside that same trajectory more and more people have been using mobile devices to load the web page content that you have Google now indexes mobile first so That's indicative of the fact that they know that more of your traffic on your website is coming from mobile devices now than it Is from desktop computers You know obviously different websites have different statistics for that But I think it's just kind of an important to keep in mind that Most people are kind of on the go browsing your website on their phone. Maybe not the best internet connection Maybe not the you know super high horsepower processor that you have in your computer and For all those reasons kind of optimization for those different platforms and those different devices is super key If that's where people are viewing your website that you need to make sure that you're providing the best possible experience for them on those devices and Huge huge part of that is that your page loads really really fast Um to take it a little bit further if you have an e-commerce Yeah e-commerce website It's super key to have that page load quickly again when you're talking about conversion rates and people actually purchasing what you're trying to sell them There's a huge huge drop-off Kind of right after the two and a half three second mark where your conversion rates suffered drastically As you get past a certain point You know on average you could have up to kind of 2.4 Sorry about a 2% conversion rate if your page loads as quickly as 2.4 seconds And that really really drops off to kind of about a half percent conversion rate or 25 percent of what you could have had Once your page gets to about the six second mark. So, you know, that's a huge huge impact that that could meet That could make the difference if you're selling You know thousands of dollars of products you stand to make or lose thousands of dollars on a monthly basis Because of that. So it's really I mean for from a content perspective from a sales perspective Whatever you're trying to accomplish with your website It's so so paramount that people are unable to engage with that content as quickly as they possibly can and So why do we go to images? I think is obviously the next question Images on average composed about 64 percent of the average pages payload So that's a huge huge part of it. Obviously images are big assets and And so optimizing them is really the low-hanging fruit if you can optimize that part of your website You're optimizing a huge, you know percentage of your website about two-thirds of your websites payload is going to be those images So it's an awesome place to focus And and it's low-hanging fruits. It's a great way to To kind of start and make your website as performancy could possibly be So kind of and again We're just kind of starting with kind of the baseline type things just because I think these things are important And I think it's worth considering before you even get into making your images responsive for your website You really want to think about how you're sending those images to People using your site in the first place and kind of the three main file types that everybody's interacted with start with you know Jpegs for things like photorealistic pictures Pings for if you need transparency or for kind of lower-way illustration So it's an illustration with a limited number of colors not photorealistic Great place to use pings also, and I think that's one thing that I've noticed a lot of people think okay We'll always use lossy JPEG format for basically any image that doesn't need transparency a lot of times If you actually you know take a look at the file size if you export a ping image that is something with relatively limited colors relatively You know Simple design you'll oftentimes get a totally lossless picture that in fact weighs less than that JPEG So again if it's photorealistic or something like that absolutely do JPEG export at a reduced quality But if you you know do have seen it's a little bit more limiting colors I'd say try exporting as a ping see what happens And of course don't we have SVG which are scalable vector graphics coming out of something like Adobe illustrator Those are for you know pretty much the simplest of different types of images low visual complexity You know still has transparency and a huge benefit of that also is that they're infinitely scalable and they look perfect You know all the time as well as having a really low file size So between those three I mean before you even start you need to make sure that you're saving out your files in the correct format You know that fits the occasion Great starting point and like it's something definitely worth considering because there's a lot of Kilobytes that you could save in just in just considering which one is most appropriate So just to go into kind of like a basic responsive image setup And this is not the way that we're gonna do this by the end of this presentation, but this is kind of the foundational responsive images with a few things worth considering and really it is Inherently a part of you know where we're gonna end up But just just to kind of break it down in a very simple way So first of all we have a source set of different images What that allows the browser to do is pick what? Image is most appropriate for the situation And use that image so it only downs downloads the most appropriate image for the viewport for the size of the image That's going to be showing up there The second rule here are the sizes and that's where you're actually telling the browser the browser the logic of What images to use so in this case? It's saying you know if your viewport has a max width of 320 pixels this image should be serving the 280 pixel version of the image You know which which you're saying then in that situation is the most appropriate So those two things are kind of the Instructions and the rules that the browser uses to make that determination and as you resize your window or scale or tip your phone from portrait to landscape mode Those different rules come into effect and apply and it might load a different version of that image So those are all good things and what it really enables is a combination of the Smallest file size and the highest image quality for a given size that the image is being displayed And I think those two things are important to consider to you It's not only that we're making it fast, but we're making it so that it looks great on whatever device The person is using and really if you can accomplish both of those with this type of solution That's the ideal the ideal situation So already Obviously that last slide where it considerably more complex than an image tag with the same single image in it Definitely a little bit more of a pain in the butt already That said there are kind of a couple different pieces that can make this way easier So the first challenge again being kind of the multiple versions of the images if you have to be able to serve multiple versions of an image you have to have all of those versions to serve in the first place and You know if you have to save each one of those at a Photoshop or whatever photo editor you're using that could be Not very fun at all You could end up instead of having to save out one image and they end up having to save out ten or however many you need for that set So that's not fun, but we can optimize optimize those programmatically either using word presses You know built-in functionality or we can use a task automation tool like Gulf or grunt to do that So you save out that one version of the image and then you have one of your systems Automatically make all of the other versions for you The second piece of it is first of all figuring out all those different break points and then figure out all the sizes that make sense for Your site and in that regard what I would say is first of all the the end result in the tool We're going to use here does a lot of that for you, which I think is really cool But the other thing is when you think about your website There's really only so many different sizes of images You're probably likely to use unless you have a super super complex design on your site Typically if you're using a grid layout You're gonna have images to take up half the screen a lot of cases You'll have images to take up the full screen or a quarter of the screen But you know you're looking at maybe a set of you know five or six I would say on a on a moderately complex website that you're actually using so you do need to figure out You know the size that it fits at that break point and then also kind of accommodate for when things get fluid at kind of mobile sizes But it's really not that many and really you can kind of just start using those over and over again Probably want to figure it out or at least consider it for every site but um You know at a certain point when you're implementing images and all of your different page templates it Becomes a big copy paste job, which really isn't that bad So let's go into a little bit more why you really want to optimize so this is Google Lighthouse It is a tool now built into Google Chrome and it is awesome if you haven't checked it out yet. I highly recommend it It's basically like all those website speed test websites kind of rolled into a single package That's right there in your browser analyzes your site right there and Gives you tons and tons of information about all the different things you could be doing to get really solid performance on your website nine times out of ten if a website is is particularly slow or Even just not as fast as it could be some of the main things that are going to come up are shown here First of all serving images in next-gen formats, and that's basically serving things in webp Which chrome can use Android browsers or chrome on Android phones can use I think that's about it right now But that's still a huge part of your your target market And it's really good to have a much smaller kind of image size for those people that can use it so webp is you know a compression algorithm that works for both jpegs and pings and Has a greater reduction in file size than both jpeg and ping formats So you want to make those available and we'll get into that a little bit The other piece is off-screen images So when somebody loads a web page they see what you have at the top of that web page And they don't see what you have at the bottom of that web page That's important because if you if you're not lazy loading your images You're going to end up loading all of those images that they're not looking at that's going to be the Whole weight of your web page and all the things that they don't even need yet Happening all at once right at the beginning that makes your website slow, and that's not good So lazy loading is a huge component of this as well. You really want to be able to serve people images when they're When they need them and not before Properly sizing images another thing that's very much helped by using responsive images again if you have You know an image that's twice as big that needs to be loaded on the page Twice as much information twice as much page load. That's not good You may never get to a hundred percent perfect in every situation without maybe using some kind of Heavy kind of JavaScript library to kind of resize things on the fly But you can get so so close that it will you know have almost no no additional waiter impact So responsive images allows for all those different All that type of sizing So again, that's under the audits tab in Google Lighthouse, which is built into Chrome super useful One thing I've noticed if you are using Lighthouse You kind of get different results in Current stable version of Chrome versus Chrome canary I would say I think they're working out all the time. I think it's a very much in development It's probably worth at least trying out both and kind of comparing the results that you get and kind of just regular Chrome and from canary And to kind of get a little bit further into why you want to optimize The some key Perspectives from Google are that there are kind of these different points at which people feel like they're engaging your site And it's all about how their perspective of that kind of initial engagement with your site Really really matters. So it's not just that your page loads. That's you know baseline the page has loaded It's a little bit more segmented than that So the first point is the first meaningful paint which is when there's something of value there on the screen And that means that you know not everything might be loaded You can't actually interact with it yet But you do see it there and that's important because you want people to see something to see that you're doing something with them You know as quickly as possible Then the time to first interactive that's when somebody can actually start engaging with your website And then consistently interactive is when sites rate of the pages ready to go They can start interacting they can do a number of things on the page and that's good So Google has this thing called perceptual speed index which Which which gives you an idea of how people are perceiving the speed of your page And that's that's a really important kind of metric to be taking a look at So to get into the full depth of what I'm here to talk to you about today Basically, it's that we want to do responsive images But then we want to do a bunch of other stuff to to make it as fast as possible to meet all those metrics That you're going to see in Google Lighthouse And to even maybe take it a couple steps further, so it's responsive images Images served as both regular images for browsers that can't handle web pay and then also as web pay for browsers that can Lazy loading your images so that you're only loading the content that people need when they need it and not loading everything at the very beginning of the page Another really cool tool which is SVG placeholders so that the first image that gets loaded on the page Is in fact an SVG representation of the of the actual image that you're going to use And I'll go into a little bit more about that and then setting up your site to leverage caching So you you want for people when they're accessing your They've already accessed it keep those resources local so that you don't have to send those across the network again Makes it much faster much speedier for them Okay So first of all just to talk about the different ways that you can create those responsive images Um, basically a kind of easy first step is in your themes functions file You can make use of word presses add image sizes Function to create the different sizes that you might need Here's an example of how I might lay that out in one of my theme files for a specific website taking into consideration the different sizes that those images are going to show up and Here you might want to consider both, you know regular standard definition screens as well as more retina displays which Present images at two times size three times size different sizes I think you do kind of want to consider that if you have a Million sources might be a little bit overkill You want to kind of have the least number of different sizes that you can that really meets the breakpoints of your site and has a good-looking and just about right sized image for each screen to again optimize both performance and The quality of the image, but you probably don't want a thousand of them either. I think I've had people critique me for using too many This is kind of a standard set that I would use But to me I feel like having When you're talking about the different sizes of images you're talking about kilobytes or tens of kilobytes or sometimes hundreds of kilobytes of difference You do have you know that extra block of code that and all those extra references in the code of your site But I think the savings that you have kind of warrants Somewhere in between there. So, you know, I might have you know, eight or ten different sizes And I think that that that's kind of a reasonable point right or wrong Another way of going about this is if you're gonna use a task automation tool like gulp or grunt I have used both and I think they're both great from what I hear all the cool kids are using gulp and It is a little bit more readable. So that's you know, that's a Nice benefit of it what that will do is you can just have kind of a watch task running in your larger gulp task and Whenever you add images or add an image to your source images folder will automatically run whatever processes you have set up to optimize that image so In a situation like this, this is just generating all of the different responsive images image sizes And optimizing things like JPEGs things and webp images. So, you know, that's that's one possibility I'll hop out of the presentation in a little bit and actually take you through my whole kind of gulp task that goes through these It does a bunch of other things also But yeah, I think it's it's a pretty cool way to do it So that's the example of the gulp responsive plug-in So then as far as webp is concerned and this is kind of a There's there's kind of two ways to go about this as well either with a plug-in because there are basically services that will generate webp images for you Or you could do it again as a gulp task using kind of libraries hosted on your own computer As the services go these all seem really good. I don't use them personally But I this would definitely make it simpler and you could just basically have this plug-in running and use word presses own image functionality and Basically have all of your webp images and optimized and different size responsive images So there's the eweb image optimizer and That one's really good. I think it allows you it's set up so that you can either Optimize images locally using your own server and different libraries on your server to optimize the images or you can use their Their servers to do it and if you pay some amount they will Offer a couple additional options jetpack is another great one jetpack has their image CDN, which is 100% free But they will they end up hosting the images on their own CDN Which you may or may not want depending upon how your server architecture is set up You might want you know your own CDN kind of hosting those things to limit the number of outside calls the server is making to You know outside websites, so it kind of just depends but good solution built into jetpack And and also short pixel and optimists again, they do either have an annual fee or You know this kind of per image fee, which is like a fraction of a cent It could end up being like five bucks and really not costing you very much to use any of these services And it does make it, you know considerably simpler to just install a plug-in and do something like that Yeah, and basically, you know just an example of the image optimizer will basically convert to WebP for you Save those files in your uploads directory next to where the you know different image sizes of the original file are So likewise something you could do with a gulp task or grunt task Basically just generating different WebP options for you and there's something called gulp WebP that does that for you So if you start thinking about kind of your gulp task as a series of processes that are running automatically That are automatically optimizing your images for you It really just does a whole lot and all you have to do once you've got it set up It's just in your command line, you know Start with gulp tasks and it's just watching for you as we're working on the site Trying to think if I want to show you anything outside of this Okay, so the next the next step is Lazy loading your images and this I really can't recommend enough. It's called lazy sizes Yeah by Alexander Farkas Such an incredible and extendable library for lazy loading your images as well as well as just making this whole Image optimization process way way easier. It automates and does a whole lot of things for you That you that means you don't have to think about it. So for instance In addition to allowing you to serve either Regular, you know JPEGs pings or WebP. It also will automatically determine the correct image size for the place So that you don't have to set those responsive break points You do still have to set what size the browser should see that image as So for instance when we're back at our previous example with the responsive images We're still setting the width That's like the native width of the image right there So you still do you need to tell the browser that but as far as this whole sizes section here You don't need to do that because the plug-in figures it out for you. So that's a really really cool You know advantage right there. It also does a lot of other really nice things with You can set it up for background images. There's a lot of extendability and a lot of kind of add-ons that make it super super functional, so So for lazy loading and just kind of the optimization of this whole process I highly recommend it the second piece you're gonna want with that is going to be the rest image polyfill and that makes These kind of responsive images for image formats things like the picture element things like Determining whether WebP or will work or not for older browsers more compatible So between these two things it's about 25k when it's served via gzip over your You know over the server that's minified down to about 5k pretty small And again with all the functionality and the potential You know hundreds of kilobytes of savings that's giving you and loading those images on the page I'd say it's super worth it. You do need to load it in the header of your site However, obviously because it affects the loading of content display on your website You don't want that to be happening after all the images are already there, so it does have to be in the head All right, so here is kind of a basic responsive images implementation using lazy sizes And this would be using those images that were saved using that WP add image sizes function From your uploads directory. So as you can see here, there is no more Having to define the sizes we are inside of a picture element And you'll see why we're inside of a picture element rather than just a regular source set in a little bit But basically what this does is first loads your source image, which is going to be the smallest image that you've got There are the smallest version of image that you've got for that display In this case, it's only 180 pixels wide. You're talking about an image. It's maybe 5k 6k something like that on your website So that's the first thing that's going to load which again as far as that perceptual speed index with Google goes You see a low quality image. It's not great, but it gives you some context You give you some idea of what's going to show up there in that first, you know Few milliseconds as the page is loading before whatever the exactly, you know, appropriately sized image for that space is And then you're offering it this Data source set in this case because again the plugin is optimizing some of these things for you So it uses a data source set attribute rather than a regular source set That is offering all the other sizes and again the browser then chooses which one is the right one And it takes that image and it puts it in there And then you have again an image that's optimized both for size and quality for the situation on the page With that plug-in also you do need to add a class Lazy load that's all you need to do if you have that class amongst your classes on the image The plug-in knows to act on it and you're in good shape Also that data sizes auto attribute there that is what is basically enabling you to not have to To not have to specify the different break points and sizes in your code here That's keeping it a lot simpler, which is really nice There are a lot of ways you can manage that with that in the plug-in though So again it's worth exploring for different situations. You might want to not just have it automatically Determin the sizes. I don't know what those are, but maybe you have a reason So taking it a bit further now, we're getting into a situation where we have our images from both the regular versions in this case pings or that bottom section there and Webp images being served so that you're providing options for browsers that both Can handle webp and that's are going to be loading smaller file sizes But also for browsers that can't you're loading whatever that original format would be in this case a PNG image Still loading at the beginning there for your image source The smallest version of that ping file, but again, that's going to be very low white low weight compared to you know Trying to cover all browsers and loading something much larger So this is kind of an example of those two pieces together again You've got a big block of code here, but for the sake of performance and the sake of Really kind of reducing that image file size. It's a really Really functional as well You'll also notice as far as this layout goes. These are pulling from my theme template directory This is how I typically set it up. But again Because I process everything using gold beforehand as I'm building the site But then also apply apply kind of optimization to the upload directory as well, but you'll just see that this is Pulling from from my theme directory because they've already all been optimized minified And the different responsive breakpoints generated in my gulp task as I was building the site so this is really cool piece and Something that I'm kind of excited to share with you so Another really cool way of doing this and what we've been talking about with that initial image that loads your your source image That shows up in the code So far we've had a small Png or jpeg or whatever the kind of baseline image that you need to show up in that first place showing up there They're small, but they could be smaller also In almost every situation, you're not going to have the user actually Looking at that image for more than a split second when the actual image is going to show up there works So you want to minify that as much as possible you want to make that as As as small as it could be because it's in between What they're initially seeing and what you actually want them to see so there's a really cool optimization technique Using sqip or skip. I don't know. I don't know how you pronounce it, but basically it takes your image your input image makes a SVG image out of primitives that somehow resembles that image that you have and then layers over that a big Gaussian blur so that it's like if you were looking at the Blurriest version of your image ever but in vector and and You know not not jagged looking or anything like that still very smooth looking Which is like a blurry version of your image that weighs almost nothing. That's the first thing you load in its place instead So And I can show you kind of what that looks like Yeah, so so just to show you kind of how this tool works if you feed it You know a picture of a fox in a field. It's gonna give you this like Just woke up in the morning first second you're cracking your eyes open blurry pick view of that and again Because it's not what you eventually want them looking at It's it's what you it's what you are just showing them in the meantime and you're giving them that Perception of things we're showing up on the page To have a super super small file that does that and to be able to automate that is super valuable So I highly recommend looking into that again. It's something that you can run with a gulp task And kind of go through the whole just add it to your kind of build workflow And and that makes everything even smaller and even more optimized And as you can see here, you know, we've updated that instead of now your source image being a Pinger JPEG. It's that SVG instead As far as WordPress plugins that do that by the way, I haven't seen anything I'm not sure that there are any WordPress plugins that do this at this point Maybe one of us will write one sometime soon, but but it but it is cool and again, you can do that with that with gold And the last point, okay, so now we've made our images as small as You know, I think it's really functioning possible at this point The other thing though is you don't want to be sending people images You don't want to be making them use the network if they don't need to so Some things you can throw in your HT access file that really help performance Allow the browsers to catch as much of the content as possible are these types of headers So first you want an expires header, which is the kind of legacy version of what browsers use to Take a look at different file types and say I'm gonna store these in my local cache So for older browser types, you would use this very list of kind of expires headers You can set the expiration time for as much as you want really depends kind of how often the content shows up on your site and the More modern version of that is cache control headers again, which we're sending kind of a max age Send the type of cache. That's what the public or private piece is there The types of different servers that can cache it. So for instance there you can specify is your CDN caching it or only people's individual computers So so that's that's a great way to set that up as well another cool thing you would want to do in your hdxs file or your your comp file if you're A server admin, you know, you're doing I mean these could all go in either place Turn off e-tags which improves performance slightly browsers have their own methodologies for Cache control this says no don't listen to the browser one listen to what I'm telling you here in this Which makes things a little bit quicker as well and enable compression Really no reason not to do that. You've probably seen this in you know every website speed test You've ever looked at it's like oh, it's not compressed with gzip do that. This is the thing. That's the code right there and You can choose again set kind of what types of files are going to be compressed And and it makes everything obviously much much smaller as it's transferred over the network Greatly improving speed So a bunch of little bullet points basically we have a solution that serves images That are best sized for the device for the viewport that's using them Optimizing both performance and quality Beyond that we're serving images next gen for browsers that can handle it and web pay making those images even smaller And and you know as that's positive lazy lazy loading images for just in time reducing the initial page load, which is huge hugely important And greatly improving the perceptual page speed we're loading an extra small representative svg image first and Reducing that perceptual space page speed even more and finally we're telling browsers to cache Whatever content we think is valuable from the cache Which usually images is a great thing to use that for so that repeat visitors aren't downloading a Whole bunch of additional content that they've already downloaded before And I guess that's the methodology You guys have any questions? Yeah, so it's so the question was How much would it help to have the svg representations of the images like what's the difference there? So it really just depends upon what your smallest version of the file would be if you didn't do it Across every image file on your website, so if your 180 pixel version and the examples I gave of your ping was 15k or 20k and the SVG version was three or five k which is you know I'd say kind of a reasonable differential in size there and obviously that scales depending upon What size the images? You know it could make it the decent difference if it's 10k for image number one And it's 10k for image number two and you've got 50 images on the pages on the page You can end up saving a megabyte. It really just depends kind of on the page layout and everything But you know again to me I just feel like wherever you can optimize There's value there and 180 pixel image that's actually displayed on the page it You know 500 pixels wide or 800 pixels wide. It's gonna look terrible anyway So kind of a scalable blurry version is better than You know giant pixels that are all stretched out and stuff on the page You know for that brief split second before the actual image loads. Oh, yeah, I'll talk to you after this week. Any other questions? Yep Yes, so the question was are there any good solutions for Optimizing responsive CSS background images Yes, that plug-in lazy sizes does something for background images I can't remember if You implement it in your html code or if it will actually work with your CSS file But there is Basically something that works in a very similar way to the kind of source set thing that we're looking at here as like an on page image That works for background images as well. So I'd say I mean again the documentation for that plug-in is super Broad and really, you know helpful and they definitely have things for background images specifically anyone else Yeah, yeah, so webp does not work for all browsers It only works for Google Chrome and Google Chrome on Android as far as I know right now I'm sure there's a possibility that will be adopted more broadly by other browsers But again really the only you know You obviously have the references to those webp images But the way this is set up in this plug-in the browser taking the file format that works with it That's the best size for the situation So you're offering webp if the browser doesn't know what to do with webp just ignores those the code is there But it's pretty minimal compared to all the filibates you're saving by optimizing as much as you can Cool. Um, any other questions? We're done. Okay. Cool. Yeah, so if you want to download the PDF It's right there or if you have more questions feel free to email me be happy to share some code whatever. Thank you