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.
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.
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.
We don’t recommend webP. Here’s why:
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.
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
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
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.
One small (above) and one large (below).
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.
Small sloth: 25k > 13k
Large sloth: 463k > 23k
Wow! Holy cow!
Here’s a waterfall test with the sloth images:
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:
Would lazy load help perceived speed?
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.