188: Optimizing Your Website’s Images with Simon Duduica

In this episode, I chat about a free event where you can ask Lindsay and Bjork your questions about blogging. And then Bjork interviews Simon from Short Pixel about optimizing images on your website. Hello wonderful listener. You are listening to the Food Blogger Pro podcast. How's it going this fine Tuesday? I am doing particularly well because we are experiencing a warm spell here in Pittsburgh, Pennsylvania. The sun is shining and I'm actually recording this with, wait for it, my window wide open. I hope your day is equally as awesome. Today's episode of the podcast is sponsored by WP Tasty, a food blogger's go to site for WordPress plugins if you're interested in learning more about WPTasty's recipe plugin, their Pinterest Optimization plugin, and their keyword auto Linking plugin. Be sure to head on wptasty.com and for today's tasty tip, we wanted to let you know about an incredibly exciting event happening in just a few weeks. It's a free virtual live Q and A with none other than our fearless leaders Bjork and Lindsay Ostrom. And it's all about growing your food blog in 2019. You can ask any blogging related questions during this Q and A and Bjork and Lindsay will answer them live on Tuesday, February 19th at 1pm Eastern, 12pm Central. It's going to be so much fun. We are all just so excited and jazzed up to see you there at this live Q and A. And you can learn more and register@foodbloggerpro.com Register. And now the interview. We all know that optimization is important when it comes to building a website. So today's interview actually focuses on optimizing images. Optimizing images on food blogs is especially important because, well, people eat with their eyes. It's just as important to make your images look good as it is to optimize them for site performance and speed. That's where shortpixel comes in. They help you optimize your images in a way that doesn't compromise quality or that pop that we all want to see in our images. Short Pixel's head of technology, Simon is here to chat through what optimizing your images actually means and how you can make sure that the images on your site are optimized. So, without any further ado, Bjork, take it away.

Simon, welcome to the podcast.

Thanks. Yeah, thank you.

We're excited. Before we hit record here, I was talking to you and I said I'm really excited to share this episode with our audience because I think that there's going to be some really great concepts and some things that they'll learn. And also really excited selfishly, because this is something that we're going to be doing. This is something that we're in the middle of for our food blog. And so we're going to learn from the process as well. And it's something that we've needed to do for a really long time. So I'm excited to move forward with it. But before we talk about kind of the behind the scenes of what Short Pixel does, can you take us back? It's probably about four years now and share a little bit about when Short Pixel was in the very beginning stages, when your company was just starting up. What were you doing and what was the problem that you were trying to solve?

Yeah, well, it all started in 2014. We were working at a different project which somehow was using servers to process to do thumbnails of the websites. And these servers were used in. There were peaks of usage and then the servers would not be used for a long time. So we started, we started a bit not from the problem, but from the availability of resources we had. And we thought, what should we do to put the servers to work? And in the same time we noticed sites, we had also a problem with the site which loaded slowly because of the images. And you know, this is how the ideas come.

And then you said, we have these servers and we have these really big images and then kind of paired. Paired those things together. It's interesting. I don't know if this is true, but I've heard that it was kind of the same story for Amazon Web Services. So for, for those that aren't, as in, you know, into the tech world, Amazon has this entire really successful branch that is all like server based stuff. And the story that I heard was, you know, there's this executive meeting and it was kind of the same exact thing that you're talking about where they were like, hey, there's times where it's not, you know, Christmas or Black Friday, where people aren't buying stuff like crazy from Amazon and our servers are kind of not being utilized. What do we do? And they launched AWS out of that. So kind of a similar story with you in Short Pixel where you have these servers available and you say, hey, what should we do with these? Hey, let's optimize images. It's a really intense process, takes a lot of server power. And so you connect those two things up. So at that was it the kind of Thing where you said, hey, let's do this, you started to work on it and then soon that kind of side project grew into. You realized it was a really big problem and then it kind of grew into the main thing. Is that the main focus now or are you still working on the other business?

Yeah, now it's the main focus.

