The Image Format WebP Has Arrived

WebP is aGoogle  image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index. In a Web world demanding more images which are attractive but also small and efficient. Google insists WebP is modern but WebP was introduced 10 years ago. The following CanIuse.com query tells why it took so long to get adopted.
.
This iframe is live so scroll down to see how quickly the browser vendors  adopted WebP. Google Chrome did not fully support WebP until Jan 2014 when Opera also came on board  fully too. Microsoft IE has never fully supported  WebP, nor has Apple Safari. But Microsoft Edge fully supported in Nov 2018 followed by Firefox in Jan 2019 and then iOS Safari just now in Sep 2020.
So right now WebP is supported in all the major browsers except Microsoft IE and  Apple Mac Safari. But there is a simple  HTML work around using the tag  that can be added to accommodate the 2 negligent browsers  
See here for the details. So browser support among the popular PC and mobile browsers is “fast emerging” after 10 years with better support.

Content Creation with Webp is Messy

To my consternation major content creator tools like Adobe Photoshop, Adobe Acrobat, Autodesk, Microsoft Office, OpenOffice, Zoho Office, Google Docs and others  do not support WebP  image format except with special plugins in a few cases. Even popular online graphic tools like BeFunky, Canva, Fotor, PicMonkey, Pixlr, Photo Express, Simple Serif Plus do not have WebP support. 

However, there is a growing number of popular PC based Photo Editors including free tools that do support WebP directly. These include Corel PaintShop Pro 2019 or later, GIMP, Img2go.com, Photoscape, Pioosmos, Picasa, Pixelmator, and Photoline among others. Enough WebP photo editor tools to both create WebP images or convert to and from WebP format. Finally popular CMS – Content Management Systems like Drupal-plugin, Joomla-plugin, Magento-full, Shopify-full, Weebly-full, Wix-full, WordPress-poor also offer a mish-mash of support for WebP .Hopefully we can find  some WordPress plugin support that is  is solid enough to complete this review.

Content creation support for WebP has  improved over just a few years ago but is still very messy . For example, Google as developer and promoter of WebP would be expected  to support the image type in its suite of Google Office apps – Not Yet. Likewise, Adobe as graphic media leaders should have direct support for WebP in Photoshop and Acrobat – but only plugin support is offered in Photoshop. But perhaps the critical gap is the lack of direct WebP support in the popular Office suites  So if you plan to take advanatge of WebP’s often dramatically reduced image sizes, also expect to have to scramble around  to get it all working.

Payoffs for using WebP

The most frequently cited WebP feature is the savings in image file size vis a vis JPEG, PNG, and GIF while maintaining high visual quality. The Squoosh.app below will allow readers to test out those file size saving themselves. But there are a number of added options worth noting:

  • Metadata – An image may have metadata stored in Exif or XMP formats.
  • Transparency – An image may have transparency, i.e., an alpha channel.
  • Color Profile – An image may have an embedded ICC profile as described by the International Color Consortium.
  • Animation – An image may have multiple frames with pauses between them, making it an animation.

But the proof of the pudding will be how well WebP does in real world compression tests. So select your images to compress:

Now Google’s Squossh.app  is really quite versatile and has become my goto app for compressing  Hero-size image files. Here is the basics of how it works once you have selected an image you want to compress. The screenshot shows the basic options.

This is how Squoosh will look when your file to compress is loaded. Do not be afraid to load very large images [the example above is 4.67mB as seen in the left-hand control settings. Note the right-hand side bottom settings show how much the image has been compressed – in this case the original 4670KB image has been reduced to 346KB.

The app is fairly simple to operate. You choose the Compression type from the pulldown in the righ-hand control widget. You can save the compressed image with the Save File icon in the lower right corner. Note that in this WebP compression I have lowered the the WebP quality level quite low to 11.4. Using  the Before|After image viewer plus the Zoom bar at the lower I can visually confirm that such drastic lossy compression will work. But the whole question of image quality  is a subject of no small opinions – so here are some “quality”  compressions numbers from this viewers trained eyes.

Image Size Compression C.Size
AG Blooms.jpg 1320kB MozJPG 457kB
AG Blooms.jpg 1320kB WebP 405kB
Moth.jpg 343kB JPG 67kB
Moth.jpg 343kB WebP 44kB
Flower.gif 1800kB WebP 345kB
Sexy.svg 326kB WebP 23kB
Lemons.png 280kB WebP 85kB
Lemons.png 280kB AVIF 42kB

On average WebP in our tests reduced the original images to 20.1% of their starting size. But note the new kid on the image compression block, AVIF, reduced  a PNG image to 15% of its original size.

Summary

Despite having both impressive image size compression numbers and some nifty metadata and animation options, WebP,, even with backing of Google, has taken ten years to become viable as an alternative to JPG, PNG, GIF and SVG. More troubling is the fact that major Web and Graphics players like Adobe, Apple Microsoft and even Google itself have been guilty of dragging their feet in supporting WebP Perhaps it is the the upcoming AVIF image format has dampened enthusiasm for WebP . As proof,see the travails getting WebP to work over at TheOpenSourcery.com 

2 thoughts on “The Image Format WebP Has Arrived”

  1. Pingback: The Image Format AVIF Is Arriving

  2. Pingback: WebP with WordPress |

Leave a Comment

Your email address will not be published. Required fields are marked *