Intro
Back in 2010, Google announced a new image format called WebP. Over the years Google has developed WebP into truly the next generation format for images on the web. The format is roughly 25% smaller in file size than their JPEG counterparts and about 3x smaller than PNGs. In 2020, browser compatibility started speeding up with Apple adding support to their Safari browser (version 14) in September 2020. As of May 2021 browser compatibility is about 94% according to Wikipedia.
In June 2021, Google will start updating their search algorithm to include their Page Experience and Core Vitals metrics. Using the WebP format will definitely help improve these metrics. The problem is not all browsers support WebP and older browsers, looking at you Safari 13, will never support WebP. As mentioned earlier, Safari 14 just came out less than a year ago as of this writing. So Safari 13 is by no means an “old” browser.
So, what’s this article all about?
In order to have your website show WebP images only to compatible browsers and JPEG/PNG images to older, non-compatible browsers, you’ll need your server to respond to the browsers requests. In particular, the browser always sends an “Accept” header when it makes a request. You can configure your server to check this header and determine what file to return. But since this article is about WPEngine and Cloudways, we have plugins to do the majority of the work.
If you’re using Apache, plugins like WebP Express and WebP Converter for Media will work out of the box. Just install, activate, and all should be good. The plugin will write to your .htaccess file and handle everything. The problem comes when you’re on NGINX and have to deal with entry-level support.
Both WebP Express and WebP Converter for Media have special instructions when it comes to NGINX. They ask you to add some configuration to NGINX settings which does what I described earlier. For both WPEngine and Cloudways, you’ll need to contact support and ask them to add it. But it’s not as simple as it sounds due to the lack of their experience.
WebP on WPEngine
WPEngine has an actual page to help you add WebP support using the WebP Express plugin. However, I contacted support 3 different times and probably spent 1-2 hours on chat with them overall. And after all that I still had to do my own workaround. Here’s what I learned:
- If WebP images are being served to Safari 13, it will not show. Don’t let support get away with telling you “WebP is not supported on Safari”. The first chat I gave up because I just thought it was a dead end. If they keep insisting nothing is wrong, ask for a Senior Rep.
- Entry-level support does not know how to update NGINX settings. Make sure to tell them to enter the NGINX rules in the “BEFORE” section. Two separate entry-level support helped me with this and they both got it wrong apparently.
- After all is said and done, WPEngine’s CDN, MaxCDN, does not support serving different images based on the browsers header. So make sure to turn off CDN while initially trying to get this to work.
After 3 chats with entry-level support and 1 senior rep, and getting WebP working for one day, it turns out WPEngine’s own CDN does NOT support this. You would think at least the senior rep would know, but it took an upset client seeing blank images to reveal this. MaxCDN just caches the image at the specified URL. It does not take account the browser’s header information.
So what’s the solution? After an extensive search I found Bunny CDN. (they’re a life saver, but I have to mention these links are referral links). They are a fast, inexpensive, pay-as-you-go CDN that gives you the option to cache requests based on the browser headers. They call it Vary Cache and they explicitly say they “store two versions of image files depending on the web browser’s WebP format support”. Which is perfect for what I needed.
In Summary, to get WebP images working on WPEngine:
- Turn off CDN in your user portal if you’re using WPEngine’s CDN.
- Have support add the appropriate NGINX setting in the correct place.
- Signup to Bunny CDN (they have a free 14-day trial)
- turn on WebP support in Bunny CDN’s settings.
- install and setup the free Bunny CDN plugin
WebP on Cloudways
Similar to WPEngine, Cloudways took a bunch of back and forth to successfully get WebP working. I’m not sure if this is due to the CDN also, or if I just got bad support for a week. In the end, after about 20 or so ticket messages, and multiple “WebP is not supported on Safari” replies, it finally worked. I asked what I could ask for if I wanted to get this working again on another install and they said:
We mainly do 3 things in the server/app when wanting this webp enabled for an app.
- Add webp aptitude package as some of them may use this Linux utility
- We update the app’s Nginx config to bypass extensions like jpg, png, gif so that Apache will get to handle them along with PHP requests
- We exclude from caching these file extensions in app area > Application Settings > Varnish Rules /(.+.(jpeg|jpg|gif|png))?$
Cloudways also uses MaxCDN for their CDN, so I used Bunny CDN again.
At first I used the WebP Express plugin, but found that plugin to be way too resource intensive. My 2GB RAM server slowed to crawl whenever WebP Express had to generate WebP images. That got me looking for another plugin which lead me to WebP Converter for Media. WebP Converter does all the conversion up front so resources are not used when a user visits the site. Looking back, I could probably configure WebP Express to do this, but WebP Converter for Media is much simpler.
In Conclusion
The WebP format is still very new for web hosts. If it’s not working for you, keep pushing to figure out what’s wrong. What you basically need is a plugin to convert WebP images on upload and for existing images, correct server settings to serve the right image based on a browser’s request header, and a CDN that supports multiple images for one url (if you use a CDN).