Don’t use webP image format.

WordPress Mobile Speed

Updated


There are no affiliate links on PagePipe.

Many speed test recommend using webP format for images instead of JPEG or GIF or PNG formats. Why? Where did this odd image dogma originate?

You guessed it:

Web-deity Google.

It may blow you away to find out it was NOT strategic engineering by Google brain power. It was an accidental leftover from a business buyout.

At the Big-G board meeting: “Hey? What should we do with this leftover thingy?”

Hermione Granger, sitting up front raises her hand with enthusiasm, and recommends,

“Let’s call it webP image format — and tell everyone it’s magic.”

Go to WebPagetest.org and run a speed test on a page. You will find a little text link with the label: Image Analysis. Click it. You will go to https://webspeedtest.cloudinary.com/ It automatically starts evaluating the images on the page.

The secret Cloudinary button.

Cloudinary provides a cloud-based image and video management service. Founded in Israel in 2011.

For our PagePipe homepage, it identified one image to optimize. This one: 100-plugin.png. But it is lazy loaded.

This is the errant image. Massive.

See the errant image (red). It is lazy loaded. It loaded after everything else. This means it isn’t delaying any other web asset from loading. We’re using a lazy load plugin. WordPress core features built-in lazy load after August 2020. Free bonus.

Cloudinary says we can reduce that image’s page weight from a 4.6k PNG to a 1.5k webP image. That saves 3.1k. In big letters, they tell us that is a 32-percent savings.

Is that significant? No.

Is it worth bothering with? No.

Why?

Images load in parallel. All at the same time. Boom!

It isn’t one after another serial loading like in the old web days.

And dang it, this page loads in a half second. That is good enough.

REFERENCE: https://pagepipe.com/rebuilding-your-site-for-mobile-speed/

What is parallel loading?

It means when you look at a speed-test waterfall, you see all the images cascading in a straight line down the page.

EXAMPLE IMAGE
WebPagetest of URL https://pagepipe.com/image-rotation-using-plugins-for-site-efficiency/

Google edict tells us webP image format reduces image weight by 25- to 35-percent. That means the 233k of images on the test page will be 83k lighter. Cool! But when we test switching to webP, the gain is only 10 percent. Only 23k gain.

The same sorry results as lossless JPEG compression with cruddy free Smush plugin.

We share our PagePipe server with 26 other domains that are not affiliated with us. How generous – sharing. You can check your own site here: https://www.yougetsignal.com/tools/web-sites-on-web-server/ The tool will also tell you if an “adult” site is on your server hogging bandwidth. Just ask your host to please move you to a different server.

What the heck is webP and why does Google think it’s so fantastic?

First, let’s review some source credibility or track record? Google is the company supplying the slowest-loading third-party components on the web. We’re talking:

Google Analytics
REFERENCE: https://pagepipe.com/how-does-google-analytics-affect-mobile-page-speed/

Google Fonts
REFERENCE: https://pagepipe.com/zero-latency-fonts-for-mobile-speed-system-ui-font/

Google ReCaptcha
REFERENCE: https://pagepipe.com/how-google-no-captcha-captcha-slows-down-your-mobile-site/

Google Maps
REFERENCE: https://pagepipe.com/google-maps-and-mobile-wordpress-speed/

HTTPS/SSL Security Dogma
REFERENCE: https://pagepipe.com/httpsssl-and-its-negative-impact-on-mobile-speed/

Google Snippets
REFERENCE: https://pagepipe.com/why-you-shouldnt-waste-your-time-and-speed-writing-seo-rich-snippets/

That’s enough!

Google overstates its speed prowess and expertise. It’s technology and policies slow down the internet. Even its gold standard speed test – Google PageSpeed Insights – is goofy.

REFERENCE: https://pagepipe.com/online-speed-test-scores-are-especially-useless-for-mobile-speed-improvement/

Google can’t even pass their own PageSpeed Insights tests.

What a luxury for Google.

They ignore their own hypocritical speed tests because they own the internet. It’s a good thing Google doesn’t actually use these results in page ranking. That’s right. You wasted your life chasing whimsical vanity metrics invented by altruistic Google.

“WebP is an emerging image format put out by Google. It’s designed to use a more aggressive and better-optimized compression algorithm than JPG and PNG with the objective of reducing file sizes with minimal quality loss. And that means faster websites consuming less bandwidth.” – source

“WebP is a modern image format that provides lossless and lossy compression for images on the web. Using WebP, … developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs.” – source

“WebP is probably the best image format you’ve never heard of. Incredibly, it has the same quality of a JPEG, yet it’s typically 30-percent smaller in file-size.” – https://wordpress.org/plugins/sirv/

*Sirv is a professional image hosting and WordPress CDN service.

“[WebP] has several drawbacks and they’re pretty significant. One of the drawbacks is that animation saved as WebP requires more processing power during playback compared to good old GIF animation. Practically, it may take several more years until WebP becomes the successor of JPEGs and dominate the internet.” – source

Google designed webP format for Google Chrome browser. Unfortunately, webP is not supported in Apple’s Safari web browser. Firefox added webP for desktop and Android, but it will not work in iOS. This is because Firefox for iOS runs on Safari’s WebKit engine.

WebP is natively supported in Google Chrome, Firefox, Edge, the Opera browser. And by many other tools and software libraries. Developers have also added support to a variety of image editing tools.

Google didn’t set out to reinvent the JPEG format. They acquired a video encoding company. And discovered part of the technology happened to work well on still images. They’ve since open-sourced the codecs.

Reading these glorious compression weights is great. But are these claims real and worth it? Should we convert an entire media library to WebP? Is that a smart thing to do? Could we get a 1-percent extra size reduction while preserving image quality? The results are a surprise.

Despite webP’s announcement in 2010, it’s still an emerging format. That means that that it is not universal or compatible. Not all browsers support it.

Internet Explorer and Safari do not support WebP.

Photoshop doesn’t natively support WebP, but you can add a plugin to add WebP support. That’s a clue. Adobe thinks it’s lame.

“The WebP lossless setting is specifically designed as a replacement for PNG files. But in my tests in taking existing optimized PNGs and converting them to lossless WebP I ended up with files that were significantly larger than the originals.” – source

BONUS SECURITY SIDE-EFFECTS

If a user downloads a webP image from your website, good luck reusing it. They can’t open it in Photoshop. Not without installing a plugin. They can’t view it or edit it without using special webP-compatible software. And they’ll run into trouble sharing it by email or social media.

If you upload a webP file to Facebook you’ll get an error message. Uploading a webP image to WordPress also fails with a security warning. Stealing webP images makes for a hard time doing anything with them. Facebook got a lot of complaints about this reason when they rolled out webP.

This isn’t a true security strategy. It’s still an interesting side-effect.

We don’t recommend webP if you’re looking to speed up your site. There are other options for slimming down your images.

  • Lazy loading images increases the perceived load speed.
  • You can also use fewer images.
  • Correct image size for the display reduces the data mobile users download.

OFFSITE LINK ABOUT WEBP FORMAT BEING LAME

https://calendar.perfplanet.com/2014/mozjpeg-3-0/

NOTE: WordPress 5.8 and newer supports the WebP image format. please don’t be seduced by that. Don’t use it.

Godspeed-

Steve Teare
performance engineer
October 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!