Post Status Happiness Hour Session Twenty One

Transcript ↓

In this episode of the Post Status Happiness Hour, host Michelle Frechette interviews Jono Alderson, an independent technical SEO consultant and WordPress advocate. Jono shares his journey of creating and submitting his first plugin to the WordPress repository, focusing on image optimization for website performance. They discuss the complexities of managing multiple image sizes in WordPress and how Jono’s plugin generates images on-the-fly using services like Cloudflare, reducing server load and improving performance. The conversation also covers the environmental impact of web hosting, Jono’s background, and his experience with AI-assisted coding.

Top Takeaways:

• Image Optimization Plugin for WordPress:Jono Alderson’s plugin focuses on solving WordPress image optimization issues by addressing the inefficiencies in how images are handled. WordPress often generates unnecessary image sizes, which leads to slower load times and inefficient storage use. His plugin dynamically generates the appropriately sized images for each device, improving both website performance and storage efficiency. By eliminating the need for WordPress to create multiple versions of images, the plugin optimizes the backend and frontend performance of a website.
• Environmental Impact of Image Management: The discussion highlights the environmental impact of inefficient image management. Storing and serving large or redundant images increases the carbon footprint due to the energy used in data centers and transmission networks. Optimizing images and reducing excess storage can help lower this impact, making even small changes in image management significant for sustainability.
• Jono Alderson’s Plugin Submission Experience: Jono Alderson shared his experience submitting a plugin to WordPress, noting initial nervousness due to his self-taught background. After carefully following guidelines, the submission went smoothly, with only minor issues to address. Once live, Jono quickly fixed bugs and found updating easier with practice.

Mentioned In The Show:

• Yoast
• Cloudflare
• WooCommerce
• Gravity Forms
• Slack
• WhatsApp
• Facebook
• Google Discover
• Fortnite
• Hello Beautiful
• GitHub
• Cursor
• JonoAlderson.com

🐦 You can follow Post Status and our guests on Social Media:

• Jono Alderson (Founder, Edge Images)
• Michelle Frechette (Director of Community Relations, Post Status)
• Olivia Bisset (Intern, Post Status)

The Post Status podcast is geared toward WordPress professionals, with interviews, news, and deep analysis. 📝

Browse our archives, and don’t forget to subscribe via iTunes, Google Podcasts, YouTube, Stitcher, Simplecast, or RSS. 🎧

Transcript

Michelle Frechette 00:00:01  Hello! Welcome to the Post Status Happiness Hour, where you have two very happy people today because we’ve been laughing and joking before we even start, which is always a good thing. So my guest today is Jono Alderson. Jono, how are you?

Jono Alderson 00:00:16  Hello. I’m good, thank you. It’s 9 p.m. here, so I’m ready for bed. But I’ll do this first. But. Yeah, I’m great. Thanks. How are you?

Michelle Frechette 00:00:23  I am very well. Thank you. I know it’s kind of. It’s a live stream, so, like, you can’t be like, well, we’re going to do it earlier just for you, because then it’s not a live stream anymore, right? So we have to reach with regularity. I do do some, like I instituted the Cache Up, like catching up. Cache Up. I’m so funny. podcast. To be able to interview people who can’t be in the live stream. But one of the things about the live stream, too, is that when people have questions, they can post them. And and if they’re witty and we like them, we’ll put them on screen and you can answer them. So but first tell us a little bit about yourself, maybe where you’re located, what you do. yeah. And I know you have a dog.

Jono Alderson 00:01:05  I do, I have a sausage dog. Yeah, we’ll get to that. Yes. I’m Jono. I’m an independent technical SEO consultant and a web performance nerd and a WordPress evangelist. I used to work at Yoast, as head of SEO there for a bit. Some of you have probably heard of that, lol. Before that, I’ve done agency stuff and I’ve done tool vendor stuff, and I’m a web developer at heart. I’ve been building websites in my bedroom since I was a teenager. I feel like that’s probably still what I enjoy the most. Yeah, I’m currently an independent consultant doing that sort of stuff. And yeah, I’ve got a dog. She’s great. That that was a big lifestyle shift. We wait until after Covid. I think everyone has kind of got on board a bit earlier.

Jono Alderson 00:01:43  yeah, it was nice. So I quit my job and thought, I’m going to walk the dog in the afternoons rather than sat watching timesheets go by. So. Yeah. Lovely.

Michelle Frechette 00:01:50  Yeah. That’s awesome.

Jono Alderson 00:01:51  Oh, well, that was the other thing you said. Where am I? I’m in the UK in York, which is not not New York. Old York, much better. More vikings and romans than.

Michelle Frechette 00:01:58  I’m in New York. You’re in Old York

Jono Alderson 00:02:00  Yeah. Yeah. Yeah. The original. The best.

Michelle Frechette 00:02:03  Well, I mean, we have that in common, though, like that part of where our location is. And your dog’s name is Willow? If I remember correctly.

Jono Alderson 00:02:11  Yes. And she’s a kind of in-between. Not quite miniature, not quite normal sized dachshund. Which makes it very frustrating to buy anything like these. And colors and outfits for her. Yeah, she’s wonderful.

Michelle Frechette 00:02:21  And she does not lack for want of photos because I have seen lots of photos of Willow in Sam’s photography for sure, so. 

Jono Alderson 00:02:30  Yeah, she’s a great model.

Michelle Frechette 00:02:32  Yeah. Well, I invited you on the show today to talk about your my might I say your first plug in in the WordPress repository.

Jono Alderson 00:02:41  Yes. I finally built a thing. Finally.

Michelle Frechette 00:02:43  I know, I mean, I actually had one there before you. Although don’t tell anybody. Mine’s just a take on Hello Dolly, which was super simple to do, but it’s called. Hello, beautiful. Don’t don’t look at it right now. It hasn’t been updated in three cycles of. I need to go figure out how to update it now that things have changed in the repository. Maybe you can help me with that later.