Got it. Cool. So for those that aren't familiar, can you talk a little bit about what Shortpixel is and what it does? And it can work for any website. But the nice thing is the majority of people that are listening to this are probably WordPress users. So we can use that as context as we have the conversation. So if somebody has a WordPress blog, how does Shortpixel help them and why is it important?

So if you have a blog which has most of the bugs, have a lot of images, then your page loads with the speed of the images because you have two things for the page loading which are important. First is page rendering which is on server. And then you have the part, the transfer of the image to the user's browser. For the first part which is rendering, it's important to have a server which is able to render the page fast, which this is WordPress engine side and server side. But then once the server gets a page ready, then you can use also cache plugins which will serve the page already rendered. So you can speed things up on server side. But then for getting the things to the user's browser you are some, in a way you are powerless because you depend on his connection, Internet connection. So what can you do? You can make things smaller, you can make your CSS smaller, you can make your HTML smaller, you can make. But then you come to the images and you look at the statistics and Your page is 65 2/3 images. So you can optimize a lot your text size of the page. But then you will hit this part which is you cannot optimize in the same way. And it's a big lump of your page.

Yeah, it's interesting, you know, all of those different components that kind of, I kind of think of it as like a soup. And how do you make the tastiest, you know, speed soup. And we're going to use food analogies as much as possible. So like you said, you know, so that first there's the actual server that your site is on. And for us we use WP engine. So this is a hosting company that is. And this is for Pinch of Yum, the food and recipe blog that we have. So this is A hosting company that kind of specializes in WordPress websites. So that's an example that obviously there's lots of hosting companies. And then the other thing you talked about is, you know, caching and being really intentional with that. It would be another podcast episode. It's a little bit technical, but just for people that are interested. The service that we use is cloudflare, which is a popular and well known service. So those are all things that, that aren't related to the optimization with images. They're kind of things that you need to do in order for yourself and for your site and things that you can control. But the one thing that you said that's so interesting is you can't control the speed of the Internet of somebody that's accessing your website. And one of the things that was such a learning experience for me was we live in, in a, in a kind of major metropolitan area, so we have fast Internet and we pay for the top plan because we're on the Internet all the time. It's our business. But we did a vacation with my wife's family in this area kind of in, in the Northwoods. And, and it's, you know, it's a place where people go not to work, but to get away. And I went to the local library to do some work and I was like, the Internet is so slow. And I went to our website and it took to load. And it's because of those things that you said where the. It was, it was a reminder to me like, hey, Everybody doesn't have LTE Internet and 100, you know, megabyte download speed for their Internet. And a lot of people are using the day their daily Internet on something that's a lot slower. And the thing like you said that was taking so long to load was the images. And for food blogs, for recipe blogs, we have so many images. Uh, people love to include 3, 4, 5, 6 images in a post. And so it's important to know that if somebody has slow Internet and they go there, it's gonna take a long time for them to load and they might leave. So my question for you would be, let's say somebody's listening to this podcast and they say, oh, that makes sense. I need to have images that load really quickly that are optimized. How does somebody know if the images on their website are actually optimized or not? Is there a test you can do?

Yeah, there is a test. There are several ways to test them. First, I would say there's no fully optimized when you Talk about the images. Because when you have your image, the original one, in order to optimize it, you can optimize it losslessly, which is you are make sure each pixel is identical, the original, or you can go further and just change it in a way that is not noticeable for the eye, it's not noticeable for the average eye, and you really make it smaller. But then actually, if you do this over and again on the same image and then you compare it with the original, you do it several times, then you will notice the differences because they get bigger differences. So you can go on optimizing it and make it smaller and smaller and smaller, but with a trade of quality. Got it. This is why optimizing images is not something really like there's no silver bullet, or should I say, there's no easy way to do it and to make sure it's optimal. So this is why we're also, how should I say, we are having a complex algorithm to find the sweet spot.

