 Good afternoon everyone. Thanks for coming out to our lightning talks today here at WorkCamp Boston. I'm going to be speaking about responsive images here and then Mary Baum is going to follow up with a talk on Flexbox. The two 15 minute talks followed by a pretty Q&A. This is a talk called Optimizing Responsive Images in WordPress. It's a lightning talk about images and pizza and not necessarily in that order. Trust me you'll understand how that all comes together in a day. My name is Kevin Hoffman. I'm a WordPress engineer at a company called WordPress where we work on plugins like Give and WP Business Reviews. So the techniques I'm explaining today I use every day in plugin development but they're just as applicable in theme development and really anyone who's running a website and managing images. So how does images and pizza come together? Really as it turns out a lot of the challenges we face in delivering a great pizza are the same we face in delivering a great responsive image. So we have two goals today. One is to deliver the highest quality pizza at the lowest cost while achieving the best customer experience. And we have a second goal which is to deliver the highest quality image at the lowest cost while achieving the best user experience. Very similar goals. One hopefully you're very familiar with in terms of pizza and we'll use metaphors from that world to hopefully explain something you may not be as familiar with in terms of image optimization. So the first key concept I want to cover in terms of really nailing the delivery of a responsive image is the idea of protecting the original recipe. If you're making a great pizza or if you want someone else to be able to recreate that pizza you're going to protect the original recipe. It's a reliable source of truth that you can return to if anything goes wrong. And for many of us who are taking on image optimization for the first time we want to make sure that that reliable source of truth is preserved because we will mess up and we will want to regenerate images from that original source image. So the original recipe is our source image. What's on screen now is the default WordPress image optimization flow. It starts here with a source image which gets uploaded to WordPress where the optimization occurs. So you may not know this but WordPress actually optimizes all image uploads without you having to do anything just installing WordPress. It's a pretty safe form of optimization but it's still optimization. And what it does then is it generates five image sizes depending on whether you have themes or plugins activated you might see more or less in your own installs. But what it does is it actually preserves the original recipe for you which is a good thing and then it also generates a slightly smaller image size which refers to as large and then medium large and then medium and thumbnail. So if you just install WordPress and drag an image into the media library this is what you're going to see. And it's really important that WordPress is preserving that source image because a lot of plugin approaches to optimize images. They actually affect that source image in ways that we cannot revert back to if needed. So let's keep that in mind as we go forward. So in order to preserve that source image we want to make sure we're never compressing the source image without a backup because once you compress it you've removed data from it and there's no way to bring it back. So we want to protect it but we also don't necessarily want to serve it right because this is probably our highest quality image our largest file size. So we don't necessarily want to serve on our website but we do want to make sure it's there if we need it to maybe regenerate image sizes in the future. And we also want to keep it relatively available in case we do need to go back to it. I don't know about you all but I designed a lot of client sites in my early days with PSD files on a hard drive that that client will never see again. You owe it to your clients and we owe it to ourselves to future group our images so keep that source image available hopefully on the same server as the website so that it's there if you need it. Second key concept is this idea of quality ingredients because you can protect that original recipe all you want. That's a good thing. If it's a bad recipe, if it's calling for bad ingredients it's still going to be a terrible pizza. So don't limit yourself or your chance of success based on the quality of that source material. Some of the things that affect image quality, obvious ones are image dimensions, how large the image is, how much actual resolution you have. If you're starting with a thumbnail size they mentioned in the start, you're kind of behind the eight ball. File type limitations, if you're saving the wrong type of file like a GIF when it should be a photograph of say this is a JPEG, you're limited to the number of colors you can use depending on the file type you choose. So make sure you're choosing the right file type. Transparency requirements and even sharpness. We talk a lot about file size and things like on the computer side once the image has already been captured but so much of what goes into having a great source image is actually the sharpness of the image when it was captured in camera. So finally along the same lines of capturing the photos in camera is the idea of subject matter. I'm going to show you two images here. What is a landscape? Landscapes, things that tend to not have people in them, we can push much further when we're optimizing and compressing them. Why? Because as humans we're hardwired to recognize any slight detail that's off about human beings whereas with all this noise in the mountains you see and in the grass you can't compress that to a much lower level without things necessarily sticking out. So compare this image of a landscape to a human portrait right, pixelation, blurriness, things like that are going to start to stand out to us much faster if we over compress those types of images. So while we ought to think a lot of this process of image optimization there is a human factor. Humans need to make those decisions what type of subject matter am I dealing with? What's the appropriate file type? Do I have the experience needed to generate the file sizes for high resolution displays? Because even with a great recipe that we have preserved with the best ingredients the wrong human and the workflow can throw everything off that comes after it. So some things to consider there. Understand the differences between raster and vector images, does a photograph make sense to be saved as a gift and vice versa. The ability to identify the appropriate image format so beyond just raster and vector but the actual file type I mentioned color limitations things like that before. And the familiarity with preparing images for high resolution displays. A lot of people look at their website and say well my website maxes out at 1,100 pixels that's going to be the inner size of all my source images because it's never going to serve higher than that. Until I open it on my Macbook, there requires an image resolution twice that size. Does that make sense? We should be future proofing our source images so not just looking at the bare minimum today but making sure that we have resolution to play with down the line. Fourth concept is this idea of knowing when to cut corners. You have this recipe in front of you. It's got great ingredients listed. Does it really matter if you get that imported extra virgin olive oil from Italy or does the store-bought stuff in the street? Is that maybe good enough? Do you need the $3,000 truffles or is a few drops of truffle oil? Okay for that slice of pizza. What we're talking about here in terms of images is compression. Lossy versus lossless optimization. Can we get away with not including the full quality of the image that we upload as the source image? Can we serve something maybe a little bit less, much cheaper and faster to our end user? So this idea of lossless optimization is when we reduce the file size by a small amount without removing data. So we're not actually affecting the pizza in this case. It would be like we maybe got a more lightweight pizza delivery box. You could make it lower the cost of the delivery but not actually affect the pizza. Not save a whole lot but still save some. The thing about lossless optimization is that when I'm compressed all of the original data is still there. Just like when you open that shoebox it's the same pizza inside. So as an example, these two images, lossless optimization has been applied to the one on the right. Yet there is absolutely no receivable difference because we haven't affected the data once it's been uncompressed. It's the same image data. If that feels a little bit hard to grasp it might be easier to think of in terms of something like CSS minification. This is another version of lossless optimization. On the left you have the source code and on the right it has been compressed and yet still maintains all of the exact data that you see on the left. However, if I were to go into that minified output and start just pulling out random characters, I'm gonna break that right. And that's what we're talking about when we discuss the threshold or the limits of lossless optimization. In code there is a limit. In image optimization there's not because that's when we get into lossy optimization. It reduces file size by a larger amount as compared to lossless because it permanently eliminates the data. So it's not there when you open the box. It's not the same pizza. We've actually taken parts out of it. So when uncompressed only a portion of the original images data is there and the browser is forced to reconcile what is missing to construct a new image. We'll take a look at an extreme example. Remember before we couldn't tell the difference between the image on the left and the image on the right. This is an extreme example of lossy optimization where someone, some human in the workflow has pushed that too far. In addition to how we cut corners, we want to also start thinking about factors outside of the images themselves, outside of the pizza itself. Things like proximity of delivery. The idea of locating the deliverable as close to the customer as possible to reduce delivery time. If you sit down tonight with some friends and they say, how in order pizza? What toppings do you want? Do you expect them to call the Domino's Pizza in New York City? Or do you assume they're naturally going to call the one in Boston? It seems so obvious to us in terms of pizza and yet so few of us actually use content delivery networks. Many of us are sending our users around the world to retrieve an image only to come back and rendered in their browser. I know when I started out with clients, I was housing all of their images on one server in Chicago because I was like, that's a central place in the US. Then I started getting clients with an audience in Europe, in Asia. In Asia, literally they're traveling around the world to get that image and bring it back to their browser. What a content delivery network does is it stores copies of your images around the world and then delivers the one nearest to the user hand. When that image is requested, the concept, the CDN or the content delivery network detects the closest server and uses that one. Along the same lines, there's this idea of perceived wait time. It's the feeling of how much time has elapsed since the request was made. Notice that emphasis on feeling. We're not actually worried about the real time that has passed. We're worried about how do the user feel about that. Imagine you walk into a restaurant. You give the host this your name and she sees you in a waiting room where you wait for an additional hour. You see other customers come in ahead of you. They're seated starting to wonder, did I ever input my name in? And then finally you're seated at your table and you wait another hour before you hear back about your pizza. You're wondering if a pizza is actually being made and if it is, it better be the best darned pizza I've ever tasted or I'm walking out of here and never come back. Similar to a user experience who comes to your website and waits five, 10 seconds for all the images on your website to load. But imagine you walked into that same restaurant and instead that hostess said, I'll come over to the bar and have a complimentary drink. As soon as you're done with your drink, your table is ready. Pipe me hot, that basket of garlic bread is ready for you. As soon as you finish the bread, the salad comes. And just when you're ready for it, just when you start to think about that pizza, it arrives at your table. Same elapsed wait time but the feeling between those two situations is completely different. That's what we need when we talk about perceived wait time. And we can accomplish a similar goal using something called lazy loading. So lazy loading with images allows other elements around the image itself to load first. And therefore creates a more immediate feeling of activity. We've not actually changed the makeup of the image in either case, whether we are using lazy loading or not, but we're allowing these other things to come into frame and make the user feel as though things are going to be faster. We're bringing the salad in. We're bringing the breadsticks. We're making that user feel as though a process is underway. So what I've included down here is a brief example of how lazy loading works. Because this is a lightning talk, I'm not going to dig too deep into that topic. But I have shown basically what happens if you keep your eye on this source and source set values. You'll see that it changes from data source and data source set to the actual values when it's time to load. If you'd like to read more about that, I've included links to a great article that I'll share in these slides afterwards. Explains all the details about lazy loading, as well as a new theme called WP raid, which is using that exact approach to lazy loading and a starter theme for WordPress. So if that interests you as a developer, definitely check it out. And as I was talking with my team, you know, they said you've got to come up with a pineapple pizza metaphor. So here it is. This is a little bit controversial and it goes against a lot of recommendations I see, but I recommend that you please stop optimizing your images before upload, or at least at least stop over optimizing them. See, if we go back to that original example where you upload an image and the source image on the right appears and it's preserved, the rest of the images on your site get an 82% image compression applied to them by WordPress. But if you decide you're going to go ahead and over optimize that image to start with, guess what happens? The only image that actually sees that compression is the full image. All of your remaining images still get an 82% compression applied, except it's not happening based on that original recipe that's based on this already over compressed image. So you're not doing yourself any favors by by compressing the image before upload. How do we fix that? Use that original recipe, upload it and perform your optimization after upload is that's when the full image, the large medium large and all the sizes below it will get that same level of image compression. So with that said, that's my final factor. My final key concept to be aware of image optimization. So I encourage you to go through this checklist in your head. Make sure you're preserving that original recipe. Make sure you're using quality ingredients. Make sure that all the humans involved have the experience necessary to not throw off the rest of the process. Make sure your cutting corners intelligently. You know, using that loss list and lastly optimization we talked about. Make sure you've got multiple delivery points in place so you're not going around the world to get a single image. Make sure you're creating a fueling of speed using lazy loading. And make sure you're optimizing the right time after upload and not before. Thank you very much for coming out today. You have a couple questions you can take very quickly and then Barry's going to come up for her talk. So there are a number of plugins and I'm not going to recommend a specific one here. But I would say go through that checklist. Make sure that the features offered by those plugins hit those points and I'll be happy to talk specifics with you after that. Sure, I can do one more and then I have to get to Mary. How do you make sure that you have the CDN? So probably one of the simplest approaches would be jetpacked. If you use that plugin and you enable their image optimization, they'll go ahead and generate images on their CDN. But there's also Cloud Slayer, which a lot of hosts will offer for you to set up. So I'd recommend looking into both of those. Alright, thank you very much, everyone. Please stick around for a minute.