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
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