Jono Alderson 00:03:03  You’re going to get the big warning banner.

Michelle Frechette 00:03:05  I do. You’ll get the big warning banner. It’s not going to break your site because it literally is just Hello Dolly with different stuff in it. But, yeah. So you had the the not only did you build it, you had the experience of submitting it and waiting for the approval and watching that whole process, which has changed a little over the last few years, too. So tell us a little bit about what the plugin is, what it does, and if you could share a little bit of the experience about what it’s like to to submit a plugin to WordPress for the repo?

Jono Alderson 00:03:36  Sure. Well it was, I’ll start with a teaser for the second half, because I was terrified about that process, because I, I think of myself as a reasonably good developer and quite well embedded in the WordPress ecosystem. But having never jumped through those hoops, I was really kind of worried and a little bit ashamed that I was going to have to ask for help. I wasn’t going to understand. I know that there’s a whole bunch of like, SVN legacy stuff that I’m not really familiar with. So this plugin’s been like almost ready for about four years, and I never quite got over that hurdle of, you know what, I’m gonna step up. I’m going to do the hard work, I’m gonna ask for help. And but it went super smoothly, really, really good. So I’ll get to that.

Jono Alderson 00:04:15  Yeah. So what is this thing? Let me preface with two, two foundational concerns. One is, performance is super important. We all know that. And we agree for SEO reasons, for usability reasons, etc., etc.. And storage is a thing and storage costs become significant. If you’ve got a large WordPress site with lots of media. When it comes to WordPress, it sucks. The images on both of those categories, images are inherently slow. Your site generates 20,000 different variations of every image that you have, most of which you probably don’t even know about and won’t ever use. And if you’re running WooCommerce, it’s generating five different thumbnails, filling up your server that you probably don’t even need and probably won’t ever need. And it’s generating multiple versions of those because it’s trying to handle web P and JPEG and whatever comes next at the same time. And that essentially scales infinitely. So your hosting just gets follow and follow and slower and slower. It’s the back end. And then the front end is also bad.

Jono Alderson 00:05:18  So, your theme almost certainly generates HTML markup for your images, which is suboptimal. It’s spitting out a bunch of options and a bunch of sizes of those different thumbnails and sizes, and relying on your browser to pick the right one based on where is this image in the screen on the front end, and what size and shape is it, and what are the dimensions of the user’s viewport and the capabilities of their device? And is it high density or is it a landscape, etc. and WordPress is going to take a stab at getting that right, but it’s going to get it wrong. So you’re almost always serving an image that is probably the wrong size and probably the wrong shape, and probably in the wrong place, probably in the wrong format. Yeah. And all of this comes with an enormous backend cost. All your servers chugging away and falling over, generating and installing all of this.

Michelle Frechette 00:06:07  And speed, like you said. Right? I mean, it affects the speed and the optimization as well. Yeah.

Jono Alderson 00:06:11  Yeah, absolutely. On a whole bunch of angles. So if you’re serving an image that is a large image into a small slot, which if you’ve gone into your post editor and said, put a full size image and then it turns out that your template constrains that to 800 pixels, because that’s the width of your content area, you’re serving two megabyte of content when you should be serving 200 KB. That’s half a second of delay on load speed. It’s core web vitals implication. It’s unhappy users. It’s gobbled up bandwidth for users on networks where they get charged for per megabyte. This is all bad. Or it’s or it’s the wrong shape, or it’s too small and your browser is having to stretch it to fit the shape which fires up your GPU and your graphics card, which consumes electricity, which is carbon. Got all of this is bad. So there’s a huge amount of it. Sorry.

Michelle Frechette 00:06:56  It’s like. It’s like trying to put on a pair of jeans that you were in high school, but you can’t fit into any longer.

Jono Alderson 00:07:03  Haha. Yeah. I mean, your cover, your cover has 100 different types of jeans and different cuts and styles, and none of them are right for the occasion that you want right now. It’s exactly, exactly, exactly that I love it.

Michelle Frechette 00:07:13  You can feel free to use that in the future.

Jono Alderson 00:07:14  Nice. Well, we want the whole read me. And so this bugs me because I’m. I’m a massive performance nerd and an SEO nerd, and this is quite the right in the wheelhouse of stuff that I think should be on. And other other CMS’s do. Not a perfect job, but a better job than we do for a bunch of reasons. Like a lot of them have hosted image transformation services and stuff, and we don’t have the box we get. When you upload an image, it generates 20 different sizes, all of which are wrong forever. Not great. So one of the things that I’m interested in and play with a lot is Cloudflare? Which is a content delivery network performance framework security thing.

Jono Alderson 00:07:53  If you’re not familiar with it, it essentially just sits in front of your website. And there’s a whole bunch of speed up performance stuff. Some of the tooling, it has, some clever stuff around images. So I spent a bunch of time playing with the Image transformation service, which lets you construct a URL for your image that includes things like what width should it be and what quality should it be. And, if I have to crop it, should I crop it to the left or to the right? And should I include the watermark and 100 other things. And I thought, wouldn’t it be nice if instead of generating all these bad images and having the bad HTML, we just intercept what WordPress is going to spit out. We filter on anywhere that it’s going to put an image on a web page, and we go. If instead of trying to use those bad images that you have in the bad HTML for them, we’ll just generate something on the fly. We’ll use Cloudflare or whatever other service you’re using, intercept that request, generate a new image, and there’s a whole bunch of interesting stuff that happens then because we know what size the image should be.

Jono Alderson 00:08:51  Because we’re in the context of it being output on the template. So even if you’ve said in the admin or your block editor, there should be 2000 pixels wide, we know that it’s going in a spot that’s 400 pixels wide. So we can get an image that’s 400 pixels wide. We can create that on the fly through Cloudflare or image or any. We just send a request to that server and it spits back a cropped version, then it catches it. So it’s all nice and performant. And now your site isn’t storing any of that. So that’s super nice. We can also upgrade a whole bunch of the HTML so we can do clever stuff like source sets and improve some of the markup to say, hey, browser, we’ve got. Actually, instead of having four bad versions, we have 12 probably good versions. Ignore these 11, pick the best one for you, and it’s going to be a perfect size based on this. Is a iPhone 12 using a retina display versus my monitor that uses, I think, 2.5 x DPI, which I didn’t know was a thing like it turns out that fractional pixel density.

