Sometimes when we’re tuning speed on client websites, we strike gold. There’s a horrible problem with an easy fix. The problem is PNG photograph images are so big and fat they’re slowing down the site.

By accident, the site owner chose the wrong format. Or assumes lossless format is better (it’s not). Or they uploaded camera images direct to the WordPress media library.

It’s a golden problem for us because it’s easy to fix. The dramatic speed results make us feel like superheroes. We like that feeling.

There are 3 popular image formats used online. Each has its proper usage and special tricks for speed. But what is the worse use case?

In real-world website tuning, what slows down a site most is improper use of PNG format. More on that in a bit. First, let’s review the formats real quick.

JPEG

Joint Photographic Experts Group format is a commonly used method of lossy compression for images produced by digital photography. The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image quality.

FREE DOWNLOAD: https://pagepipe.com/wp-content/uploads/2015/04/optimize-v9.pdf

PNG

Portable Network Graphics is a raster graphics file format that supports lossless data compression. PNG was developed as an improved, non-patented replacement for Graphics Interchange Format. PNG is best for palette-based images or images requiring transparent backgrounds. PNGs can be an 8-bit color dept or a 24-bit color depth. Especially useful for logos and icons.

GIF

webP

We don’t recommend webP. Here’s why:

REFERENCE: https://pagepipe.com/dont-use-webp-image-format/

webP images are often processed by a third-party service and cost money above a threshold. Slower APIs and costlier fees? You can have fast and free. Fancy doesn’t make any sense.

Google found an orphaned idea and decided to gamble on it as if it was a “black swan.” A fortuitous accident. Like the serendipitous discovery of Teflon from rocket-fuel residue in a canister. WebP is no Teflon.

Let’s examine the grossest image optimization error.

Large PNG photographs with transparent backgrounds can be 1 megabyte or more. Pages with these kinds of images loading in 10 seconds or longer. That’s atrocious and wasteful.

So how do you fix this PNG problem?

Before we do any fixing, we measure the before-and-after reduction. To do that we use a plugin called:

Export Media Library
This plugin allows users to export media library files as a compressed zip archive. You can download the entire zipped media library to your desktop.

https://wordpress.org/plugins/export-media-library/

After tweaking images, we’ll download the media library again and compare the improvement.

How can you identify huge images?

We use a free plugin called Media File Sizes

https://wordpress.org/plugins/media-file-sizes/

It’s old but works fine. We only leave it installed during the test and then deactivate or remove it.

This plugin adds a column to the Media Library page. It displaying the total space used by each media item. This includes the original image as well as other generated sizes. Sorting your Media Library by file size is a great way to identify duplicate media items. But we use it most to identify the worst images by sorting by size.

If the largest images in the media library are under 100 kilobytes, we leave things alone. If not, we convert PNGs to JPEGs first.

We achieve that by running a plugin to convert PNG images to optimized JPG images. This handy plugin is:

PNG to JPG

https://wordpress.org/plugins/png-to-jpg/

Convert PNG images to JPG allows you to:

• set quality of converted JPG
• auto-convert on upload
• auto-convert on upload only when PNG has no transparency
• only convert image if JPG file size is lower than PNG file size
• leave original PNG images on the server
• convert an existing PNG image to JPG
• bulk convert existing PNG images to JPG < This is what we want.
  
• conversion statistics

This plugin seems like magic. You can exclude images with transparent backgrounds and protect logos and icons.

That conversion takes time – depending upon how many images need changing. When we’re done, we remove it or disable it.

Alternatives to fix heavy PNGs.

Amazing simple background-color alteration.

Let’s use a couple of transparent image examples.
Subject matter: Sloths. How fitting. Slow and sluggish.

One small (above) and one large (below).

These screengrabs show transparent backgrounds. They appear as checkerboard backgrounds in image processing programs. If we dropped the original images on this page you’re reading, you’d see white where the clear is. Bad demonstration.

The optimized images are JPEGs with creme backgrounds added with  image processing. The intent is to place these on a creme-colored page.

Comparison

Small sloth: 25k > 13k
Not bad.

Large sloth: 463k > 23k
Wow! Holy cow!

Here’s a waterfall test with the sloth images:

---

Adding a background color to 2 PNG images improved speed by 801 milliseconds. That’s great. Easy win.

Many web designers think that a JPEG hexcolor won’t match a specified CSS hexcolor. That used to be true long ago. But with modern browsers and screens that’s no longer the case. We’ll prove that below:

Would lazy load help perceived speed?

Yes.

---

772 milliseconds improvement with lazy load.

Lazy load is part of WordPress now but often we still have to install a plugin to see speed benefits. Too weird.