How to Choose your Image Optimization

In this second episode of our new series, Web Perfectionist 101, Rigor’s Billy Hoffman explains image optimizations available to Best Buy and LG.  He also discusses lossy vs lossless image optimization to help viewers understand the best uses for each within the context of optimizing web performance.


Audio Transcript:

Hello, I’m Billy Hoffman from Rigor. On this edition of Web Perfectionist, we’re going to take a look at how do you know what image optimizations to apply in a given situation. I’m looking at the Best Buy website. If we scroll down, this is the LG portal. We see that this image right here, this image of a monitor, it actually can get optimized. We’re going to dive into that. I scanned this using Rigor optimization and here’s the image. We see that it’s a transparent PNG and we flag 5 possible optimizations for it. First one is actually down here.

We see that this is actually being served by Akamai, CDN which is funny because it means all of these other optimizations is Best Buy just flushing money down the toilet to Akamai, because this thing hasn’t been modified for 4 months but it’s not being cached by the browser. We also see that there’s 3 different image optimizations that can be done. That’s really what I want to talk about is how do you know which image optimization to do. This one right here, number 2, on optimized image PNG, this is a lossless optimization. This is just stripping out metadata and re-compressing the chunks inside the PNG. We see that just doing this, we can go from 284k down to 165.

Now I’ve got this pretty cool slider to compare back and forth, but there’s really no reason to do this. These are pixel perfect copies of each other, because it’s a lossless optimization. We haven’t altered the graphic data at all. We can almost cut the image in half. Lossless image optimizations are no brainer. If you can only do one thing, do a lossless image optimization and ideally build it into your build or your deploy process, so you never had to worry about it again. We actually make it available for you to just go ahead and download the optimized image which is pretty awesome. Now there are some other optimizations we can do. There’s 2 more lossy optimizations.

Now a lossy optimization is when we’re actually changing the graphical data in some way. Now that sometimes scares people and makes them say, “I don’t want to do that. I don’t want to mess up the image.” We’ve been able to identify some really significant savings. The first one I want to dive into is this JPEG candidate image, transparent PNG. If you look at this image, this is a photograph, right? Photographs should be saved as JPEGs. PNGs are terrible at storing photographic data, because of just the way they store data. They’re not designed to do that, but JPEGs don’t let you have transparency. This image has transparency. If we made this a JPEG, we would have to get rid of the transparent background and put a specific background on it.

If we actually click into this, we see that this is just a solid white background behind this image. There’s no gradient, there’s no craziness, and the image never really moves. It’s not like this thing is sliding back and forth or there’s a gradient. The background behind this image never changes. Also really good on a responsive design there. Best Buy, that’s not great. This never changes. What we can do is we could flatten this onto a white background and that’s exactly what Rigor optimization is suggesting. If you flatten this onto a white background, we go from 284k to 66k. That’s over a 75% savings, because they saved this as a PNG and they should have saved this as a JPEG.

Absolutely if possible, you should convert to a JPEG. Savings is significant. I mean imagine that. Let’s just assume this is the only thing on Akamai. Imagine cutting your CDN bill in half by 75% or cutting your CDN bill by 75%. That would be awesome. The final thing you could do is say, “Well, if we went back to this, let’s say that this wasn’t a solid white background. Maybe it was some sort of crazy transparent background or zebra striping or vertical strips or something funny, so that as you move this around, the background behind the image changed and moved.” Basically you couldn’t keep it. You’d have to have to have it be transparent. Well, Rigor identifies one more optimization you can do.

It’s another lossy optimization which is a PNG8. We actually could convert this image. We detected that. It only has about 2400 distinct colors. With those few colors, you actually convert it from a PNG24 to a PNG8. PNG8 is only going to give you 256 distinct colors, but there’s so few distinct colors in this image that you can hardly tell the difference. We see it’s 284k. If we convert it to a PNG8, it’s 121. Still about twice the size if this was a JPEG, but the really cool part is, it’s still a transparency and you can of course download this as well. Those are really your 3 options we see with this. Automatically always do a lossless optimization if you can only do one thing. If you see 2 different lossy optimizations, look at context.

In this case, it should never have been a PNG. It really should be a JPEG. You should convert it to a JPEG, but on the off chance that you do need to keep that background transparency, you can go ahead and convert it to a PNG8. All of these things will make Best Buy faster and means that they won’t give Akamai quite so much money. Thanks for watching.


Suggested Blog Posts

The Perception Gap for Poor Web Performance

E-commerce revenue continues to grow,as consumers turn away from shopping in brick-and-mortar stores to shopping online.  However, many businesses are not prepared for this growth because they do not fully understand the market and how to invest in...

Read More

Using Browser Trends to Maintain a Better Site

Because of the multifarious nature of web clients today, it’s important to consider the usage statistics when designing, implementing, and managing your site. However, misconceptions often arise when determining what browsers to design...

Read More

Finding Causes of Intermittent Errors from Google Webmaster Tools

Google Webmaster Tools is a web service that allows webmasters to view the status of their sites as seen by Google and the Googlebot crawlers. In addition to indexing your site structure and content, the Googlebot crawlers also record data on perform...

Read More

Optimization Options not Always Optimal

Web designers and developers are always looking for ways to speed up their page load times. Yahoo has an excellent article written on the best practices for speeding up your page. How do you know if implementing one of their suggested practices will...

Read More