Jono Alderson 00:09:47  I am so deep into this stuff, like. But I guess the short version is you can’t predict how a user’s monitor and viewport and screen should render an image, so you’ve got to provide lots of different versions for lots of different scenarios, like can my screen support web peek? Am I brown? If I’m using a different browser, maybe I can’t support AVF as an image format. It’s fairly new. So you’ve got to anticipate all of these requirements. All of this goes away, all of this goes away. So instead of having to generate all these variations and accommodate for all these scenarios, we just say, you know what. At the moment, where we’re going to request an image instead of grabbing our own bad version, we’ll just create one. And there’s a bunch of other stuff happens there. So we can do that without any config at all, because we know what image size should I say. Keep saying we, I mean, me, this is the thing that I’ve built. It’s my baby.

Jono Alderson 00:10:35  also do things like, Yeah. 

Michelle Frechette: The royal. 

Jono Alderson: Yeah. The we we the, the the, the general design experience. You can do all this stuff like, and whatever the CDN supports, you can alter the contrast. You can change the quality level, and all that sort of stuff. So I started playing with this, I think, nearly five years ago now on a couple of my sites, because I was irritated about storage and constantly found myself having to grab that regenerate thumbnails plugin, and go, okay, I slightly changed my design, and now all of those cards that I had that were 800 pixels wide and now 760, and now all my images are wrong. So I’ve got to regenerate it all. And it’s so annoyed. I’m like, what if we just solved this? but it turns out there’s all sorts of other bits, like, you have image references in your XML sitemaps and in your meta tags, and in your schema and in your favicon, and in your RSS feeds and in your JSON.

Jono Alderson 00:11:28  And it turns out that WordPress is shoving these bad image options out everywhere. So this thing got bigger and bigger, more complicated. And then you’ve got the block editor and classic editor, and all these things handle image markup in different ways. if you’ve ever looked at the code view of an image block in Gutenberg, I’m so sorry. Because it’s. I don’t know why I’m apologizing, but I’m sorry for the experience you had looking at, like.

Michelle Frechette 00:11:54  I feel sorry for you. Yes.

Jono Alderson 00:11:56  Yeah. It’s so frustratingly messy. So things like the the image ID is in a JSON attribute, but then whether or not the image is linked is still hardcoded and the alt attributes hardcoded, and the size is different. So none of it is sensible, none of it is consistent with the classic. Yada yada yada yada. So yeah. So essentially what the plugin does is just gets rid of all that or not gets rid of it, but steps in intercepts and just goes, okay, this is a thumbnail in the sidebar that should be 300 by 300 pixels.

Jono Alderson 00:12:26  Here is a 300 by 300 pixel image. And here is the HTML markup that also gives you a 450 by 450, 600 by 600, and 900 by 900 whatever to account for retina displays, triple triple screen displays, smaller mobiles, etc.. And then your browser just picks the right one and everybody’s happy and everything is good. Now everybody wins.

Michelle Frechette 00:12:46  Everybody wins. And it sounds like magic because I’m not a developer and I don’t understand how those things work. So yeah. So it’s like it’s beautiful. I have, an I had an experience back in my freelance days. I was coordinating the local Meetup. And so people thought, of course, you must be an expert at WordPress and know everything there is to know, since she’s coordinating a Meetup and, young girl wanted to come meet with me, a young woman wanted to come meet with me to see if I could help her figure out what was wrong with her website, because the home page would not load. So I, I so I had her come over and I’m gonna probably misquote the size of the home image, you know that she had on the the homepage the hero image on the homepage.

Jono Alderson 00:13:29  Oh no.

Michelle Frechette 00:13:31  But after 45 seconds it still had not loaded because it was like 40,000 pixels wide kind of thing, because she thought the bigger it was, the better it would render. 

Jono Alderson 00:13:42  Better quality. Yeah.

Michelle Frechette 00:13:42  Right.

Jono Alderson 00:13:43  Yeah. And that’s interesting, because what common wisdom would say, put a smaller image on there and don’t just upload anything straight from your phone. But increasingly, one of the things that happens with retina displays are my weird 2.5 x DPI screen is actually you want a bigger image, otherwise it’s going to look blurry and low quality because your browser is going to stretch it down. And what? A pixel isn’t a pixel anymore. You’ve like what constitutes a pixel is determined by a combination of yada yada yada yada. The markup, the browser, it support the the physical attributes of the screen. So you really need to supply the right sized image for the place and dimensions it’s going to be in. And that’s not always going to be the smallest possible. So it’s not even as simple as oh yeah, this just compresses stuff and shrinks it.

Jono Alderson 00:14:28  It’s got to serve the right thing at the right time. And thankfully I think was it WordPress six point something introduced a filter so that it now shrinks images to, I think, Imax at 2,400 pixels, which at least means you can’t do the like. Here is a straight from my iPhone 50,000 gigabyte image anymore, which is a huge improvement.

Michelle Frechette 00:14:49  Yeah, and I mean, I’ve heard of slow, but I had never seen anything quite that excruciatingly slow. It was it was probably ten years ago, but still it was like, are you kidding me? Yeah. Ridiculous. 

Jono Alderson 00:15:02  Ouch. Well, there’s another interesting side effect there, which is that a lot of the modern image formats, the GIFs, etc., don’t render progressively in the way that JPEG did. So at least in those days you would have got it going. Chunk chunk chunk chunk like an inkjet printer. But now you just get nothing and you’re just sat there waiting whilst the browser looks horrible. Nasty.

