When it comes to image formats, PNG and JPG serve two different purposes. Unsurprisingly then, the optimization of these two formats can look very different. JPG is primarily used for photographs, and while obviously these can vary a ton, you can generally use a single tool to optimize them all, and do a pretty fantastic job. However, when it comes to making the most of PNG optimization, we have to consider whether an image should have lossless or lossy compression, or even if it should be converted to WebP or AVIF.
There are many utilities available for PNG optimization, and we’ll look at a few of these in varying categories. Then, we’ll look at how EWWW Image Optimizer uses these options to simplify PNG optimization. Before that, we need to establish one important thing: JPG is for photos, PNG is not. PNG is best for graphics, decorations, logos, borders, even illustrations, but is not meant to be used for photos. I know, I can hear it already, “But JPG is lossy, and I don’t want to lose ANY quality in my perfect photos!” Hang in there, we’ll talk about that in a minute!
The Good: Safety in Lossless
Unlike JPG, the PNG format is intended to be lossless, and so most of the early tools were also lossless: pngcrush, optipng, pngout, and others. PNG compression has multiple compression parameters and even multiple algorithms that change resulting file size. Beyond this, some tools will even experiment with changing the color palette sorting to further maximize the compression. But mostly, it’s all about finding the best compression parameters for a given image, and tools like optipng will allow you to decide how many different combinations you want to try.
Naturally, the more combinations you try, the more CPU and time it’s going to take. Likewise, if you choose a more advanced algorithm like zopfli, it also adds more processing time. No matter what though, these tools are “playing it safe”, and we can do more. They certainly have their place, as a lossless tool will ensure that the data is more efficiently packed after running a lossy optimization.
The Bad: Lossy, but is it really?
No, lossy PNG compression isn’t bad, at least not normally. Note that this is grossly simplified, but a lossy tool like pngquant looks through all the pixels in an image for areas that are similar in color. Then it reduces the number of colors by combining or averaging similar colors. And this really isn’t all that different from lossy JPG compression. However, lossy PNG compression tends to be a bit more aggressive, because PNG images shouldn’t have near as many colors as JPGs in the first place. But wait, what if they do?
There’s this idea out there, that because the PNG format is lossless, it’s a great way to make sure your photos are stored with pixel perfect precision. Now certainly, this might be true for archival purposes, where you don’t care so much about space and want to make sure you have a perfect copy of your original image. But it’s an unmitigated disaster for displaying images on the web. Delivering photographs in PNG on a website can use 10-20x more bandwidth, time, and wastes space on your hosting too.
Worse, when you try to compress a PNG photograph with any lossy PNG tool, you end up with a blurry mess. So never ever use PNG for photographs on your website. What if you already have PNG photos on your site? Fortunately there are a couple options:
- Convert the image to JPG first, and then use a lossy tool like EWWW IO or Tinify to maximize the compression.
- Convert the image to WebP in lossy mode.
WebP Conversion: Lossy or Lossless?
That’s a great question? With WebP, you can do both, and if you want to play it safe, stick with lossless–for PNG only, not JPG! Lossless mode is a no-brainer for most. Try it and see if it works better than PNG. If it does, great! You haven’t harmed a single pixel and all is right with the world. If not, keep using PNG for that image.
WebP’s lossy compression is a whole different animal. The lossy mode is great for maximizing the compression on photos, and even decent at improving the efficiency of many “normal” PNG images. But putting the photos aside and focusing on images that ought to be in PNG to start with, things aren’t so cut and dried. Tools like pngquant can often out-compete WebP. What?!? Yes, even in lossy mode, WebP is not always “king of the mountain”.
Contrary to what some “performance testing” sites might tell you, WebP is not always best. A lot of the time, it’s great, fantastic, stupendous even. However, with the lossy tools available today, sometimes they can do better without even changing the image format to WebP.
Honorable mention: AVIF
Well, I don’t know if “honorable” is the right word… When it comes to converting images to AVIF, there are a lot of different tools, but the ones we’ve tested struggle on certain PNG images. AVIF can be a big win for photos, even if it is slower than molasses in January. But for PNG graphics, tools like pngquant can often outperform AVIF, and there’s no guarantee your PNG image will be safe in AVIF’s hands. We’re not just talking blurry images, but AVIF can completely corrupt or distort some PNG images. In particular, AVIF can’t handle ICC profiles, so if that’s a concern, just skip AVIF.
The EWWW… Image Optimizer
Now, all of that is fine and dandy, but it can be a bit complicated, and most don’t have time to fiddle with optipng parameters and figure out if WebP or AVIF will work best for every. single. image. So let’s start at the top, with lossless compression. Out of the box, that’s what EWWW IO uses, specifically because some people upload photos in PNG format, and then wonder why EWWW IO made their images look bad…
If you’re not one of those people, then go ahead and enable Premium compression. Shoot, it’s actually even free, if your server supports “local” compression. If you are one of those people (whether on purpose or on accident), EWWW IO can still help you. First, if you upload a PNG image and EWWW IO detects it ought to be a JPG, it’ll auto-convert it, no further action needed.
If you have existing images that you need to convert from PNG to JPG, enable Ludicrous mode, and then PNG to JPG conversion. Be mindful if you use page builders though, as they store image URLs in ways that EWWW IO can’t update. Run the local/bulk image optimization on all your existing images, and EWWW IO will update any photos to use JPG.
In free mode, it’s worth noting that WebP conversion will always be lossless for PNG images, though there’s a hidden option to change that if needed. For those who want the simplest option though, use our Easy IO CDN. It will dynamically check each image to see if WebP or AVIF is the best format, or if pngquant can outperform the both of them. It includes automatic PNG to JPG conversion and lossy compression if a photograph is detected, with zero configuration. At the moment, AVIF is off by default, so you can toggle AVIF if you want to try it out, but everything else is enabled with one-click.
End Results
You may have noticed I usually use photographs here on the blog, but I wanted to show what Easy IO and EWWW IO can do. The featured image (above) started as a 477kb PNG. After upload with lossless compression, EWWW IO brought that PNG down to 368kb (21% savings). Easy IO takes that another level with WebP conversion at 95kb (lossy mode).
The image below started at 147kb, and lossless compression took it to 114kb (20% savings). Easy IO brings that down to 40kb with the medium-sized version below, using pngquant because WebP wasn’t as effective.
So whether you opt for lossless or lossy, WebP or AVIF, EWWW IO can help you get the job done. If you have any questions, leave a comment or send us an email!
