Images and preferred image types/formats are a common subject and in some documentation, it was believed that the PNG format was the one favored by Google. While a JPEG file has compression, a PNG is lossless and also supports transparency. In terms of quality and flexibility, a PNG is therefore ‘superior.’
However, as far as SEOs are concerned, a JPEG has a compression algorithm which can be useful for speeding pages and images being displayed due to smaller file sizes. A downside to the JPEG’s compression though is that an over compressed JPEG will exhibit pixilation along with ‘pooling’ when not enough colors are being used.
Additionally, a JPEG is also pretty poor when it comes to text in images and often sharp edges become blurred with odd pixels of color outside the text in the image. As Google pushes the idea of making a better web through better content, it stands to reason that a PNG would be the favored format over a JPEG.
Does Google have a preference between PNG and JPG? We tested this to see what the real deal is and if there is a particular format that you should be going for, to help you get ranked better.
Test Setup
Five pages were set up without any images and we waited for stability in SERPs.
A JPEG image was created and from that image, a PNG was produced.
All pages were given an image at the same time, with the page in the 3rd position given the png. The other pages had the jpg image.
Results
It was expected the PNG page would rise to the top. Surprisingly, the PNG dropped to the bottom. What was worth noting here is that the SERPs never danced around at all from the first 5 pages indexed to the images being added. The drop was the only change in ranking position throughout the test.
Clint’s Feedback
In this video, Clint discusses this test and he also talks about WebP and Avif, which are more relevant and useful at present.
Test Number 64: PNG vs JPG: Is There A Better Image File?
Today WebP is actually, everyone’s jumping on the bandwagon – oh yeah, you should do webp, you should do webp, webp is the greatest ever. And they all act like it’s relatively new, well it’s been around since 2010. Google made webp image file format and a lot of the browser’s didn’t implement it so they can read it. And so, what we ended up with is a slow transition from JPEG to web P. And before that, it was PNG to JPEG.
The reason you want to do that, it’s all about PageSpeed. A webp or a JPEG could be a rather large file and a webp is better optimized. It is like 33%, it could be optimized 33% better than the JPEG, and so it takes less time to load that image.
What this test was, at the time the test was conducted, I believe it was a 2018 test. The idea was that someone got it in their head that PNGs were actually preferred by Google. Which is weird, because PNGs typically load slower than JPGs.
From the test result, you can see it right there at the bottom. As soon as the PNG was put on the page, the test page drops to the bottom of the other results. It’s an indication of a significant change in PageSpeed, that caused that drop.
What I mean by that is, let’s say all the test pages were loading at 1.5 seconds, we put the JPEG on there, and that page was two seconds, and then we put the PNG on there, and it was 3.54 seconds. That significant difference between all of those pages, means that this is the slowest one, so we’re not going to reduce it on the rankings.
If you change that up, and the PNG actually loaded, probably the same as the JPEG, I doubt we would have seen that significant of a drop. But it’s the load time that was killing it in this test.
Now again, the new craze inside the internet marketing world and the SEO world, for example, is webP. Now this has been around since 2010, like I said. There are services – Meshpro, WPRocket and some other things that allow you to implement this, but the reason it hadn’t jumped on is because Google made it but didn’t update Chrome and the various different instances of Chrome, like their latest one would get it, but the older ones would not and you couldn’t see webp was on browsers.
Firefox was just as slow, it was a Google thing, this is Google and we’re trying to implement this in Firefox as well, we don’t care about you Google in this particular webp thing till a lot of people are using it.
As developers and web designers and etc, caught on that webp was fascinating than JPEG, they got more and more and then finally, Firefox and Safari are now allowed or can read webp. So typically as a default, as a webmaster, now, you can just go straight to webp and you’ll be fine. You don’t have to have a service to push it over.
But there is even a better one, it is called Avif. And if you don’t know what Avif is, it’s basically, there’s a movie format for Avif and then now there’s an image one built off of the back of that movie format to make the images better. In this case, they’re actually 50% smaller than a JPEG and you can’t really tell the difference between the image that’s in JPEG and the images in Avif. The compression doesn’t mess up the image, doesn’t make it even more grainy and stuff.
If you’re a photographer, you probably noticed the graininess. Let’s be honest, if you’re a photographer, and you look at your image, and you put it on the webp, you’re probably noticed the graininess between the two. But for the average user, they wouldn’t even be able to tell the difference between the two and your page speed would be a lot better.
You can still implement this stuff – avif, webp, and jpeg today, and there’s a tool called Squoosh. It’s a Google app. So you drop your image in here, and then you can pick the format you want, and then upload it to your website, and you can save yourself the subscription to the image optimization plugins or whatever else, if you want to. You just gotta add this one little step to your workflow that those are doing for you automatically.
If you’re going to switch to avif and see if that works for you, and it does, it makes your sites even all that much better, you’re pretty much eliminated the Squoosh. I tried to check Photoshop, but I’m on a Mac and Photoshop just updated and they were stuck in the verification and it’s taking too long, and I’m kind of impatient. But you can check in Photoshop and see if you can save to avif. If not, you just brings it over here, brings your JPEGs over here that you’re done with, you’ve edited and modified, and then transfer it over and get them compressed in Squoosh. And boom, Bob’s your uncle, you have a really good optimized page or image that is busted down, and a lot less of a strain on your servers in the internet, and all that madness.
So keep this in mind. I mean, you have to use avif, there’s really good to know, if you have all webps on there and you have a plugin that’s taking care of the web stuff, are they going to see that difference between the two? Because it’s not significant, right? Let me show you the numbers here – it’s like 33% versus 30%.
An average user, are they really going to notice this? Probably not, unless you have a whole lot of images and they might all add up. But if you have a plugin that’s already converting all your JPEGs over to webp for you, then avif probably, adding that step is probably not necessary. Unless you want to eliminate that plugin altogether from your toolset. And in some cases, some of those image optimization plugins are getting a little bit too counterproductive compared to other things. So like I have a Smush Pro, and I have a lazy loader, and CDNs and all that other stuff, but all I really want is to optimize my images. I don’t need all that other crap. I can use WP Rocket, and WP offload to set up CDNs and all that stuff, I don’t need you to add all these other features, just optimize my images for me, right? So if that’s the case, you are going to get tired of doing that, you can just switch over to avif entirely for future pages, shut off the optimization plugins, and then just do direct uploads avif, and you’ll be okay.
One of the factors if you do that, keep in mind, if you do that, let’s say this image is 1200 by 780 and that’s the requirement, but when I minimize it, it’s going to change the image size inside of what loads and that may be less, right? Modern builders oxygen, for example, will have set sizes for these and then these plugins will create set sizes for those different views. So it’s not loading a 1200 by 80, it’s loading a 500 by whatever, right, and reducing the load time for the page for a mobile user. So keep that in mind too, that you have to account for that especially if you’re using some larger image size, larger image dimension stuff. If you’re going to go that whole manual route, I would kind of mix them both, personally. Maybe put avif and use a plugin to create those. But you have to see if your plugin is compatible with avif, to pull that off.
Hopefully, this helps you out. Again, PNG is slower than JPEG and JPEG is slower than WebP, and WebP is slower than Avif, and if you are truly a page speed fanatic, that matters to you. Implement that in your business as it applies to you.