Michelle Frechette 00:15:24  And I don’t know if this was WordPress. You can correct me if I’m wrong. Again not a developer so don’t come at me in the comments. But this was WordPress or themes or a combination of both. And does it still do this where you upload an image and it creates like five copies of that image as a thumbnail, as a square? And is it still doing that?

Jono Alderson 00:15:44  Five if you’re lucky. Yeah, yeah. I’m five. Yeah. So a small, a thumbnail, a medium, a large and the original. And then chances are, whatever combination of plugins you’re using, WooCommerce adds another five, Gravity Forms adds another three. Yeah. The chances are every image you upload, it’s going to restart and it’s going to generate a dozen. And that storage is cheap, but at scale, that’s still going to fill up your server. It’s going to make the media library slow and clunky. And this stuff isn’t good. It’s it’s a really old school way of dealing with it. And then again, like if you change anything about your theme, you’ve also got to then resize and regenerate all those image variants because your what a small or medium or large mean has changed.

Jono Alderson 00:16:22  Yeah, absolutely. Like away with all of that.

Michelle Frechette 00:16:24  If you look at your media library you’re not going to see that right? It’s still going to show you the image.

Jono Alderson 00:16:29  You know it’s all buried. Yeah.

Michelle Frechette 00:16:32  Right. So you can look at your media library and say what are you talking about. There aren’t five images. There’s only one. Well, you’re not seeing every iteration of that same image for sure.

Jono Alderson 00:16:40  You will just get you will see an email from your hosting company saying your storage has hit 90% and everything is going to shut down unless you increase your billing. That’s what you’ll see.

Michelle Frechette 00:16:47  Right, exactly. But also, I mean, it really does impact the carbon footprint as well. The more things we’re storing on our website, incrementally it hits our carbon footprint. And we used to think that because it was on on computers. Right. Computers the internet. It’s different than like. 

Jono Alderson: It’s free. It’s infinite. 

Michelle Frechette: Right. It’s it’s not junk mail that I’m recycling and they’re not, but it’s still using fossil fuels or whatever fuels.

Michelle Frechette 00:17:12  It’s still eating those kinds of resources that we have. And there’s a carbon footprint that goes along with running these things. And so the more we can do to reduce the use, the better that it is for sure.

Jono Alderson 00:17:23  Yeah. And the more you think about the internet is just other people’s computers, the more you realize that physical cost is there’s the the generation of those images, the storage of them, but then also the transmission of them through undersea cables to end users, their their laptops and. By power stations, the graphics can’t spin up to handle the result. There are like eight different people paying the cost of this along that chain. It’s really bad.

Michelle Frechette 00:17:49  RIght. Yeah, it really is. So even your cheap hosting is still costing lots of people resources. Should we bring bring your bring the product up and let you do a little demo with it?

Jono Alderson 00:17:59  Yeah, I could do that. Why not? yeah. And we need to go back at some point and talk about the release process.

Michlle Frechette: Yes, yes, yes. Thank you for the reminder. 

Jono Alderson 00:18:04  So, yeah, this is this is a yes. Right? This is a hobby project of mine. it’s where I cut my teeth on WordPress and continue to, as I continually rebuild it and learn. This is Day of the Year. Today is National Hug Day. That’s quite cool. And this is quite an image rich site. It’s meant to be emotive, etc., but that’s not the point. The point is, this has 10,000 posts or so, each of which has a range of media and images and a whole bunch of other stuff outside of that. And the cost of storing that and generating it is not insignificant. And I have, I think, five or so different versions of every image size. So there’s this hero version, there’s this card version. If I go into a page, there’s a slightly different size card version, or this is just the desktop view. So there’s like 2 or 3 mobile iterations of that as well. There’s this date listing which gives when it loads another size.

Jono Alderson 00:18:59  there’s the OG image for Facebook, which is another size still. All of this adds up. So the, the conceptual and very literal cost of generating and managing all of those image sizes becomes not insignificant. So this is where I started playing with this idea that what if I can just generate these images on the fly? So if I do this briefly, I will minimize the amount of code that I’m just backing up on my screen with my mouse. There we go. If I just do this quickly and go to here, let’s just get rid of that for a second. Here is the original image. And this is huge. This is, this is 2,000 pixels by 1,300 pixels, which is more than eight, and it’s 40 times. It’s using 41 max number one. But this is far bigger than I need for this little thumbnail than this spot. Right? So what if instead of having this, instead of generating all the variants, we just change the URL and we use Cloudflare’s rewrite system to say give me a pixel ratio of one.

Jono Alderson 00:20:05  Set the format as auto, so detect whether my browser does or doesn’t support WebP or AVIFi. And then before you even try and just convert it, check whether the WebP is going to be smaller than the original PNG, and don’t bother if it’s not. So there’s a whole bunch of brain in there, which is nice. A bunch of other stuff, like the height should be 450in, the width should be whatever, the width should be 1096. Whereas if I’ve done this in WordPress, I would have had to have generated this, generated this in advance. This is just created on the fly. Set the quality and then reference the original. Now I could also go. Actually, this is a bit pixelated. I want to set it to 95, or I want to change the gravity or the crop, all sorts of stuff. There’s a bunch of clever stuff you can do with this. You can actually, if I want it to crop this to make it, 600. So 6096 might be a bit excessive.

Jono Alderson 00:20:56  I want to make the 600 wide. It’s going to try and do it in a way that crops it intelligently, etc., And you can change a bunch of the rules and logic around that. This is covering at the moment. I can do contain instead. Now this is lovely, but this is just one of Cloudflare’s things out of the box. The magic has been how do I work this back so that WordPress does this and using this instead of its native image system, which was a month of my life, I won’t get back. So we get instead of WordPress native image output, we get this, which is super hard to read on there unless I try in zoom it in a little. Now it’s zoomed in far too much. There we go. so this looks pretty dense. But there’s a few really nice things going on here. So again, instead of having WordPress generate all these versions in advance, we’ve got a source attribute that just lists, because I know this image should always be ten 1096 pixels wide.

