The fastest alternatives to heavy JPEG images for page speed.

Header image 2 not shown for mobile pseed.

Save the Internet from WordPress speed abuse.

Updated: August 2017

7 minute read

Focus on reducing image file sizes for ultrafast mobile page speed. We’ve written an ebook about JPEG image optimization. Seventy percent of images used on websites are JPEGs. Images are half the lump of web page weight. But that doesn’t mean they are half of page speed*.

*We guesstimate images slow page loads by 30 percent – not half.

Our “Faster Loading Images for Mobile UX” eBook is 1,629 words.
Download the PDF for free.

Image weight is important but not the high priority it once was. Why? On modern browsers, many images load in parallel saving time. And lazy-load plugins postpone image from presenting until needed. Loading occurs when the user scrolls and the image enters the screen. These help with perceived load time. Those are improvements for good user experience (UX).

Third-party APIs or widget scripts are much worse for slowing down pages than images.

WordPress compresses JPEG images uploaded to your media library. It compresses to the same degree as a Photoshop save-for-web quality setting of 50. Because of this automation, proper sizing of dimensions is now more important than fretting about compression. Read more about JPEG compression in our free PDF download (above).

You’re thinking, “What? Are you telling me I don’t need any image optimization plugin?” You’ve got the picture. Today, WordPress does a good job optimizing images for you. In most cases, anyway. We have more to say about a few exceptions. So read on.

Mobile users are bandwidth sensitive. They sometimes are browsing on expensive, remote, mobile roaming connections. Ill-prepared images consume money for mobile users. Dishing up heavy images on mobile requires polite consideration (aka hospitality).

There are many tricks to optimize images. We always prefer hand-optimizing using an offline image processor like Photoshop or Gimp. Simply use “save for web” features. Automated optimization can’t judge how far to push image quality settings. Only a human can do that. Failsafe plugins like Imsanity ensure JPEG images never exceed certain limits. We set our largest images to match our page layout column width. That’s specified in pixels. And, we set compression in Imsanity to a quality of 70 –lower than the WordPress default of 82.

READ our article about online image optimization tools.

Automating image optimization with plugins doesn’t change the image dimensions. The plugins only change compression. WP Smush plugin is the worst because compression gain is only 10 percent. That’s insignificant for speed improvement. WP Smush – the free-version – only offers lossless image compression. To get 10X (visually-lossless) lossy compression requires the *premium* plugin version. There are many free plugins providing better lossy compression – like Imsanity. So don’t let any plugin author take you to the cleaners.

Are there better alternatives to using heavy JPEG images on a mobile website?

There are two great alternatives. The first is using GIF or PNG format images. We’ll demonstrate with pictures. This is a PNG image used as a 800px x 220px header on a blog post:

This sample header image has few colors. It uses an PNG-8 format with 8-bit color depth selected (not PNG-256). That is the secret and why it only weighs a tiny 12k. It allows resizing to large-screen full width without much distortion. The stretched image doesn’t pixelate like a JPEG would – even when increased to a width of 1350 pixels. At “medium-size,” the image resizes to both desktop-screens and mobile screens. It still looks good on both. It’s a good-enough compromise of size. Don’t build headers as big as recommended.

How heavy would this image be if it were a JPEG 2000px wide header image? It wouldn’t be bad. Because of the limited number of colors, it’d be around 32k. Still, almost 3 times heavier.

The Visually-lossless Daisy Test

Let’s say we want a beautiful JPEG stock photo of vintage-style daisies in our page header. Assume the dimensions are recommended as 2000 x 1200 pixels. First we can knock off about 100k of it’s stock 500k weight. That’s just by putting it through an offline save-for-web feature. It then becomes about 400k in file size. Below (before) is what it looks like uploaded with no optimization plugin. It’s 390k files size and 1920 x 1200px (scaled to 714px x 446px). Scaling is bad by the way. It cause the browser to slow down and calculate on-the-fly what the new image size should be. Math-time wastes time.

BEFORE

And, below, after automatic optimization using the installed Imsanity plugin. The difference: it’s 70k and cropped to our column dimension and our 70-quality setting.

AFTER

Can you see a difference? Do you have super powers or gifts of extra sensory perception? This comparison demonstrates visually-lossless compression. It’s technical name is lossy compression. We admit it isn’t magnificent here. That’s because we set our Imsanity quality setting to 70. Instead of the default 82 that WordPress uses. We push images harder.

Why do we compromise image quality for speed? Because it’s proven site visitors don’t care about image quality as much as you, the site owner. Don’t over-engineer your site. Image quality judgment is way down the list of user irritants or values. Speed frustration is number one – top of the list. We admit – it needs better quality if it’s a portfolio site for an artist or photographer.

Site owners are afraid of lossy compression. Why? Because it sounds like the process shreds the image through a meat grinder. Loss is not good right? Wrong – in this case. You did recognize the second image was of vintage-style daisies, too? What? You thought they were roses?

Using lightweight PNG images is one of our favorite speed tricks.

You can make PNG large-dimension images with small-weight. For example, this PNG image (below) is 3.3k file size and 1000px x 600px dimensions. It’s perfect for a Twenty-seventeen default theme header. Or a featured image – even though their spec says to produce a 2000 x 1200px dimension image.

Uploading featured PNG images to Twenty-seventeen pages, we found a surprise. The PNG weight automatically increased by 3 to 4 times the original. But if we used GIF image replacements, we had “no weight change” and a smaller image file resulted. Freakish image voodoo.

ruby hex color #c43a2c

For example: As a featured image in WordPress, this 2000 x 1086px simple, red signage changed:

  •  A 9k PNG converted to 32k (by WordPress) as a featured PNG image. Fail!
  • As a 25k JPEG, WordPress automatically converted it to 58k of JPEG bloat.
  • Making the red signage a 15k GIF. Then WordPress won’t change it. It stays 15k. Oddity.

We said using PNG and GIF images is our favorite speed trick. Our second favorite trick and the lightest, fastest solution is – using no images at all.

Fifteen percent of websites don’t use any images. None. Zero.

Yes. Some pages are completely text and CSS. But the average website is heavy on JPEG image usage. It’s the big beast to tame. It’s where the most unrealized potential is for UX improvement. But having no images can be even better if you can get away with it. What could be faster?

Can you avoid image-bloat problems completely by using image optimization? No. Sometimes it’s best not to use an image at all under certain conditions. Think about it. Does the image contribute to understanding the website’s written content? Does it attract, distract, or repel? Users are the judge. Not us. It requires testing.

How much testing? Simple. Ask just five people who aren’t related to you and aren’t your employees. That’s it. You don’t have to spend a lot of money or time. Irrelevant images are a waste of space. Reducing page-load time is still a big criteria for maximizing readership.

One big question: Are images attractive or motivating – and not alienating or repulsive? These questions address a primary component of web credibility. Credibility is the feeling web designers want to achieve. What is right isn’t always what feels good. If you put an ugly image into a compressor, it’ll still be ugly – but faster loading – when it comes out. There is even a possibility it may be uglier from distortions.

Two best ways to improve images have nothing to do with optimization: 1. Images with story appeal. 2. Images that demonstrate.

Godspeed—

Steve Teare
performance engineer

Mobile WordPress Speed – without coding!

What others think of us:


"I'm a non-programmer and have been breaking my head trying to figure out slow performance of my site. I found my answer stumbling upon your blog and also saved me $$$ from buying pro versions of plugins. Thanks a ton for your efforts." Fabstori.com  India

by - Jabal Shah