Worst Image Speed Offense: PNG 24-bit transparency format.

WordPress Mobile Speed

Updated


There are no affiliate links on PagePipe.

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

Lossy does not mean lousy.

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

Graphics Interchange Format is a raster graphics image format. The format supports color up to 8 bits per pixel or 256 colors.

webP

WebP contains image data with both lossless and lossy compression. Developed by Google, WebP is a derivative WebM video format. Their claim is this format is capable of reducing image file size up to 34% smaller than JPEG and PNG images while retaining high-quality. This is a web myth. We’ve never seen these arrogant results in our tests. They’re reporting cherry-picked specsmanship.

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.

BEFORE Small sloth: Before 25 kilobyte file size.

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

BEFORE Large sloth: 463 kilobyte file size. Huge.

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.

AFTER Reduced as a optimized JPEG 13 kilobyte file size.
AFTER Reduced as a optimized JPEG 23 kilobyte file size.

Comparison

Small sloth: 25k > 13k
Not bad.

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

Here’s a waterfall test with the sloth images:

BEFORE CONVERSION Load time: 3.577 seconds.

AFTER CONVERSION Load time: 2.776 seconds.

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:

Original camera lens image with transparent background 266k PNG file.
Lens with solid color background. 62k weight.
Comparison of creme background JPEG (62k) and transparent PNG (266k) on creme colored CSS color. Again, seamless color. Over 200k page weight difference.

Would lazy load help perceived speed?

Yes.

lazy-load-before 1.947 seconds

lazy-load-after 1.175 seconds

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.

Godspeed-

Steve Teare
performance engineer
May 2021

 

PagePipe Site Tuning Services for Speed

Instead of band-aid approaches, we drill down to the root cause of your slow site. This is origin optimization. Also known as site tuning. To do this, we analyze site components:

  • Hosting
  • Theme
  • Plugins
  • Scripts and third-party services.
  • Images and media library.
  • We minimize globally loading plugin effects.

Find out more details about Site TuningGet Speed!


 

Other Related Resources

Build with Empathy
GIVE SPEED