Jono Alderson 00:21:47  We’ve generated one that’s double that. And I think one that’s half that for the original? And then the browser can just pick the best one based on the size of the image, the orientation size, the size of the browser’s viewport, and a bunch of other stuff. Like we wrap it in a picture element, which is some nice future proofing. And we use WordPress as intrinsic sizing attributes, so we’re not having to guess. And yeah, all we’re essentially doing is just rewriting the heck out of this and accounting for all the weird edge cases where WordPress is convinced that it knows best about which bad image you want. And just using this Cloudflare system. and this works for images in content, for images, in templates, anywhere where you’re doing block edits, etc.. Yeah. Really nice. And then stuff like the OG image as well. Automatically, automatically uses this. This is really nice because most people’s open graph images. So this is the share image you get when you paste a link into Slack or WhatsApp or Facebook, etc..

Jono Alderson 00:22:43  Everybody does this really badly because if you Google, what should the right size be it? Some social media guides from 2014 will say 1200 pixels by 625. That’s wrong. It should be a minimum of 1200 by 675. If you want to be eligible for Google Discover and be the right size for Facebook’s new stuff. And of course, nobody has that because all of their old pre generated WordPress images are the wrong size. So we generate this on the fly and we upscale it if it needs to so we can go. This is now 1200 by 675. And Facebook etc. has a perfectly optimized version for their usage as well where this gets really nice. Let me give you a different example. This is a freelance client of mine, and they they’re a database of what pro-gamers settings use. So if you’re a CSS two player or a Fortnite player. There’s a whole marketing people understanding what type of monitor do you have and what’s the refresh rate, etc., etc.. One of the problems they have is they get their images secondhand and they’re really small. So this is their featured image and it’s pretty tiny.

Michelle Frechette 00:23:53  Yeah.

Jono Alderson 00:23:54  So we make it bigger. So actually when you look at the original image, did you do doo doo doo doo doo doo. This is the original. It’s on a white background. It’s not great quality, etc. But we can scale it up so we can do, sharpen this and expand it. And then in the OG image tag, we can expand it to fill that whole space. So it’s eligible for all the Google Discover stuff, etc.. And it’s a higher quality. So it’s actually better than it was. Which again is just just Cloudflare’s magic stuff. So they have like a, a sharpened setting somewhere. Yeah. Really really nice. So yeah, there’s a whole bunch of use cases and size for this. But essentially all of this is magic. Nobody should need to care about any of this. It just stops WordPress being your image engine and outsources all of that to Cloudflare or Bunny or one of the others. And yeah, it’s also all for you. Real nice.

Michelle Frechette 00:24:45  And it’s quick. It’s not like, hold on, we gotta figure out what this looks like and how to render it for you. It’s like, boom, you don’t even know what’s happening.

Jono Alderson 00:24:52  Yeah, this should be faster. Yeah, It should be faster than your WordPress stuff doing it because Cloudflare is super good. Worst case scenario, the very first time a variant is generated, it might take half a second or so, but typically it’s going to be as fast as you can. And and then they’re all cached. So these images then essentially exist but on Cloudflare server rather than yours. So you’re not having to worry about it. And then if you’re running any kind of caching plugins or anything that will also cut neatly and it’ll all join up and it’ll refresh them when it needs to. Yeah. Really cool.

Michelle Frechette 00:25:21  That is very cool. Now, before we get back to the experience of submitting this to the to the repo, can we talk about this website for a quick second? Because I was using this website for years.

Jono Alderson 00:25:31  Yes, certainly.

Michelle Frechette 00:25:32  Your social media. Most social media. Before I realized it was. It was yours.

Jono Alderson 00:25:38  Oh, fantastic. I hear that story a lot at conferences and things. Yeah, it became a. That’s my internet being so not the edge images plug in being. So thankfully. Yeah, I get that a lot. Conferences like this this time because I had that same itch like, like 2009 or so. I was like, I need some content campaign ideas for small businesses and clients, etc.. I wonder what’s out there. And you go, okay, it’ Talk Like a Pirate Day. It’s Darwin Day. Suddenly it’s World Radio Day. Ideas and ideas like so I’m like, what if I build something? Yeah, this is this is the kind of my big WordPress moment. Definitely. This has been rebuilt from scratch so many times now. It’s the most butchered, bespoke, not WordPress way, website that I’ve ever touched. I love it, it’s great.

Michelle Frechette 00:26:18  I was, you know, I, I eventually after years of like figuring out because I, when I was working at Give specifically I would look to see like are any are any of them, any of the days specific to nonprofits.

Michelle Frechette 00:26:32  Right. So, like Whale day. International Whale Day. Day of the dolphins, things like that. And so I would come here and I would look to see what. There you go. National Organ Donor Day, for example. And one day I was like, geez, I wonder if this is on WordPress. So, you know, I did the whole, like, check it for WordPress thing. Yeah. And then then I was like, I wonder who’s behind this? And I went to the about a page or wherever it was, and I was like, oh my god, I know those people.

Jono Alderson 00:26:56  That’s cool. I see some fun stuff behind the scenes. We’ve got. I’ve built a whole admin process, so WordPress is really bad at database stuff. It turns out like this has a this the whole site is essentially a calendar, but almost all of which is in the future. And WordPress really, and a whole bunch in the past. And the amount of work to overwrite WordPress assumption that everything is a date based archive or when stuff is published.

Jono Alderson 00:27:17  Super interesting. Yeah, we built a whole kind of editorial flows around, how do we grade and manage these dates in a way that the WordPress understands, which is, yeah, super interesting learning curve. We’ve got all these, All these URLs are essentially just rewrites of WordPress data archive system. But then we have to override the query to say, actually go and fetch stuff. Yeah, really, really cool.

Michelle Frechette 00:27:40  That’s very cool. I love it. So I’ve yeah, I’ve been using the site for years. I don’t know when you published it, but I can tell you that it’s been been around longer than 5 or 6 years because I’ve been using it for a while.