And it seems almost like there'd be. It's an art as much as a science because you are presenting an image and trying to keep the quality as high as possible, trying to make it as identical to the original as possible, while also trying to make it as light as possible so the image itself isn't as heavy. So is that something that shortpixel is doing? Do you, as the user of the plugin in the process and using shortpixel, do you have to decide how much of that you want to do? And what would your recommendation be for somebody who's coming in and saying, hey, I don't want to tweak this, I don't want to mess with it? What would be a good starting place where somebody can get some really good improvements without as much impact on the actual quality of the image?

At Short Pixel, we're trying with the plugin to take this burden out of choosing. There are some plugins where you go into settings and you have like the plain control panel with switches everywhere, but then you feel lost. I mean, you can do some very good optimization with that, but you should, I mean, learn everything there. You don't have time to. I mean, you're not supposed to do this. So we can. We want to take this off the shoulders of the user. So we offer some very straightforward settings for this. You have three levels of compression. One is lossless. I mean, if you're really trying to avoid any minor change of the image you can stick on that. Then you have. On the other side, you have Lossy, which actually is perfect for most of the cases which I recommend is recommended in the plugin. You get lossy default and recommended which gets the best trade off between optimization and vis difference of the image. Which actually most of the cases, if you take a picture outside and you put it on the website and you optimize it lossy, you won't see difference at all.

But there also won't be as much improvement.

No, no, no. This is the one with most improvement.

Oh, I see. So loss less is the least amount of improvement and the lossi. Yep, loss is the most. Got it. But most people, even with lossy won't see the impact.

Yeah, in most of the cases the impact won't be seen. I mean most of the images more than most of the people. You have lossy a picture taken outside with your phone or something like this, you put it on the website, you won't see a thing. I mean you won't see a difference.

You'll still see the image, but not a difference.

Yeah, that's right.

Yeah.

In between the two, we didn't have this initially. There's a setting which is called glossy, like the glossy magazines, which was developed together with photographs photographers which wanted their images optimized on their websites. But where are most more picky, especially for images shot with very high end cameras which are very sharp to the detail and especially for these images you can spot the difference at maximum resolution. So we developed this mid range optimization which still has a very good percentage of optimization and is okay for these cases where you really want the image to look sharp, perfectly sharp.

That's really interesting. So my wife Lindsay, who does all the photography for our food blog, that's one of the hardest things when we've done image optimization and looked into doing it in the past, is that she's so particular about the impact that the optimization process has on the image. And so it's really hard for her to spend so much time really being intentional about getting the exact colors and the sharpness and then to put it through a really aggressive image optimization process. So it seems like for people who are extremely particular about how their images look, that would be a good kind of middle ground, the glossy, where you're still optimizing but maybe retaining some of that sharpness and the colors and things like that that you were so intentional to get originally. So is that in short pixel, Is that an option where you can go and pick loss less glossy or lossy?

That's right. Got it. It's the first option after The. It's actually the first option. Because first the API key, which is not an option. I mean.

Yes.

Yeah, you need it.

Yep, yep, got it. So that's really interesting. And one of the things I think we did a little rabbit trail away from it. But we talked about how do you know on your website what is the test that you can run and get a good idea of like, hey, I can do this much optimization or this is how bad my site is. For instance, what would you recommend for people to learn about if this is something they need to do?

You can use one of the online services which are doing this. You can just paste your website's address in a tool like GTMetrix or Google PageSpeed Insights and they will analyze a lot of things and also the images. Then you can also go to our website and you can paste your URL there and short pixel will tell you how much it would optimize on the page that you pasted there with the list of images. Yeah, regarding.

And we'll link to that in the show notes just for people that are listening, both of those things. But go ahead. You're saying regarding.

Yeah, regarding. Especially Google Page paid insight, you need to take this with a grain of salt sometimes because when PSI analyzes your image, it starts from the image you have on your page and linking to what I was telling you before, if you take an image and you optimize it again, they use lossy algorithms, then you will gain a little bit. And if Google PageSpeed Insights complains that your image is not optimized and you can gain 5%, then it's okay. Because, well, on many images you can get sometimes as being too aggressive.

