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

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 directly to the WordPress media library.

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

There are 3 popular image formats used online. Each has it’s 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: http://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.

Lossy does not mean lousy.

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 is an image file format which contains image data with both lossless and lossy compression. Developed by Google, WebP basically 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: http://pagepipe.com/dont-use-webp-image-format/

webP images are often processed by a third-party service and cost money above a threshold quantity. 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 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 500 kilobytes to 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 of the entire media library. 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/

When were done tweaking images, we’ll download the media library again and compare the overall 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 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 on 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 existing PNG image to JPG
  • bulk convert existing PNG images to JPG < This is what were interested in.
  • conversion statistics

This plugin seems like magic. You can exclude images with transparent background 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 demonstrate 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 just see white where the clear is. Bad demonstration.

Here are the optimized images saved as JPEGs after adding creme backgrounds in an image processing program (Gimp). The intent is placing 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.

801 millisecond speed improvement after changing background color and format of two PNG images. 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 demonstrate 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 included in WordPress now but often we still have to install a plugin to see speed benefits. Too weird.