Jono Alderson 00:27:51  I think 2009 was probably the first instance of that, I reckon.

Michelle Frechette 00:27:55  Oh, that would be long before I was even using WordPress. So yes, absolutely. Very, very nicely done. So I also want to ask you about, we know that not only for SEO, but for altruistic reasons, we should be have have, alt text on our images. Does your plugin do anything, anything with alt text? Does it look for it? Nothing. Okay.

Jono Alderson 00:28:19  No, I, I leave whatever WordPress is already doing. For two reasons. One is I don’t want to conflict with all the other things out there that do it, but the other is a lingering, a lingering. I don’t think we should be auto generating or attempting to infer atl attributes, I think. I agree. I think part of the role of the atl attribute has to consider the context of the image and what it’s for, not just what’s in it. Like the difference between this is a man wearing a black cardigan, and this is a person appearing on a podcast. It’s quite a podcast, a webinar. It’s quite significant and important for the kinds of people who are using and relying on atl attributes. And I’m not convinced that there are currently good AI, whatever solutions that can understand that context well enough to generate an alt attribute that’s going to be better than no alt attribute, which at least says at least this is decorative.

Jono Alderson 00:29:18  So yeah, I’ll pick up what WordPress does, but I don’t want to get into the territory because I think a lot of people are getting it wrong because they’re trying to shortcut it. And if they if they’re going to do the hard work themselves, then great. I’ll just pick that up with the plugin.

Michelle Frechette 00:29:30  Makes sense. Makes sense. I’ve. I’ve said often that I wish that if you uploaded an image, it would prompt you to add the alt text.

Jono Alderson 00:29:38  Yes, yes.

Michelle Frechette 00:29:39  With a box that says, well, you have to check a box that says either, this is decorative or I don’t care about accessibility. I don’t want people to be able to know what it is and bypass that. But I think, I mean, I’m, I’m a little, biased because.

Jono Alderson 00:29:53  I completely agree. Look, we looked into scoping that when I was at Yoast. I don’t know if they’re still looking at it now, but we got quite far into the idea of part of that workflow. Having a this is a purely decorative checkbox, but the way WordPress handles images and they’re atl touch attributes is so bad that like the the alt attribute you set on the image when it’s in the media library is not the same as the context when it’s in the page. So you’ve got one image with different alt text depending on where you are. It all gets very muddy. So, maybe dragons?

Michelle Frechette 00:30:21  Yeah. Yeah, for sure. If you put it in the media library. Anything afterwards. Well, yeah, but if you upload it first, then put in, put the description on the post or the page that doesn’t carry to the media library, and then it doesn’t carry forward to anything else either. So yeah, it’s a little confusing for sure. For sure. Absolutely. Well tell us a little bit. I submitted a plug in a million years ago. I don’t know how long ago it was the year 2020 because it was during lockdown actually. And it it was not as long a process as have been in more recent years. But now they’re streamlining things and doing things a little bit differently. So what was your experience in I know you said you were like, oh, like, how do I do this? But what was your experience in submitting the plugin to the repository? Were you did you get any feedback on having to make any changes before you went forward? And how did that whole thing, how did the whole process work for you?

Jono Alderson 00:31:16  Sure. So yeah, again, I was I was super nervous going into this. I, I have been a hobbyist developer for 100 years. And I. I’m self-taught. I think I’m quite good, but I know that there are things I don’t know, so it’s really hard for me. I, I was really nervous about getting critiqued and feedback on stuff that maybe should have been obvious and I maybe should have known. So I held off for ages. I finally plucked up the courage around Christmas. Rebuilt this thing from scratch properly, quote unquote. And then. And then when it was 99% done, then went and looked at the plugin guidelines and thought, okay, what do I need to do to get this last hurdle? And the page was super intimidating. It’s like a wall of text of thou shalt not. 

Michelle Frechette: Yes.

Jono Alderson: And and it’s really. And I went through it and I’m like, okay, I’m pretty certain I’m okay on all of this. Actually, the more I looked at it, the more I thought, actually, a lot of this does sound quite basic.

Jono Alderson 00:32:14  It’s like escape your inputs and validates, okay, I’m doing that and I don’t do stupid stuff and make it. Yeah, okay. Don’t obfuscate. You’re fine. Actually, the more I looked at it, the more it felt like I’d already. My fear of being called out and stuff had meant that I’d already triple checked everything and really thought it through. So I managed to juggle my way through the form and uploaded a zip of the plugin. And there’s big red lights everywhere that say do not email us. You will hear from us when you hear from us. Good luck. Maybe. I hope you don’t die first.

Michelle Frechette 00:32:47  May the odds be ever in your favor.

Jono Alderson 00:32:50  Yeah. Very much. Like we have a backlog  go away. And I thought, okay, I’ve done. I’ve done the thing. And then I think about 48 hours later, I got an email saying, we’ve reviewed your plugin. And we found two sections again, wall of kind of slightly intimidating text, but peeling through the boilerplate stuff that found I don’t even know who it was reviewed, actually double check and find out and thank them.

Jono Alderson 00:33:17  Two bit I suspect that was an automated person at that stage. Found two bits where I’d not sanitized a variable that I didn’t think needed sanitizing because I was just reading something from Europe, but whatever. So I added up, added a whole load more, hardening. Resaved it, rezipped it, sent it, and then about 40 hours from then got an email saying, yeah, congrats. You’re in. You got plugin. 

Michelle Frechette: Nice. 

Jono Alderson: Which really surprised me. I was expecting to have to go through several rounds of. You have not sanitized these things properly, you idiot. How dare you be a hobbyist trying to come and do this properly?

Michelle Frechette 00:33:59 Who do you think you are.

Jono Alderson 00:34:00  Yeah. Yeah. Yeah, exactly. Yeah, that’s that’s going to be, on my t shirt at WordCampEU. Yeah. No, I was really happy with that. and then, then I had to get my head around how SVn works, which, I think had last touched SVM in maybe 2012 when I was in Agency World?