Got it. So point being, for people that are using the PageSpeed Insight type stuff, the tools from Google to be aware that there might be times when Google says, hey, you need to compress your images even more. But in general the feedback is going to be from them is going to be pretty aggressive in terms of what they view as a fully optimized image.

Yeah, it happens sometimes that you don't have your image optimized with short pixel. You go to Google PageSpeed Insights and Google PageSpeed Insights says you can optimize it with 30%, you optimize it with short pixel and it optimizes it with 60%. Then you go to PageSpeed Insight and it will say again, you can optimize it by 3, 5%, something like this.

Got it.

Even if you did double.

Yeah, so they're saying if you run the insights and the Tool says, hey, you could optimize this image by 30% still. And then you go back to Short pixel and say, hey, I want to optimize it by 60%, doubling what the recommendation was. That doesn't necessarily mean that you're going to go back and the insights will say, hey, zero percent. You've done everything you can potentially. There will always be a little bit more that you can do in terms of optimization. It's not going to bring it to zero, essentially.

Yeah. Because it's not comparing with the original image.

Yeah.

It's just taking the image it has there and try to optimize it.

Got it.

But then the image optimized several times will have visual artifacts which are not okay. And we're making sure this doesn't happen.

Got it. Great. So can you talk about. So let's say that somebody installs short pixel and they have a WordPress site. They have it up and running on their site. What does the actual process look like in terms of when they hit the button to optimize their images? You know, I would assume for some people it's kind of this scary thing where it's like, are all my images going to be ruined? You know what can you talk about what happens when people hit that button? And the general. You don't have to get into the super technical details. I know that you could. But the general process of what happens to people's images.

Yeah. First of all, I would like to emphasize the fact that with default settings, each and every image is backed up before doing anything. So you have the option to restore it. It's not that you're doing something, you're jumping and into the void.

Yes, right. Right.

You have a safety net. Then what ShotPixel does when you start bulk optimizing your former images is that it takes each image one by one, going back in time from the most recent images to the older ones. And then for each image, it sends a request to the server with the list with the image and its thumbnails. It's important also to optimize the thumbnails. You have options not to do that, but usually they are the most displayed versions of the image. Not the big image, but the thumbnails. It sends the request to server, server optimizes, and the images are put, are replaced on the server. On your server. Okay. On your site, first step was to copy all the images, I mean the image and its thumbnails, to the backup folder. And then it displays on the screen, if you are in the about page it displays the two, the original and the optimized image next to each other. One left, one right. So you can see that they look the same. We had a lot of customers which gave us a feedback that is addictive to sit and look at the images. Sliding.

Yeah, right. And you can see that on the homepage like a sliding to compare what it was and what it is. So essentially reassuring people that this is what the change will look like so people can feel comfortable making the change.

Yeah, that's right. That's right. So that's all that happens. Then you have a lot of advanced options for optimizing images which are not in media library. For removing EXIF info or keeping it. Actually the default is to remove it.

Can you talk about what that is? Because I think there's a lot of people who aren't familiar with the fact that their images carry around this extra information, this extra data within the actual image file itself. And there's some weight to that. Like does that EXIF data load if you have an image with EXIF data on your web website?

Yes. The EXIF data is part of the file so it gets downloaded to the client visitors browser. What is EXIF is the information structure which is embedded in the image which can contain a lot of things. It can contain location, device. Device. Yeah. Camera information. It can contain thumbnails, so smaller versions of the same image. Then all this image, all this information. Then it contains also a color profile which is important. So on one side you would want to clean it up because can be personal information there like the GPS position of where it was taken or something about your phone model because of the model of the camera. So you have this information. Then it takes space, especially for a small image. This is an important part of the image which. The image carries around so it gets downloaded slower because of it. Then the color profile. We are removing the exif, but we are keeping the color profile because this is important. Sometimes if you remove the color profile, you see that the image changes colors not totally from green to red, but the red is not the same or the green is not the same. Bit different. So the logic behind this, if the image is small, like a thumbnail, we're moving it because in our experience it's not a problem for small images. The most problem is for big images.

