 All right, so though I'm gonna talk about making images smarter or a fancier way to say a dynamic image manipulation infrastructure for WordPress You can follow along the slides at that link there But first a little bit about me. My name is Russell Heimlich. Heimlich like the maneuver I like to dress like a hobo when I work and dress up fancy when I play Ryan mentioned earlier. I'm really developer at spirited media. We're a small local news startup We have sites in Philadelphia Pittsburgh and Denver And we might be a small team, but we sure do produce a lot of a lot of images So every day we publish multiple articles and in those articles. We have at least one image So if you do the math that adds up to be oh, I don't know over a hundred gigabytes of media that we have stored You know in our WordPress media library, so Well, let's get to the problem first So the problem is we had a redesign and in a redesign the layout changes and when the layout changes We need different sized images and nothing Strikes fear into a WordPress developer when a designer says can we just add one more image size, right? Because the way WordPress works is you have to when you upload an image it takes that image and it Crunches down smaller sizes and if you need to if you need add another image size You then have to crunch them all over again because you wouldn't want a huge image to appear in the spot Where smaller one would do Right, so there are ways to handle this there are plugins for it There's command line tools for it and so we took that route with this redesign that we were working on and So we went ahead we hit the button and we waited we waited for it to crunch Any guesses how long it took us to wait Three days later we finally had gone through all of our media and crunched it to the sizes And that was only two sites and we have ambitions of taking over the world and this does not help to take three days to Re-crunch all media. It's only gonna get worse Ain't nobody got time for that So why do properly sized images even matter right? Why can't we just use a bigger image in in place of where a smaller exact size would fit? And the answer to that is speed which has been a common theme that we've talked about in all the talks here My favorite analysis of this has to be this tweet which compares the size of websites to the size of the original doom install file so the web's getting bigger and bigger and bigger pages are getting larger and larger and larger and You know speed is a big issue. It's a big barrier to people in the web So serving the right size image for a given screen it decreases the bandwidth that's needed to load your page It decreases the download time. It uses less CPU power thinking mobile devices because everyone's accessing things on the web on the mobile phones now And it results in faster page load times to use the right size images at the right time And ultimately that gives us happier readers and happier readers are more likely to give us money and to support what we're trying to do So what we need to do is we need to be able to find a way that we can scale images on demand That's that's what we need for this problem, and there are a couple of solutions out there So there are commercial services like cloud and airy. Thank you word camp sponsor and image IX But they cost money and we're a startup. We don't have much money and we're a local news startup So we really don't have any money So those are kind of the question for now. There's a free service from jetpack. Thank you word camp sponsor They have a product called image CDN which is formerly known as photon that probably could do the job But we don't really want to rely on a third-party service that's giving away their thing for free because if they change it We need to be in control a little more So actually there is an open-source solution made by human made. Thank you word camp sponsor I didn't plan this at all. It just happened So they have a product that's called tacky on and it's based off of photon Which is what jetpack was using and it runs on AWS architecture, which is actually what our websites are working on So we set it up and it was working. Okay, but we ran into some issues with it I'll gloss over all those details conveniently because it's only a lightning talk But if you really want to know you can come talk to me after this So what we did is we forked it and we made our own version We call it tacky on at edge And here's kind of a brief overview of how it works So our CMS our WordPress site uploads all of our media to an s3 bucket so all of our images live in one place When a user access accesses an image it hits this cloud front CDN And from there we can make a decision on what we want to do with that request So using lambda at a lambda at edge which sits on the on the edge of the CDN there We can actually make choices we can say Hey, we can resize this image We can check if there's a cast version of this resized image and then we can serve the the request appropriately So all that really means is that if take this this is a lovely original image here And we can easily transform it just by adding a query string to it So what we're doing here is we're resizing it to be 300 pixels wide and 600 pixels tall. We're flopping it Horizontally and flipping it vertically and we're inverting the colors so This means now we can get any image size we need on demand without having to crunch through our entire media library If there's any change requested from design, we can just implement that change right away It makes things a lot more flexible. There's less friction We can try out different things This also gives us a lot of unlimited source set options So when we load an image we can specify different sizes of images that should load for different screen widths and This creates a much much more performant page So we actually after we put all this infrastructure in place we did a migration for of a site They were just using a standard out-of-the-box WordPress theme and All we had to do was just download all their their media library uploaded to our s3 bucket and then we were good to go and The numbers actually speak for themselves. So this is a graph of the Page size of our images for the home page can anyone guess when we did the migration So there so there's a pretty dramatic difference when you can serve properly sized images And all and this was possible just because we made a small infrastructure change So I'm really happy to announce that at This conference that we're actually open sourcing this so anyone who wants to Dynamically resize images on AWS infrastructure could take a look at it see how it works play with it do whatever you want I was going to try to be prepared and do it ahead of time But then I saw that Chris Van Patten and his talk open source something while on stage So I thought oh, I'll do that too So I just click the button Now I need to enter my password and Now it should be public there So you can go there now and you can see All the instructions and how it works big props to human made who open source their original project that's based off of this and Hopefully it is of use to someone so you can spend less time crunching images and more time doing cooler stuff Thank you