Jono Alderson 00:34:19  And I’m a Windows user, and all of the guides assume that you’re a Mac user. So it’s like, oh yeah, go over there. Good luck. See you later. So I had to go try about three bits of software and paste several of my passwords and subsequent auth codes, and then my auth password codes, and then my two password auth in various combinations into various places and panicked because there’s a point where you that there’s a whole bunch of stuff around structuring the plugin code. So you’ve got to have a trunk version and then tagged versions, except you don’t need tag versions, but you should probably have tag versions, but it’s fine because that can be the same as like at this point. Fine, just copy paste some stuff and hope.  And then you hit the go button on SVN and there’s a little progress bar where it’s like, yep. Uploading to WordPress.org. Okay. If I’ve got this wrong this is going to look real bad. And of course there’s a whole bunch of nuance around how should your Readme file plugin be formatted? And if you use the wrong number of equals, or put the wrong number of stars in the header, Like the whole thing just implodes.

Jono Alderson 00:35:23  So that was so I have no idea if this thing is going to look like garbage when it hits the and I and I don’t know how easy it is to update it when I make changes to it, or whether there’s any kind of delay on that or what the implications are. So that was nerve wracking. But it all worked out right. Like it turned up in the repository. I immediately found a bunch of bugs that I’d missed before I launched it, so I had to go and do, like, a version 1.1, like, frantically, I’ve released a thing that’s broken, that’s going to look bad. And but that was straightforward as well. So I just followed the same guidelines, like make, it make a different folder for that version, upload, update all the code, find all the places you’ve referenced the latest version and what’s supported, and then just reSVN it. Yeah. And since then I think I’ve made about like another 10 or 12 updates, which gets easier and fairly straightforward.

Jono Alderson 00:36:10  Every time I keep missing things, there’s like three different files you need to update in each of them in about three different places. And I keep missing one. And then it’s like, where’s the update? Why can’t I update? Why does it say it’s the wrong thing? I’ve done it again. So apologies to like, the four people who are actually using this plugin because they’ve had mega update fatigue by now. But yeah, overall intimidating. But once I got over that hurdle and found some confidence in it. Absolutely straightforward and really fine. As long as you don’t accidentally click the wrong button and forget a bunch of stuff. Yeah, yeah. Pretty surprising. I was expecting it to be far more harrowing. Yeah.

Michelle Frechette 00:36:47  I wish that when I did it, I had written down the steps or screen recorded what I did. Because now I’m like, oh my goodness, I don’t remember. I’m going to have to go through all the steps to update it again. And yeah, but it’ll get there.  It’ll get there. One of the things I will say is, I don’t know, the threshold. I, I think it’s a very high number, but, it’ll show ten plus active installs until you have like 5000 active installs or something.

Jono Alderson 00:37:16  Haha! Great.

Michelle Frechette 00:37:17  Real helpful. It’s like, so don’t get, you know, don’t get all, what’s the word I want to say? Worried that, like, why only ten people are using this? Because, I.

Jono Alderson 00:37:27  Mean, ten plus is technically accurate, right? It’s like 10 to 4999.

Michelle Frechette 00:37:32  Yeah, because mine has ten plus activists, but it also has had over 2000 downloads. So somewhere between ten plus and 2000?

Jono Alderson 00:37:42  Okay. Reassuring.

Michelle Frechette 00:37:43  Yeah. And it even shows like anywhere from from 2 to 8 every day for the last like since September. Oh since last June. And I’m like okay, that’s got to be more than ten plus. But you’re right. I mean 5 million is ten plus, right so. 

Jono Alderson 00:37:58  Yeah. Exactly. Well, I will go download that. That sounds like a nice plugin to have. Actually, you didn’t illicitly fork Hello Dolly. Did you? And steal its namespace. Was that what you did?

Michelle Frechette 00:38:09  No, I actually fork Hello, Dolly like you’re supposed to. Matt created that so you could learn. Learn coding? And then I, I replaced it with. It’s called Hello, Beautiful. And when you log into your website, it tells you wonderful things about yourself. Things like.

Jono Alderson 00:38:24  That’s nice.

Michelle Frechette 00:38:24  You deserve an extra cup of coffee today. You look nice. You should have a cookie. Yeah. You should. Right? And it doesn’t take up much space, obviously, because it’s like 40 lines of code or less. And then I went one step further, and I added CSS to change the color of what, how it appears in your browser so that when I do have to update it, I don’t have to think of new things to say. I can just go. It should be pink now.

Michelle Frechette 00:38:46  It should be red now. Oh look, it’s a change. I can I can update it in the repo. And I did it so that I could learn a little bit. I want to understand just the tiniest little bit of what development is. I submitted it to the repo, and I got an email immediately saying, lots of people try to make Hello Dolly and submit it to the repo. Will you promise to keep updating it so it doesn’t just sit in Langer. And I said, yes, I will, and I have up until the last three. Because I lost, I lost access to my GitHub account. I need to figure out how to get it back.

Jono Alderson 00:39:16  Oh, nightmare. That’s not fair.

Michelle Frechette 00:39:18  Yeah. No. So I’m working on that right now. But, yeah, it’s it’s just there’s a lot of fun. But here’s the thing. So I wrote it on my lunch hour. I actually have a piece of paper where I wrote down what to do. I wrote on my lunch hour.

Michelle Frechette 00:39:33  I did, you know, did a local install. I hit go and it worked on the first try. So of course I went to Twitter. I said, I just wrote a plugin. It worked on the first try. Development like it’s hard. Of course. Just like tongue in cheek, right?

Jono Alderson 00:39:48  Haha! Zero bugs. Yeah.

Michelle Frechette 00:39:50  Tongue and cheek, of course, but it was a lot of fun. I even did a talk at WordCamp Taiwan Taipei? I can’t remember exactly. during lockdown, during all of that. online at 2:00 in the morning my time about how I did it, why I did it, how I did it, what I learned from the process. So it was kind of fun.