Yeah, it's interesting. I think that will be a big realization for a lot of people that if you. And for me, I'm using Apple Computer, so I right click and then I can say get info on an image and that's kind of what you're talking about. And if images don't have that EXIF information removed, essentially, like that extra data removed, it's possible that it could show like when the image was taken, like you said, if it's with your phone or some, or some DSLR cameras, it can show the location. So like the, the latitude, longitude of like maybe your house, if it was there, which isn't ideal in most situations, it could also show, you know, what camera it was that took it. And then you said the color profile, which I can see, I just pulled one of the images off of our website and it. So it shows that, you know, rgb, you know, additional information about the color profile. And like you said, hey, that's really important to keep that there. You want that as part of it because that data is important. So it keeps that in. But otherwise this data is just kind of floating around with the image and there's no real positive to it, especially on the web. Obviously, if you're using it just personally, it's okay because then you can see like in your phone, hey, this is where the image was taken. You know, we did a trip to Europe last year. And so I can see like, hey, this is when we were in, you know, Austria and we went up this to the top of this mountain, like, and I have that information because of the gps. But when you put that on your web website, you want that removed. And it sounds like what you said is the default for short pixel is to remove that.

Right, Got it.

Cool.

We have an option for this in order to keep it, because there are cases when, for example, the most common example is photographers, they put on purpose in the EXIF information about them, author, and also some information like this, copyright things like this. They wanted that they know what they're doing. They. They're removing things which they don't want, that they keep what they want. So we have an option for this. Keep my exif.

Got it. For people that want to kind of include a little disclaimer or copyright within, within the image itself, saying, this, I own this. Here's my website, here's my information. And professional photographers, obviously that would be an important part of what they do. So the. One of the questions that I have that I would assume some of the audience members would be thinking about, a lot of people that listen to this podcast are really intentional about optimizing their images. Not from the sense of like the actual image file size, but from. From an SEO perspective are really intentional to include a really strong Alt text. And so they're describing the image. Some of our users use a plugin that we created called Tastypins, which also allows users to put in a Pinterest description into the code of their image. And users don't actually see that, but that's a part of the image code. And one of the questions that I'm sure will come up is, hey, when an optimization process takes place, is there anything that's changed on my website, on my blog post, in terms of the actual code for the image? Or even like, does the image file name change or does that stay the same if somebody was intentional about naming the file in a certain way? Does the optimization process with shortpixel impact that at all?

The short answer is no. The page remains the same. The URL of the image remains the same. Except there is a case. You know about webp images. Webp images are an algorithm developed by Google. So it's a different image format which makes the file smaller for the same visual quality, but it's not compatible at all with jpeg, for example, or png. And currently not all the browser are displaying this type of image.

Got it.

So we are also generating WebP versions of the image with an option it's not by default. And we are also implementing a change in the pages in order to use this image only. With this situation, ShowPixel changes the HTML of the page, but then only in some specific case, because we have two ways of doing it. The first way, which is under development right now, well, actually it will be the second way, but it will become. The first way is without this modification. But in the second way, which is the current way, it is possible now to use an option which changes the the page HTML only in this particular case. Otherwise there's nothing that changes in the website.

Got it.

Just the images being smaller.

Yep. And that's really interesting. This is kind of like Internet 2.0 or Internet 3 point, not 2.0201. So we're kind of taking the advanced class in the in blogging. And it's a really interesting piece of information. So what you're saying with WebP is that if you look at an image and it's a JPEG or a png, those are all kind of different types of images. And normally people would look at it and it would just be an image, would be an image, but they're a certain kind of file format for an image. And what you're saying is Google has developed a new type of image for the web called webp and my guess would be that this is a high quality, really lightweight type of image that is made specifically for the web. Is that right?

