 I'm going to be talking about responsive images in WordPress without a plug-in. So without a plug-in thing is a little bit of a caveat. We will be talking about plug-ins, but I really want to break down the technology for everybody so that we can all understand it. So when we do choose a plug-in, which we probably will, we're going to know which ones to choose and why we're making those decisions. Okay, bam. All right, the overview. First of all, we're going to talk about what is retina or high-density pixelation. Why is it important? What are the two methods that have been approved to deliver different density images? What are polyfills and JavaScript requirements and how those work with the two methods? How to do it inside of the WordPress media library and then how to update your image tags with the new source sets in order to deliver that right thing? Okay, so just for, you know, why no plug-in, just real quick. I really want you all to understand the problem and you really understand the solution. I think we as developers, designers, front-end people, we constantly have to solve all these Rubik's cubes. We constantly have all these little things we have to figure out for ourselves. And if you just slap a plug-in on it and you don't understand it, then you might not be choosing the right one. So there we go. You also get a better understanding of how your code works and it's not really a house of cards waiting to fall apart if one main plug-in doesn't work. So just choose your plug-ins wisely. So what is retina? Okay, high-density pixelation, QHD 4K, 5K. You've heard all these terms probably thrown out at you. That video we just watched was one of the most high-def mobile phones out right now. It's, you know, quad HD. So it's actually four HD screens on one mobile phone. So what does that actually mean, you know? It's basically two things. It's the hardware and it's the software. So the hardware, it is physically close. Pixels are closer together. So this is the old school screens and this is more looking better modern screen. So we can see that it's the physicality of it. You know, it's actually a thing. We can't just turn it on on our new monitors, right? It's a type of monitor. So that's another thing you have to think about when you're testing this stuff and when you're actually trying to build something for it. Seeing is believing. So you can mimic it with your browser. You can open up your Chrome settings and say, emulation. I want to emulate pixel density, too. And then you'll see the certain things happening that needs to happen. But it doesn't actually render any differently. You're not going to see anything differently. If you really want to see what a high-density screen looks like, anyone that's got an iPhone 5, iPhone 6, it's very clear, very crisp. It's because they have these new retina displays, okay? And there's also a device lab. If you need to test something and you don't have the devices, try and find a device lab. They're usually one in a city and you can go and test all the devices. So when you're building this stuff, try and get your hands on the hardware. That's going to be the main blocker of everyone trying to test these things, right? Is getting the actual retina screen, getting the actual high-def screen. So the word retina is actually copyrighted by Apple. So in the hopes of better open-source community, a sharing software, let's stop calling it retina. Maybe let's start calling it HPD or let's start calling it QHD or 4K, something else so that we don't give Apple that ownership of that whole technology. Because there are many other screens that have that. And we don't want to think that we're just building for Apple, right? But if we go to the Apple's website, this is exactly what they say. 2012, they came out with a 227 pixels per inch. And then in 2015, they came out with a 226. I don't know what happened to that last pixel, but they lost it over the years. But that just shows you that they've been in this technology game for a while, right? Since 2012, they've been giving us this product. And the technology is just now starting to catch up. You can see interesting talks in 2012, 2013, 2014, where they're still discussing how we're going to solve this problem. And they've kind of come up with a couple solutions, but it's not quite there yet. So it's technology that works, but it's still a little iffy. So it's actually physics. The number of pixels needed for clarity is calculated by the distance of the device and the angle at which the device is held. So phones, we usually hold them a lot closer to our face. So we're going to need more pixels because we don't want to see the pixelation. We don't want to see the little dots. We want it to be a crisp, clear image. And if you hold it at different angles, that's going to affect how the image renders with your eyes, how the light actually bounces off of it. So that's why cell phones usually have the highest density because it's going to be right there in your face. You're going to be holding it at weird angles. You're going to be driving and texting, which you shouldn't be doing. And you're going to want to see what it says at a weird angle. It's actually a growing trend, right? We can see 2,004 percent of people were on a high density screen. Now, we have 32 percent. We also have 33 percent over 1,300 pixels. So this is going to be a continuation. This is a technology advancing. This is software. This is hardware. This is not as HTML and CSS. This is a thing that people are actually investing in as a solution for crisper, better devices. That's how the hardware works. We have any questions on the hardware? Also, there's a racquetball practice up here. It's been going on all weekend. So if you hear a lot of weird noise, the software. So the software, it just zooms in. All it does is it takes the same thing we're expecting to render and we're going to zoom in on it so that it renders the normal aspect ratio we're expecting. So if we went to cat-bounce.com and we wanted to view it on an old screen or we wanted to view it on a new screen, it's going to still render at the same widths that we expect it to render according to the ratio. Now, when you get responsive, it's going to get more complicated. But think about it like a 100 pixel image. If it was rendering on a really dense screen, that 100 pixel image would be really small. But the users don't want to see that. They don't want to care what screen they're holding. They want to just expect to see the same site at the same size. So what the retina does is it zooms in. It double-exes it. It actually renders everything twice as large. So now we get to see why images in our blogs look really bad on retina screens because they're zooming in on it. And anyone who's ever zoomed in on a small low resolution image knows that it just sucks. It turns into like potato quality is what they call it. So and that's where the 1x, 2x comes. It's like how much are they actually zooming in on it? And that's based upon the ratio of the density of pixels. So it's a little bit of a mathy there. Okay, but why is it important to us? Why are we here learning about it? Why do we care? Speed, weight, performance, all these things are UX, user experience, how they're actually interacting with your site, how fast the page loads, how crisp it looks, and whether or not it looks good for all devices. So Google is all about this, right? They're actually giving you a site, speed site analysis inside Google Analytics now. They're actually ranking sites based upon how fast they load and how well they load. So how good their code is. And if you just give everyone the giant image, you're bloating your site and you're slowing it down. So it's not the right solution, right? The payload is actually really interesting too because we have our mobile devices, some of them are not, you know, high res. So we can't just say, oh, this is a mobile device, give them the big image. Also a lot of mobile devices are linked directly to bandwidth usage. So we're going to be giving them, we're forcing them to download more even though they're not using it. So we're basically forcing them to spend more money on their phone bill. There's that direct connection of the payload and what we're actually delivering to people and the actual cost. So that's, it's big. And in the future we're going to be able to detect whether or not someone has a certain type of phone that they want to download high res. That's coming to be, that's coming down the road, but it's not here right now. So let's talk about the two solutions. What are the two solutions that we have in place that we can start using today that work and why are they confusing? Because they're kind of confusing. So the first one is the picture element, which is going to make more sense because it's visual, breaks things down into pieces. And the second one is the source set. And the source set can be a little bit more confusing and we'll dive into that. So the picture element. So the picture element is an element, this is actually from developer.mozilla.org, you know, it's a container. So we think about if anyone uses the figure tag, it's the new HTML5 tag that you put images in. It's like an image tag. It's a container that contains other tags that tell us when to load this image based upon the device. So right here, this looks like a media query. Anyone who's ever dealt with media queries inside of CSS, so you know that looks really familiar, right? You're saying at this device width, we're going to deliver this image, right? But it's not really a media query, it's a media condition is what they call it because it doesn't have, it doesn't have all the power. You can't get access to is it print? Is it screen only? This is strictly a limited scope of what the width is. And also inside of here you can do pixel density. So pixel density is the media query you would use to deliver the 2x image. Because again, we have to deliver twice the size image for every image now, for the retina screens. You can stack them as many as you need and then at the very end, you have the thing everyone knows, right? The image tag. It's still there. It still works. But some browsers don't like it when you wrap this picture element around this image tag, some of the older browsers. So you have to provide solutions to fix it. Also, you only need one alt tag, which is nice, but you could also add other alt tags as you need for your different sources. Because the picture element is way better for artistic representation of your design. So art direction, right? And this is a great example. This is actually pulled off of, I think, medium.com. And how we would deliver a device picture normally, right, is this. Hey, it looks good on your big screen, but it looks dumb on your phone. So with the picture element, we can say this one is what we're going to have on our phone. And this is the one we want on our desktop, right? And that's why it's strictly art direction. It deals more with what is the device we're looking at and what we're trying to deliver to the person is a perfect picture. And it's a focus direction just for this device. So it's kind of more of an adaptive approach. You're adapting your content for the device. And that's why they say it's more art direction. It's not really just for delivering a high density image. A con is there's more coding involved. We have to actually type more things out. We have to make sure our syntax is right. We have to check our stuff. And you get this weird ifie9 or less video style display none fallbacks. And that's just so you can get your image tags to work correctly. So you're going to have to do really weird code that if someone didn't understand it and was trying to read your code and look at your site, they would be confused, right? They would say, I don't really understand this. So it's compatibility. This is its current compatibility. And we can see that the new new IE that's going to be great and solve the world's problems is not even supporting it. So what does that even mean? We also have Safari. Safari is like, nah, we're not supporting it. And you think iOS, iOS Safari, they're not supporting it. And that's one of the main drivers of this high def technology. It's just a little confusing because it's because there's another solution and they've kind of been battling it out. And we're going to talk about that solution right now. It is the source set and sizes attribute. This is a lot of content here. And I put it all up here because it's confusing. The source set and the sizes together can be kind of confusing. It's a weird syntax. And it has very specific markup. Now, the markup is a certain way because the way a browser works. So the browser is going to read all this string content as a DOM. And as soon as it gets to an image, it's just going to immediately start trying to download it. But we don't want that because we don't know what type of device it is yet. The load times don't really work out, right? So that's why we have to actually put these different sources in a source set. We have to say, wait a second, don't download everything. Here's a list of sources. Check your pixel density. And then give me the right one. So, if we look at that in action, it's a big old image tag. It's not as much markup as the picture element, but you're smashing all that logic into two attributes, which can be really kind of confusing. The first attribute right here is sizes. Now, sizes has been added on. So first of all, source set came around and it was just for density. It was just so that we could have... So this is saying this image is 280 pixels wide. This image is 1220, right? So if we're trying to render an image at, let's say, keep it simple, at 300 and it's a 1x screen, then we're probably going to go with the 430 because that's closest to 300. But if we were trying to render something 300 on a density, high density screen, that's 2x, then we're probably going to go with the 610 because that's 300 times 2 is 600. So it's doing all the math for you. You don't have to put in your retina queries. You don't have to say, if pixel density equals 1.5, like you would with the picture element, it's going to figure it out for you and it's going to give you the right image. And it does that even if sizes is not around. So what does sizes do? Sizes is the media condition. We're back at these media conditions. It's not a requirement. If you don't have to have this tag, if you just want to deliver the high density image, it's going to work immediately. But sizes... Sizes is saying at this device width, this picture is going to render at 610 and that's just... It gets kind of muddy. I feel like this is where it starts getting really confusing because it seems like you're declaring visual representation like you would do in your CSS inside of your HTML markup. It's a little weird and I would say unless you have to do these sizes, unless it's very important based upon your design, just don't do it. Just let the device handle it in the source set. Let it say, okay, this is 610 and I'm on a 2X image. The screen's 300 pixels wide. I'm going to give you that one. Don't try and figure this out unless you have to. Unless you're trying to say, I only want this image to fill up this little spot on this screen. Try and do that more with CSS. When you start getting sources, source set sizes and CSS mixed together, it gets very confusing very fast. So is the source set ready to be used? This is looking a lot more green, right? We see a lot more support. I mean, out of the box right now, we've got Safari. We've got all iPhones. We've got Android browsers. We've got Chrome box. What do you know? We're going to get IE. It's going to happen. Opera. Yeah, I don't know what opera mini. I think that's for when you want to have open source mobile devices. I think people use opera mini more for that. It's like you're actually building a phone. You want to ship it with a free browser. People put opera mini on it. So that's kind of, yeah, into their browser. Yeah. So not a lot of people use it, but it's out there in the world. So that's kind of nice. So what do these things mean? This actually means they don't accept sizes. This is only accepting the source set. So we can see, even though we're getting IE, we're not going to get sizes. It's just going to say, here's your source set. Okay, we'll deal with that. We've dealt with that for years. We've got it. So how do we make everything green? How do we turn all those red blocks to green blocks? They're called poly fields or JavaScript requirements. So it's not an enhancement. It's a regressive enhancement. We're just getting these old browsers to work right along with the current browsers. We're not giving them any new technology. We're just saying, hey, old guys, can you just please do this because we're all doing this too? And JavaScript fills those gaps in. So Remy Sharp, I guess, is the guy that he came up with his term, polyfill, and he blogs a lot. Really great guy to follow. He says, a polyfill is a piece of code that provides technology that you, the developer, expect the browser to provide natively. So again, we're not really doing too much more. We're just filling the gap, filling the holes until it works perfectly. So then once those browsers stop being supported, we just remove that library, the polyfill, and everything works. We don't have to go back in and change our code. So that's why polyfills are the nice way to go. But no matter what, if you don't have the source image tag, you're going to have to use JavaScript. So some of these fancier new solutions that might not use the source image, I wouldn't go with it. Just be aware that any plugins you use are using at least an original image tag, because that's your default fallback, no matter what. So if they have their JavaScript turned off, the image tag still needs to be there. So here are some main, three main supported polyfills. And the one that I've used a lot is Picture Fill. It's made by the filament group who does a lot of responsive, progressive polyfills. Another one is RetinaJS. This one I've seen people just dropping on their site where we talk about it in a minute. I wouldn't recommend it. And then there's Adaptive Images. And Adaptive Images seems to be the most labor-intensive when it comes to setting it up, but also once it's set up and works, it's the easiest to manage. You're actually going to be using a HTTP, HT Access Rewrite Rule that's going to rewrite all your images to this PHP file that's going to generate your different sizes and cache them on your server for you. You don't have to think about how it actually works. It should just work on its own. But then we have to realize that it's going to be rewriting every image so we're going to be more server-intensive. It's actually going to be sizing all our images for us so we don't get any of that picture element style. There's no art direction. It's just resize it, resize it. So if you're going with Adaptive Images, it's probably best to do it for your post content or your pages content. It's not really best to do it for maybe your featured image, which tends to be a little bit more art direction. So the picture fill, it's well tested and it's well supported. But the con is it takes a lot of markup because they're kind of wanting you, they're pushing you to use the picture element more than the source set. So you're going to have to do picture element markup, which is kind of not fine. The retina JS is you just drop it in and it just loads on your page and it fixes all your images magically. It sounds like magic. It's too good to be true. What it actually does is it does an XML HTTP request and get the head for each image. So if you had 50 images on your page, it's going to do 50 head request and it's going to do 50 get request. So you're looking at 150 HTTP requests for just 50 images and anyone that knows anything about page load, the fewer HTTP requests, the better. So that's why I started using retina JS and then immediately found it to be not a good solution. So I wouldn't go that way. The adaptive images, I'm not used it myself, but it seems pretty smart, right? It seems like it's taking the server. It's doing rewrite rules. It's generating stuff using PHP image library. It's caching it and then it's delivering it. That seems like a good solution to me. I'm never used it inside of WordPress, so I don't know if it would conflict with the WordPress HT access. Just don't know. It's throwing that out there. So now we actually dig into WordPress and how we're going to start integrating this into WordPress. So WordPress has a really nice page for setting your images, your image sizes. It's called WordPress media image settings, right? How many people have gone into that page and set up their own image resizing? Yeah? Yeah? A lot of people? Yeah. It's really nice because you can give them the thumbnail, you can give them the large image, you can give them the medium image depending on how you want to deliver it. So if you take this power and mix it in with your picture element, you're pretty much going to be able to deliver any size image you want to any device. Here's an example of how you would actually set these ratios. And we noticed that the thumbnails, they want you to crop by default. That's really up to you. It's a decision you got to make as a designer, as a front-end developer. I usually don't do it unless you're going to be cropping smart and you can actually set your crop settings to crop left, right, crop center. But out of the box, you get three sizes. So think about this. The original dimensions is 580 and the original dimensions of the other one is 2,400, right? If we upload a smaller one, it's not going to give us the big guys. It's only going to generate this. It's only going to generate the original and the ones that are smaller than it. If we upload a big guy, it's going to generate the original and all the sizes that we've defined in our media library. So that's why we want to upload the biggest image we can and then we're going to deliver the right size based upon the device. This is my solution because WordPress already does it, right? It already does it out of the box. It gives you these options to resize your images. So you're not depending upon HTX free rights and caching and PHP delivering these images. WordPress already does all that for you. But as a designer or as a front-end person, you need more sizes, right? There's always somebody out there that's like, well, I need this size. I need this size of image. I need this size of image. It's actually really easy to add a new image size when you're updating your images here inside of your functions file in your theme folder. If anyone's ever opened up their theme folder and seen their functions file, you can go in there and you can add these few lines of code and says, hey, this is my new HD size, right? And then right here, this filter is actually going to give you that drop-down in the admin to select which size you want to use. So that way you can say, I want to upload my high-density picture and then when you go to select which one you want to show, you can select from a drop-down high-density picture. That's it. That's all the code it takes. It's not a lot of code. So how do we actually update the image tag inside of the post? So there's a few different methodologies. First one's a lot of hard work. Second one's short codes. And then you have featured images, right? So the hard work. You can actually go in and get your sizes off your FTP or off of your image library. You can just do the little drop-down that shows you your sizes. And then you can actually put them in there yourself. You can say, here's my source set. Here's my size. And you're done. And it works. It doesn't break anything. It just works. So I mean, it's crazy. I was testing it out with IE8 doing this. And it didn't break IE8. And it just worked. I mean, I didn't have to do anything. I just opened up my WordPress. I looked for my right image settings. I put this little bit of extra code in. And I've got responsive images delivering to the right device based upon pixel density. It really wasn't that much hard work. But when you're dealing with a lot of images on your website, it can get more and more and more overhead because you actually have to go in and do this for each image. And this is more for post images. We're not talking about your featured image. That's going to be a little slightly different story. If you wanted to do a short code, you could actually do a short code to generate a source set. So again, this just lives inside of my functions.php file. It looks like it does a bunch of stuff, but it really doesn't. It's just getting the sizes that WordPress has and my new size because that function is going to pull back my new HD sizes. It's going to go through each one and it's going to generate this source set string. It looks like a bunch of confusing junk, but it's really just taking image sources and widths and generating argument to a string with a comma. And that's what it looks like inside of your WordPress post. You just put your little attachment ID. So each image you upload has an ID attached to it and you can see that in your media library. You just click on the image. You look at the URL and it tells you what the ID is. So you can do that and then it's going to generate all this garbily glup right here for you automatically. And again, it's just going to work. You don't have to go and add any JavaScript for this. It's just going to work. That's what I think is really amazing, kind of blowing my mind at anyone who's dealt with new technologies and new media queries. You think how many times you have to go back and fill it in with JavaScript. You really don't have to do that. It's just not going to work on older browsers, but it's just going to work here. So what about your featured images? Your featured images, they tend to be more of an artistic direction. And so now we're going to be using the picture element. Now when you're doing your featured images, you can say get image and put in any size you want. You could do HD-screen like we did before. You can do large, small, thumb. This is doing that here. I just abstracted it out to a variable. It's not doing anything different, just giving me the image right there. And I'm setting my media queries of which I want it to render. And of course, because we want to be compatible with as many websites, we're adding in this crappy IAA video tag. So that's featured image basically. We can use our featured image now in art direction to give us any images we want. But it's a little bit more work. So if we put that inside of a function, I'll show that next. It's getting a little heady in here. I know it's a lot of code, but it's going to be awesome once this stuff gets built into core. And I think it's coming soon. So this is an example of how I would do ad markup. This is actually some code I took from something I'm actually using in production. So this stuff is out there in the wild. Sites are using it. People love it. Now, the picture element is really good if you're trying to serve ads to people, because you could serve a totally different ad based upon the device. So if you have five different ads, and one ad is like, click here for mobile, click here, but you're on a mobile device and there's no click, that ad wouldn't make sense, right? You'd say like touch or tap here. Maybe you're going that direction. That's more of the adaptive approach. And that's when you're starting to use picture elements. And all you're doing is just passing in your sizes and spitting out all this markup. It's very similar to what I showed before. It's just in a function. So that's all that is to it. So just, that's pretty much it. I'm just going to go over what we've talked about. So the high density market share, it's going to continue. It's going to keep increasing. This is going to be a continue problem. This isn't something we can just forget about, right? We as developers and designers, we have to deliver the best experience for everyone. And we're really talking about mobile devices being the most high dense, but also being the ones that are linked to download usage. And maybe they're not on their Wi-Fi and their 3G is not working that well, but we're still giving them the 2X image. So I feel like there's some muddy water that we haven't quite figured out yet. But if the image looks bad on your phone, and it's a site that's trying to sell something, let's say a digital product or a cool t-shirt or some art, then they're not going to come back to your website on their phone. So it's important to decide when you're going to be delivering the 2X image based upon what you're actually selling to the person. So W3C, they're going to continue to refine these solutions, right? They're going to make them better. But for now, that should say Sorset. I think it got auto-correct in there. Not that Sorset. I hate it. It's like, turn it off. So the solutions are out there right now in the wild and they work. You don't have to do anything. You don't have to write any JavaScript. You just have to put your mark up in there and the HTML and it works. So why not do it? Go ahead. Now, JavaScript will help you with all the older browsers. But when the older browsers become defunct, we're not using it anymore, you just take that JavaScript out and you don't have to change anything. So that's why we're going with the regressive enhancement, the polyfill method. So keep that in mind that you might be adding this extra code right now, but in two years, you could just remove it and nothing's going to break. That's what's important. So the WordPress media settings are really, really powerful. You need to try to get in there, figure out how to set your own image sizes, figure out how to add your own image sizes, and then work with it. You don't really want to butt the system if it's working for you. It looks a little confusing to PHP, but it's really not. Just a couple of lines of code. And then also, the image tag post can be a struggle. Short codes help. But in the end, you're probably not going to want to update all your image tags by hand. You're going to want to use a plug-in. So at the end of this talk, we could talk about plug-in solutions. There's quite a few out there, and the best ones use all the different methods and falling back to JavaScript if it's only needed. But I really wanted y'all to understand the problem and understand the solution before going out there and picking just a random plug-in, like retina.js, which is going to increase your HTTP request, which is not good. The picture element, it's your friend, and it's going to be the best when you're dealing with design. When someone really wants to deliver a cool design based upon the device with, then you're going to start dealing with your picture element. But if you're just trying to deliver retina or high-density images, you're really going to want to go more with the source set. You can get into the source set and sizes, but that stuff starts getting really confusing when you're mixing in your CSS sizes with your source set sizes. If you're not doing it for art direction, just go with the source set, leave the sizes off. Finally, like I said, there are many plug-ins. We could talk about those, but just know why we're doing this and why we're plugging this piece of code in and not doing it ourselves. Understand the solution, which I hope we've all kind of got our head wrapped around what it actually means to deliver responsive images. It's kind of confusing, so that's it. That's all I got. Any questions? Let me see here. Let me see if I can change my display settings to mirror real quick. I actually installed a fresh copy of WordPress just in case someone asked this. So we can see, and I was doing some testing out here on the same image, and we can actually see what I was doing there. Again, see very fresh, just one. This is it right out of the box. So what I did here is I've got my image tag, and what I did with my short code, I just put in my source set. That's a short code I wrote that generates this code that has the source set up there. You can do that, or you could use a plug-in that's going to do it for you. Or if you wanted to do the easy way, the easy cheesy way that just works right out of the box, you could just click here, and you can actually see their different dimensions and see your different sizes. So this is going to be that size. So if we find our other sizes, which would be here, let's go back over here, visual, we click edit. We can see we have our sizes right here and our different density pixels. This one's not rendering right for some reason, but you could see these are your different sizes. You could just take that image and add your different size. So if we click here, we should get the different size, right? That's not going to do it. So if we update it, when we look at our source now, we can see this is a different image size right here. What I was actually doing was looking at it for an FTP. Do you ever use FTP? File Transfer Protocol. So it's just a way to look at the images on the server, and it has a list of them. You can copy them and paste them into here in a source set. So if I wanted to, I could say source set, let me get this image, and if I come back here, edit it. This is kind of the tedious way to do it. Let me see if I still... So then I could take this one, say 300. And there you go. If you save that, it's easy. It's like that. No, you don't have to. So the image tag can just take a source set. And the source set takes a URL, a space, the size of the image. But you could also replace this with 2x and 1x. And then your device is going to read that x and deliver that source based upon the device. The picture element is used mainly for media conditions, saying at this max width or this aspect ratio or anything else, media queries you can do, basically. That's when you start using the picture element, because you're actually going to want to deliver a different image. And the source set is kind of assuming that you want to just do it with densities. You're delivering the same image at different resolutions. That's the difference there. But with sizes in source set, you can do the media conditions. It just gets more confusing. Yeah. Yeah. I was looking at them the other day just to see which ones did good stuff. I think adaptive images is the one that we showed before that does the rewrites and it generates the different images for you. But you're still going to want to upload the largest image possible. And I'm not quite sure how adaptive images reads the tag of the width and delivers which one. But that solution is good because it's not JS driven. It's actually driven by a server process. So if someone has their JavaScript turned off, it's still going to work. Here's another really good one I saw. Did you say one? This one was good. RICG1 is supposedly like the officially WordPress core supported one. R-I. Right here. RICG. Yeah, it's... Yeah, the responsive image group. Yeah. I played around with it. I got to get up beta of it. It ended up... I ended up writing something because it hadn't been coming. But for... What was it? Yeah. What was its technology? Is it like just replace? Was it do like a... It does. It doesn't provide any hooks or anything. But yeah, it's for someone who wants to deal with the post, inserting images into posts, this one is really great because it hooks into the normal media insert. And so you would upload it and just add a post like you normally would and it inserts all the code that you just saw him hand copy paste right. So RICG is this group of people, volunteers coming together to try and figure this out. So if they're the ones writing that code, that's probably the most trusted source I would go with these guys. And there's whispers of this being... Encore. Encore and like WordPress out of the box. Okay. But you know, you hear rumors of that all the time and then it gets dropped for some reason or another. But it seems to be the... It's not gonna... This technology is here to stay. So I'm sure they're gonna have to have some type of solution. Did you have a question? Yeah, when you take the larger image, 1000 by 1000 and you downsize it like you just did, does that mean just the smaller number of pixels are gonna be sent out to the user or are you still sending that large amount of data? It depends on the actual image on the server, right? So if you actually went to that image URL inside your browser and it was a big image, it's gonna be delivering that big image. If you have 100 by 100, right, and you're on a retina screen or high density screen, you're gonna wanna deliver a 200 by 200 because they're zooming in twice on it. So there is some aspect ratio stuff that it contains and manages all for you. But if you're giving them the small image, you're giving them the small image. If you're giving them the big image, you're giving them the big image. There's no magic behind the scenes that's gonna give them the right image based upon the density. It's that source. It still works like an old school image where you can look at the source and grab it. That's what I kind of like about it, okay? Any more questions? Can you talk about sizes? Is it really confusing? All right. Okay, I've got one more question. Yep. All right, so I've been uploading small images so that my website loads faster and you're saying don't put big images on it. If you have the technology to deliver the right image, so if you install a plugin, like the one we just talked about, yeah, if you install a plugin and then you upload the large image, it should deliver the right image for you. But if you're not dealing with your own markup, you could probably be delivering the big image and you wouldn't know it. It's all about the picture element and the source set. So you're gonna have to use a plugin. That's what I would suggest. If you have the technology in place to give the right image, so make sure that technology, yes. I'm just making sure that, but just make sure it works. Because I've installed plugins and they don't work. So that's what I'm saying, like I don't want you to go upload these giant images in your site slow and you're like that guy at WordCamp, he told me to do this. It's the simplest one I saw because it gets confusing and seems like the closest to the SPAC, meaning what everyone is going to be supporting. The RICG. RICG, yeah. They have a website. You can go look at them. They're like personal stuff. They write. What is too large of an image to start with? I don't know. I just built a site that has 1,800 pixel wide images. Because a lot of these designs are going full width now. So you want it to look good on these big screens. So if I was dealing with a high-density screen, 1,800, I mean we're getting to 36. We're getting huge image. So I don't know if there is a too big image. That's why this solution is kind of iffy, I feel, because we're giving them these devices that have high density like a phone, but then it has to process more to actually render that image because it's so much more memory. It's a confusing issue. Yeah, always optimize your images. And that means when you take a picture, it has a bunch of metadata in it. You want to scrape that out. There's image optimizers online. It says optimize this image and it just basically removes all the information you don't need. So if you're not doing that, step one, do that. And then step two, add this responsive plug-in. Then step three, upload the big image. Anyone else? Yes. I don't know. So the way the internet works is kind of a bunch of dudes sitting in their own pools discussing how they want to solve these solutions and then they get together and they fight about it online. And then after they fight for a while, then a spec comes out and a spec is like, this is how it works. This is the way it's going to work. And this source set image picture stuff, they've kind of decided on source set, but they haven't really decided on how the picture element works perfectly. And so that's why it's something that the technology, the technology advance before the dudes stop fighting about what to use. The technology is here and the guys are still trying to figure out what's the best way to do it. And it's because the browser is going to read those sources immediately and try and download all the sources before the page even renders. But we don't want that. We just want to give you the one image you actually need. And that's why we're having to do these widths and 1x next to the image so that we can tell the browser, wait a second, don't download this one. Just get this one. Yeah. Any more questions? Ladies? Yeah? Cool. Smush it? I guess I'm just curious, like, I'm sure it's running in through a smaller in size. In fact, when WarCrust is creating all these different image sizes, do you know what's happening? I don't know what's happening, but I know, like, for each... Yeah, I know... Yeah, that it's actually caching and then rewriting it. So a lot of this compression, actually, then it will reduce colors as well and stuff because the more colors you have in a picture, like, the more information and try to normalize the colors and it gets rid of all the metadata. So it's probably a lot of that going on. I don't know what WordPress does. We could probably, for experiment, upload something to Smush it, upload something through WordPress and see the size differences at the same dimensions. And that will probably tell us who's doing it better. And then you can also, there's websites where you can take an image you download and upload it to a media. It gives you the metadata and it will tell you, like, what the camera was shot on, when it was shot on. Sometimes it has Latin longitude. So just know that when you upload images straight off off your phone, some of that information is there. And if you download a picture off of your WordPress site and ask all that image, all that information is still there, it's not optimized. That's a good test to know if you're actually optimizing it. I think you had a question. Yeah, they're not going to do it. There's some kind of, I know that there's some kind of optimization software in WordPress that crunches it. Have you ever uploaded a bunch of them that says crunching? But I don't remember what it is, because it was Tim Thumb, right, that was working with like image magic or something like that. It's all PHP image magic under the hood. That's actually doing the process. It's not, they're even straight PHP functions. It's not overly aggressive, like something like push it is. But it does something. It does, I mean, it's going to do a sort of a baseline. It's like, it's almost like when you say, say about Photoshop and the baseline default settings come out. That's kind of the same concept, but it's not as overly aggressive. We're trying to overly compress because they're taking the hand of things like push it. Well, yes, they can do a good job with your images, start images, start image types. They can have a negative impact on visibility and that's where color quality you're going to make shift and do something like that. So they're trying to take a less heavy hand in core, whereas if you want to use something additional like push it or something on your desktop to preview those things, they cannot leave that to you. And if you have a lot of images you should probably be using some type of caching engine that has a CDN built in and that's just going to take all these images and put them on a really fast server and just deliver these static images. So if you're dealing with that, I would go with the CDN definitely if you're delivering a lot of images and it's pretty cheap. It's not expensive. Anything else? You mean like 90? I know you can open up your image on like a on your computer and when you click rotate it will reassess that you know orientation. So she might be able to do that? You just have to re-save it because for some I had that problem before. Maybe one of these is that if you send your image from one place to another that other place is operating a system originally has to know what the iPhone is doing when it turns you. So like open it up and re-save it. What's it called? You know apparently there's a solution. Oh no the CDN is just more of a stack of it's like you know you always have a bunch of little solutions to make your big problem and it's just a little solution. Yeah yeah because it's a bunch of servers all over the world delivering closest to you the image yeah. Oh no I would do them all. I'm saying if you have an upside with a lot of images do a lot of these little things are going to help because there's no we all understand there's no magic wand. There's not. There should be definitely. Responsive I'm still looking I'm still looking. It could be what's the I think the default's 100v. Does it know that that's the default if you don't. I think that is. Yeah it is it's 100v or the width of the largest image in your source set is default sizes but I don't know if it's got to be there in your tag or not. I don't know. I just tested with I was just doing some testing with cross browser testing.com and it seemed to work without it so maybe maybe the newer like canaries have it. It worked like it worked worked like you resize the page reloaded and saw that it was different. Yeah because you actually you can right click and get image source and it's the different source which is kind of cool it's a good way to check. Yeah all right guys I think that's I think that's time.