Jono Alderson 00:40:09  Wow. Oh. That’s cool. Yeah. Nice. So I, like. Sorry go. 

Michelle Frechette 00:40:17  Nothing like get up in the middle of the night to, you know, pajama bottoms. Business on top. Present. That’s present on present live.

Jono Alderson 00:40:24  Yeah. It’s been a few 3 a.m. webinars. It’s an interesting vibe. A lot of coffee. Yeah.

Michelle Frechette 00:40:28  For sure.

Jono Alderson 00:40:29  Yeah, I coded, I coded a bunch of mine using Cursor, which was an interesting experience. Like an AI assistant thing. Sorry I had a beta version of the plugin for years, which was okay, but definitely not suitable for release. And I thought, I’m going to do this, I’m going to tear it down. I’m going to rebuild it line to line. I thought, this is an interesting opportunity to do like pair coding with an AI system. Really interesting. I like the the finished products is far more sophisticated than it would have been had I just soloed it and it took, I reckon, 20% of the time it would have taken for me to have done it by hand. And there were I don’t think it’s radically different functionally, but there were a few moments where I was halfway into building part of it, and it made a suggestion that made me think, oh, actually, maybe we should do it that way instead of this way, and it’s better as a result.

Jono Alderson 00:41:20  So that was a really fascinating experience. I highly recommend that for anyone who’s wanting to build anything or rebuild anything, go get Curser and or something else, and tell it. Yeah, you think. Think externally and you write product specs and define problems and let it do some of the thinking. Really interesting.

Michelle Frechette 00:41:41  So one of the hardest parts for me was determining what the artwork would look like on the.

Jono Alderson 3 00:41:46  Yeah.

Michelle Frechette 00:41:47  The repo page. Right.

Jono Alderson 00:41:49  So some sort of mine thankfully.

Michelle Frechette 00:41:52  I saw yours I love it, it’s very, edgy or whatever. It goes along with the word edge, right? 

Jono Alderson: Haha! Yep, yep. Mine. Mine. 

Michelle Frechette: I was like, what? What’s beautiful that I could put in Hello Beautiful? I took some pictures of the mountains up in the Adirondacks. I’ll just use that. So that’s what mine is.

Jono Alderson  00:42:08  Nice.

Michelle Frechette 00:42:08  Sure.

Jono Alderson 00:42:10  Yeah. I asked my in-house creative. I said something with like image icons and magic, and Sam came back an hour later with. Yeah, great. Sorted. Thank you.

Michelle Frechette 00:42:18  Love it. Moving right along. Yeah. No, it’s it looks great. So I we don’t have any questions in the comments. Now’s your opportunity. If you do have some questions throw them in there. Because we’re going to wrap up here in a minute or two. Just a note for anybody who’s paying attention. We will not have the Happiness Hour for the next two weeks. I will be in WordCamp Asia next week, and I will be recovering from WordCamp Asia the week after. 

Jono Alderson: Yeah. 

Michelle Frechette: I’m going to give myself a little bit of a break so I don’t burn out too fast. Notice I say don’t say so. I won’t burn out because we know that’s going to happen. But so it happens.

Jono Alderson 00:42:51  It should be a question.

Michelle Frechette 00:42:52  Yeah, it should be a slow burn, not just a boom. Everything’s, you know, not like that flash paper magicians use. it’s just over before you can even see it. My favorite, though, is when you’re at a hibachi restaurant and they like the whole volcano thing on fire in front of you.

Jono Alderson  00:43:05  Oh, yeah.

Michelle Frechette 00:43:07  It smells so good. But that also can be my life sometimes. Just like there it goes. But.  But anyway. 

Jono Alderson 00:43:14  In a conference in Italy a few years ago, and they brought out an entire wheel of parmesan cheese at this restaurant, and they set the top on fire, like by the table. There is a flame like it’s it’s huge. It’s like half a meter, right. And they’ve poured a bunch of alcohol onto it and they’ve set it on fire and then they’re scraping. People are serving that are the best. Yeah. Indescribably fun. Great.

Michelle Frechette 00:43:35  That’s like, if there’s a heaven, that’s how I want to be greeted.Here’s your. 

Jono Alderson: Yep. 

Michelle Frechette: Here’s your wheel of cheese. 

Jono Alderson 00:43:43  Come on in. Yeah. One each. Great.

Michelle Frechette 00:43:44  And and here’s the and you can choose any of these three wines that pair well with it Michelle.

Jono Alderson 00:43:50  Yes. Perfect.

Michelle Frechette 00:43:52  And for dessert tiramisu.

Jono Alderson 00:43:54  Yeah. Nice.

Michelle Frechette 00:43:57  Oh. Any last words? Anything that you’d want to tell people before we, we let you go here?

Jono Alderson 00:44:02  I should do a plug. Yeah. If you want your website to be bigger, better, faster, stronger. If you want to dial up your technical SEO or web performance or structured data. Or do some cool Cloudflare stuff. And yeah, fix all the things. I do consulting type stuff over at JonoAlderson.com. Give me a shout. Happy to chat. Yeah. WordPress. Something. Something. WordPress. Yeah. That.

Michelle Frechette 00:44:28  We’ll put all that information. All that information will be in the show notes when this goes live on our website. Thank you to Olivia who does all of that back. You know, behind the scenes work for me. She is amazing. So we’ll have all of that. If you want to contact Jono, directly, we’ll put his website in that in the show notes as well. So thank you Jono for being. I know you’re up past your bedtime, probably. But thank you so much for being here with me today.

Jono Alderson 00:44:51  Thank you for having me. It was an absolute delight. Enjoy Asia. 

Michelle Frechette: And Switzerland.I will, thank you. I’ll send you pictures to you and, Sam and, Yeah. Thanks so much for being here. Thanks everybody else. We’ll see you in a couple of weeks when we’re back.

Jono Alderson 00:45:03  See you on the other side. Bye. Bye bye.

Michelle Frechette 00:45:05  That’s right. Bye.