Yeah, that's right. Actually, it's not that new. It's not the only one. You know, JPEG was developed a long time ago for the web. It's a long time ago. It was in the 90s or even before, but it was developed a long time ago. And the developers of JPEG improved the algorithm. There is also another version of JPEG which is paired shoulder to shoulder with the webp. The only thing is that Google, with the webp and with Chrome, they were able to push it forward for Apple also has JPEG GT or something like this, which is they're supporting. And this also an advanced format which is pairs with webp.

Got it.

But we choose webp because of it started from our customer. We're listening a lot to our customers. When they have a problem and they write us about something they encountered or either a problem, either a need, we're making sure we listen to them because this is how we got a lot of things into the plugin and our service, which are really helpful for them. And the webp came up in the same manner from customers which said, well, we heard about this. Is it possible to have it in your plugin? And we did it, Got it.

And you were saying that this is kind of an advanced feature. So for people who are listening to this and they're like, maybe their head is spinning a little bit, they're not technical. There's some people that will listen and say, hey, this is so cool, I want to learn more about it. And they'll make a little note about it and I know, do a lot of research about it. And then there are some people who are like, oh, this is so technical and overwhelming. You were saying, hey, the one instance where something might change would be if you get into the really advanced area of the plugin and decide that you want to do some optimization or use webp images, then there's some things that we're doing in the background. But if you go through the default process, nothing will change. Your image file name will stay the same, the file type will stay the same, everything will stay the same. Other than the fact that your images will be replaced with an optimized version of the images, which I think people will say, hey, great, that sounds good. But let's say that, you know, people are always a little bit nervous about making a change to their website. If somebody says, you know, I'm gonna go through this process. I wanna know if it's possible to undo it. Is that something that's possible if you go through the process? And I'm sure it would work out well, but people just like to know, is there an undo button for whatever reason, kind of an escape hatch if something happens?

Yes, of course, of course. We are optimizing images and making backups for each image. And as you are able to optimize with only one click, then you are able also to restore everything with one click.

Got it.

You can also restore only one image or you can just change the setting for one image from lossy to lossless. You will have. This is a situation which can happen, for example, if you have images, you took a picture outside with nice landscape and you wrote with your image editor, you put a text on it, which the text has very sharp edges. And the image with the landscape is. Well, it's more gradual. The changes of colors are more gradual. In this case, if you apply a lossy compression, you will notice around the text visible changes. Very, very. I mean, if you look carefully, you'll see them otherwise not. But in this case you might see differences. This is particular situation. You mix two different types of image in the same image and then for this one you will notice it and you'll say, okay, I want this sharper. You will go, push the button, change it to lossless compression.

Got it. That's a really interesting point because there's a lot of people that will. I think of an example on our blog we have a post called how to cook Chicken. And it's just this really in depth, awesome article that one of our team members, Emily, worked on. And the very first image is kind of an image optimized for Pinterest. And it has this block of text and it says how to cook chicken. And what you're saying is if you're going to really aggressively optimize that image because it has text and a box with really hard lines, you might notice kind of some that those edges are soft instead of hard. And you want those hard edges on text. So you're saying you can go in after and choose one of these other less aggressive methods of optimization. And you might want to go lossless, which is still kind of compressing and optimizing it. But it's not as aggressive as a lossy compression would be.

So to think lossy is already enough.

Got it. Yep. So you could do the middle ground. We talked about lossless, glossy and lossy. You could do the middle ground, glossy and that would be enough to have those sharp edges on the images.

Right, got it.

So that's a really cool takeaway. So the idea being you probably want to go in and for your entire site go through this process of optimizing all the images and just have short pixel go in and say, hey, optimize my site with these probably default settings. But then to go in and say, hey, what are the small tweaks that I want to make with certain images that I want to make sure are crisp? And usually those would be text based images that you want to do that with. It's a great takeaway. So, you know, we're kind of coming to the end here. One of the questions that I want to ask about, and this is a little bit technical, but I think it's still really important and for people to. You don't have to understand it perfectly for people that are listening and. But I think it's important is this, it's, it's this idea of retina images and why those are becoming more and more important. And then what people should think about as they think about having images that look good on a retina screen but are also optimized. So if somebody's wanting to do retina images, can you talk about what that is, how they can do it, but then also how they can be smart about optimizing?

