[00:00:00 ] Nathan Wrigley: Welcome to the Jukebox podcast from WP Tavern. My name is Nathan Wrigley.

Jukebox is a podcast which is dedicated to all things WordPress. The people, the events, the plugins, the blocks, the themes, and in this case, the state of images in WordPress.

If you’d like to subscribe to the podcast, you can do that by searching for WP Tavern in your podcast player of choice, or by going to WPTavern.com forward slash feed forward slash podcast. And you can copy that URL into most podcast players.

If you have a topic that you’d like us to feature on the podcast, I’m keen to hear from you and hopefully get you, or your idea featured on the show. Head over to WPTavern.com forward slash contact forward slash jukebox and use the contact form there.

So on the podcast today, we have Adam Silverstein. Adam is a WordPress core comitter, where he works to fix bugs and improve modern web capabilities. As a developer relations engineer in the content ecosystem team at Google, he works to invigorate the open web by empowering and educating developers.

At the recent WordCamp US he gave a presentation entitled images on the web, past, present and future. In it, he outlined his thoughts on where the web is going in terms of support for different image formats.

Alongside text images are the bedrock of webpages. We browse the internet and expect pages to have images of all forms. Photos, illustrations, charts and images to convey additional meaning to the text.

But how do the images actually get on the page? WordPress makes handling images pretty easy, and Adam explains what happens when you upload an image to the media library and then display it on a page or post in a browser.

We discussed the fact that different image sizes are created automatically by WordPress, which can be used in a variety of contexts across your website. You’ve likely heard of many of them. But perhaps you have not thought about which image format belongs where.

As with code, the technology behind images does not stand still. New image formats are being created all the time, and are being supported at differing rates by the major browser vendors.

In the past, we typically used JPEG. GIF or PNG files to display images on our websites, but there’s good reason to think about adopting other defaults in the near future. We discussed some of these new formats, such as WebP, AVIF and JPEG XL, and find out how they are speeding up website loading times because of their smaller file sizes.

We also get into how you can optimize your images and how plugins and SaaS solutions can reduce the size of your files before or after you upload them to your WordPress install.

Adam has some good advice about a topic which is becoming increasingly important, page load time. And if you’ve never given the serious thought, this is a great podcast episode for you.

Typically when we record the podcast, there’s not a lot of background noise. But that’s not always the case. Over the coming weeks, I’ll be bringing you recordings from a recent trip to WordCamp US 2022, and you might notice that the recordings have a little echo or other strange audio artifacts. Whilst the podcasts are more than listenable, I hope that you understand that the vagaries of the real world were at play.

If you’re interested in finding out more, you can find all the links in the show notes by heading over to WPTavern.com forward slash podcast. Where you’ll find all of the other episodes as well.

And so without further delay, I bring you Adam Silverstein.

I am joined on the podcast today by Adam Silverstein. Did I get that right?

[00:04:38 ] Adam Silverstein: You did. That’s the way I like to pronounce it.

[00:04:40 ] Nathan Wrigley: Yeah. Perfect. Adam is here because he did a presentation at Word Camp US this year. What was the presentation about Adam?

[00:04:46 ] Adam Silverstein: It was images on the web, past, present, and future. So kind of like a history of images and also what’s coming in the future for modern image formats.

[00:04:54 ] Nathan Wrigley: Okay. We’ll delve into that in a moment, but before we do, would you just give us the two minute potted history of Adam. How it is that you’ve come to speak at a WordCamp.

[00:05:02 ] Adam Silverstein: Sure. Yeah. I mean, I used to build sites in, uh, Dreamweaver. Then I discovered WordPress as a way to let my clients be able to edit their content. Then one day I decided I should contribute back to WordPress. I became super involved in Core and help rewrite revisions for 3.6. Eventually, I became a core comitter. And, worked at agency, 10up, for quite a while, and then eventually wound up on the CMS team at Google. Working on the web platform, trying to make the web platform better. And I still work on WordPress quite a bit in that role.

[00:05:30 ] Nathan Wrigley: Google seemed to be doing a lot more with WordPress.

[00:05:33 ] Adam Silverstein: Absolutely. Since about 2017 when they started showing up at every WordCamp. And also they have that first party plugin Site Kit, which is their own plugin that’s very well supported that connects your WordPress site to Google Services.

[00:05:45 ] Nathan Wrigley: Yeah, we spoke to Felix a few episodes ago. So, if you’re into Site Kit and things like that, you can search for the Felix Arntz episode. But we’re here to talk about images today. And I’m going to lead off with something which is going to make me sound incredibly ignorant, and apologize for that.

And that is simply this. When I visit a webpage or I’m building a website, images basically just magically appear. They’re on my computer. I see that there’s an image, there’s a file name and a file format, JPEG and so on and so forth. But I honestly have no idea how the browser makes the image appear. I don’t know what the mystery voodoo that’s going on in the background to turn a piece of code, I’m guessing, into something visible on the screen. So ridiculous as it may sound. How do we even get images on the web? How does it work?

[00:06:31 ] Adam Silverstein: Yeah, so it’s not a stupid question because it’s it’s incredibly complex, actually how browsers deal with images. But at a very basic level, typically there’s a lot of ways images actually appear on webpages, because it could be in your css or you could load it dynamically with JavaScript.

But in a normal HTML context, you have an image tag, and that image tag has a url. When the browser first gets your HTML page, it goes through a parsing phase where it tries to decipher what all the elements that I’m gonna need to construct this visual page. What CSS do I need, what images do I need?

So it goes through the HTML and each time it encounters an image. It makes another request back to your web server, that’s running WordPress. And then that image is brought back to the browser. Now that’s a binary format, that image. So the browser also has to have a capability of decoding that image. That’s where support for different image formats come in, and all the browsers support all the formats that we’re used to.

But then there’s these more modern formats that maybe aren’t supported. That’s kind of the simple version of it, is the browser finds the reference that you have on your HTML. Goes out and retrieves it, just like it does any asset, and then it decompresses it and puts it on your display.

[00:07:37 ] Nathan Wrigley: If I was to look at the binary code, which made up the image. Which I presume is possible? Is it just a combination of letters, numbers, and characters?

[00:07:46 ] Adam Silverstein: I mean, it’s binary encoding, so I don’t, I don’t actually know what, it’s eight bit probably, or 16 bit encoding. But you’ll have, typically at the first bites of an image will be like a header block. That defines what the image is, the meta information about the image. And then you’ll have the actual data of the image. And that’s in chunks. And it depends on how, what image compression format you’re using.

But typically images are compressed. So you have some information about that compression in the header, and then you have the chunks that make up the file. But it wouldn’t be something, if you looked at it, it wouldn’t make any sense to a human.

[00:08:17 ] Nathan Wrigley: Right.

[00:08:18 ] Adam Silverstein: It would just be like binary data, just a bunch of numbers.

[00:08:20 ] Nathan Wrigley: It kind of reminds me a little bit of TCPIP packets, you know, it’s surrounded with metadata to give, well, in this case it would be the, the OS stack. But, to give the browser information about what’s coming down the pipe in the next moment.

[00:08:32 ] Adam Silverstein: Right.

[00:08:33 ] Nathan Wrigley: So how big it is, what the dimensions are, and so on and so forth. And then each little bit will render I guess a pixel or something like that.

[00:08:40 ] Adam Silverstein: Exactly. You could think of it that way. But you know, in a lot of these compression engines, it’s actually like an eight by eight block, and then there’s more detail. It’s very complicated really.

And even the thing about, like, I very much simplified the how the webpage is loaded because the browser has to decide which resources to load first and which to prioritize. And also just think about an image tag. I