The end of JPEG or why WebP is best for most

Client

When Google released their proprietary image format, WebP, it’s fair to say it was to little fanfare. The consensus amongst industry giants was that the standard image format used by the internet, the venerable JPEG, was standard for a reason – it worked across the board and saved small, so why change it? Nobody except Google and the bleeding edge saw WebP coming: less horse and cart and more juggernaut, WebP hurtled through a decade of abuse, giving the middle finger to a scathing audience as it devoured every image format on its merry way. WebP isn’t just a modern replacement for JPEG but a stronger contender for GIF and PNG, too. A lightweight, high-quality image format with optional transparency and frames almost always saving with a filesize smaller than when using identical quality thresholds with traditional image formats. The most obvious upshot is that website images will load faster on slower networks, helping (amongst many, many other things) websites to rank higher in organic searches – the golden egg for most commercial sites out there. Having trouble with Google’s brutal Core Vitals performence metrics? WebP is a good place to start.

So why hasn’t the digital world adopted the format fully even now? Why are platforms still dragging their heels? We’re going for two simple reasons – the format hasn’t been offcially adopted by all mainstream browsers (I’m looking at you, Safari) and there’s no native ‘Save as WebP’ option in mainstream graphics software packages (ahem, Photoshop). This bascially means that WebP images will not display on browsers that don’t support the format, and it’s actually quite hard to create a WebP from scratch. Or so we thought. Interestingly here at RNS we found solutions to both these issues within 20 minutes of Googling, and implementation of the solutions cost us about 20 dollars and maybe 3 hours of our time. Granted, many would have given up, especially those less versed in problem solving, but the benefits gained through using WebP over traditional image formats far outweigh the 3 hours we spent fiddling with settings in Photoshop and setting up Cloudinary.

Of course, Adobe could implement native WebP accessibility across its platforms, and they probably will at some point, but for a certain niche segment of their audience we feel it’s already too late. Without native support for WebP in Photoshop, here are RNS we had to seek alternative methods to save traditional artwork as WebP outside of our preferred environment, Adobe’s Creative Cloud. Instead, we pushed ahead with a free account at Cloudinary, a server-side JAMstack that plugs right into the heart of our WordPress websites and converts images on-the-fly, delivering whatever format in whatever size is best (read fastest) for the viewer’s browser. That’s WebP for 90% of requests and JPEG for the rest. This doesn’t hurt Adobe too much until you start exploring the additional options Cloudinary offer – automated watermarking, cropping, Lightroom-esque filters, opacity with textural overlays, neural network-driven subject identification, and a huge array of transformation options.

This leads us to a separate thought, another reason perhaps for the slow uptake of WebP amoungst designers and web devs, that may even spell the end of WebP as a desktop format before it gains widespread traction. We think it’s got to do with the seismic shift we’re seeing in how graphic design is handled for websites. We’re currently witnessing a design revolution as functionality traditionally found in desktop design software is being made available through server-side automation, and, critically, being made available through modern Plug & Play interfaces to Mr and Mrs Public at a very low cost, if not for free. So perhaps WebP isn’t destined for mass desktop use after all, perhaps it’s real strength is in mass batch optimization via server-side automations. I digress.

Seriously though, playing with Cloudinary made us think – could we genuinely offload a large and frankly boring part of our workflow away from Lightroom and Photoshop over to Ze Cloud? Could we upload source images and allow Cloudinary to handle everything via it’s neural networks In theory, yes. In practice time will tell, but we’re certainly going to try. We love Adobe’s Creative Suite but we also love talking trash about Hipsters – perhaps using Cloudinary we’ll have more time to enjoy both.

Caveat – this is not a sponsored post – all time, money, and opinions are our own. In case you’re still wondering what we spent 20 bucks on in our search for WebP goodness, it was to purchase coffee and bagels for the team whilst we Googled free stuff. We opted to try out Cloudinary for cloud-based, automated image conversion and delivery, and also downloaded (and now use religiously) this free Google plugin for Photoshop from GitHub.

Client

Details