Yeah, okay. Retina images. I would start with Retina display. Actually it's not that complicated. You have for example your computer display which is 1920 pixels wide. But then Apple says I have a screen which is 1920 double pixels. I mean for each they're doubling the resolution. But they making, they're saying they have the one time resolution. So for each pixel they have two by two pixels behind. So if they display a normal web page, the text they display it as on a 1920 screen display. But the images, they can't display a double side image which double size image which is well, much sharper. So If I have 600 pixels image on my normal display, then I can put Inside there a 1200 pixel image on the same size which of course is sharper. The image has much more details. So this is the display. What can do for the viewer then? Now if the viewer loads a page which has the normal 600 pixel image, it will not be any difference. But for a user, for a visitor, which is used with other sites which have retina images which look sharp and also for what happens around the picture like the fact that the text is sharper because the text takes advantage the browser takes advantage of the Retina to display sharper text and sharper everything around, like menus and all. Then the image will look a bit blurry just because it's a 600 pixel image and everything around is double resolution. So what you can do is to use a plugin, Retina plugin. You can search on the Marketplace on the WordPress plugins list and you have the first one you encounter there is. Okay. And this plugin will generate Retina versions of the image. Well, if you have a 600 pixel image, the original image is 600 pixel, it won't be able to do much. It will double the image. But the image, if you take it from 600 pixel and you double, will be a bit blurry because of this.

Yeah. So it's stretching out an image that was already small.

Yeah, yeah, but usually it's not like this. Usually you have a big image and WordPress will generate smaller sizes. So the 600 pixel image is a thumbnail of the original image. So the Retina plugin behind makes sure it takes the original image, which might be 2,000 pixels or maybe bigger, and also generates 1,200 pixel image. And then you will have on your server the two images, the one with 600 and the one with 1200 pixel. And also together with the theme the plugin will serve, will change. This is a change in the HTML, which usually the team does. But the plugin, the Retina plugin provides the information that there is a Retina image or just provides the Retina image. And the browser will receive two URLs for the same image, the one, the normal one and the retina one. And the browser will decide to load the Retina image, which is bigger and will look sharper.

Is the browser smart enough to know and to see? And for those that want to get into the kind of nitty gritty details of it, would that be source set? Is that the. When you talk about serving the multiple sets of images, is that the code that it's, that it's serving is the source code? Okay, so, and this is, I think, another really good takeaway for people to understand how their website is working and how WordPress is working and their blog is working. When you load an image, almost always what's happening is that WordPress is taking that and creating multiple versions of that. So if you, if you upload one image, chances are there's maybe three, four, depending on the theme you're using, there could be five different versions of that image at different sizes and they do that, because let's say if you have thumbnails like on Pinch of Yum. If you go to, you know, our homepage, what you'll see is there'll be, there'll be a thumbnail of each of the. It's under latest and greatest the. A thumbnail of each of the recent recipes. That's not the image we uploaded, that's a smaller version of that image and it's loaded in there. And what you're saying is that these different versions are created and the browser is smart enough to say hey, let's load the full Retina image in this instance. Because I'm a browser that is on a monitor that is going to be able to fully utilize that and fully optimize for that. And if it's on a smaller one then it's not going to load that same size. So what you said point being that there's, you know, you can use a plugin for that. Is there one that you recommend? Or you said, hey, just search on the WordPress Marketplace and see if there's a, you know, well rated, continually updated Retina plugin available.

We are usually recommending WP retina 2. X which works well with short pixel by the way. The thumbnails. The Retina thumbnails are also search found by short pixel and they are optimized.

Okay.

Which is one of the features that we provide.

Great.

This WP retina 2. X has absolutely. Okay, okay, great.

And that's in the, that's available as a plugin in the, you can search in for the plugins area in WordPress and you'll see that I just googled it and it popped up right away as well. A great takeaway for people that want to have those Retina images. And something a note that I made as well because that's something that we need to look into. We're doing Retina images but we're manually putting in a larger image size and then WordPress is generating those other sizes. So that's another area. Actually just made a note on my personal to do's to look into that and to optimize that on our side as well. So we're coming to the end. And the last question that I want to ask you, Simon, after you know, we talked through all of this is really about optimization. So when you think about optimizing your website, there's lots of stuff that you can do. But what would you recommend people do as kind of the first step, the thing that they would do that's really important as they get into it if they want to optimize their website.

Well, let me pick up on what we said when we started this. You know, optimizing a website would be kind of like seasoning a dish, a recipe. Yeah. Let's imagine you have a soup.

Sure.

You cook the soup and you need to add some seasoning. What would be the one seasoning that you need to put inside most of the case? I mean, if you have to choose only one, which one would be that?

Yeah, so let's say. So the question is you have just one. You can only season it with one thing. You've made the soup, it's ready to go. And sometimes people would choose multiple different things to season it. But if you could only choose one, I would say the go to for probably most people would be salt.

Yeah, it makes sense. Makes sense. Well, if you would have to do your site optimization somehow and you have to would have to choose only one thing. Well, let's say the first thing that you would do to optimize it, in my opinion, it's optimize the images. They would give the greatest benefit on the average site. I mean a site which doesn't have specific big problems, but generic optimization needs just go for image optimizing and that would be bring the most benefit on the field of the site.

Great. Yeah. And it's to use another food analogy, we often talk about low hanging fruit. And, and I love that idea of saying, okay, let's you have your website. What is the. If you could only pick one way to kind of season it from an optimization standpoint, what is the salt for optimization? And you're saying, hey, optimize those images. It's the low hanging fruit. It's something that you can move on and can have a really big impact. And after listening to this podcast episode, the great thing is people have some idea around how that works, not only from a technical standpoint, but also some of the recommendations that you'd have in terms of what types of settings they should select and how they should go about doing that. So if somebody is convinced, if they say this is something I know I want to do, if they want to move forward with it, can you talk to them about how they can find shortpixel and the best way to go about starting that process on their website?

Yeah, well, it's pretty simple. You go to shortpixel.com and there you can create your account. You find the tools for different types of website. And if you have a WordPress, which is very frequent, you just search for Short Pixel in the plugins page in your admin interface and you just find the short pixel and install it. Then it's just, yeah, you install automatically. Well, you have to push the button to create the account, but that's all. And then you just start optimizing your images.

Great. Simon, thanks so much for coming on the podcast today and sharing your insights not only on starting Short Pixel, but also how people can optimize their images. I know that a lot of people are going to get a lot out of this, so thanks for coming on and sharing your insight.

Thanks for inviting me, Bjork. It was very nice to be here.

And that does it for us this week friends. But before we wrap this episode up, it's time for our Reviewer of the Week. This review comes from itunes and it's from Brenda from the awesome Blog Become Betty.com Brenda reviews Trader Joe's products like their new pancake bread that looks amazing and she shares easy recipe and cocktail ideas. You guys should definitely check it out. Her review of the Food Blogger Pro podcast says a binge worthy podcast. This podcast is a great one to listen to not just once, but a few times through whatever stage you're at with your blog. There is a lot of great, relevant advice and wonderful guests. It's a great guide whether you are just starting out or looking to continually grow and improve. I'm now on my second listen through all the episodes and it's still a helpful resource full of different perspectives on different areas of the food niche, but also blogging in general. Thanks so much for putting this out there to 1% infinity and beyond. Thank you so much Brenda. It's amazing that you're listening through all of our episodes for the second time and we love that you've deemed the podcast binge worthy. And if you, dear listener, want to be our next Reviewer of the week, all you need to do is leave us a review on itunes and include your name and blog URL in the review. Simple as that. Thank you so much for tuning in this week friends. We'll see you here same time, same place next week, but until then, make it a great week.