What is the conventional Roots method of delivering images in .webp to compatible browsers?

archived đź—„
1

I have been working through a 6-week long nightmare of trying to get various plugins and their rabbit-holes of configurations trying to make my sites as optimized as possible, and serving .webp to compatible browsers has been the biggest headache of them all.

I thoroughly enjoy optimizing and getting this stuff to work, but I got a little trigger-happy with a .webp configuration I was trying to do and now I’m scrambling to get my clients’ images working on older/safari browsers. At this point, I’ve completely removed anything related to .webp because it seems to be way too volatile when mixed with caching and CDNs.

Roots is all about not reinventing the wheel, and I thought there MUST be a conventional way to serve .webp that this community already employes, but I can’t find anything anywhere.

And so here I am, presenting my plea for help! How do I serve WebP?!

Thank you for your time.

1 Like
2

Soon AVIF will be another format that should be provided.

There are plugins that do all of this, including CDN offloading, lazy loading, etc.
However, for the theme imagery I use the built-in webpack tools and srcset/sizes when possible.

But I wasn’t able to find a well maintained plugin that offers webp/avif/mozjpeg optimization of existing WordPress content media images. I would be also interested in a solid solutino.

Then there is nginx pagespeed. The idea of having just a plugin/module that transparently and automatically optimizes the content is quite appealing. Even better, WordPress core offers such optimizations.

3

That nginx pagespeed tool looks interesting. Is there a webpage that explains this tool in more detail? The link you sent seems to just be a download link with installation notes that doesn’t get into the nuts and bolts of what it actually does.

Either way, thanks for the response. I agree, AVIF support would be nice, but I’m just taking this stuff one thing at a time as best I can, haha.

4

This blog post (for example) explains it in more detail:

5

I’ve had really good experience with WebP Express.

The NGINX rules are described in the readme of the plugin:

# WebP Express rules
# --------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;
  if ($http_accept !~* "webp"){
    break;
  }
  try_files
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
    $uri.webp
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
    ;
}

# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
    try_files
      $uri
      /wp-content/plugins/webp-express/wod/webp-realizer.php?xdestination=x$request_filename&wp-content=wp-content
      ;
}
# ------------------- (WebP Express rules ends here)

So it checks if the browser has webp support and if not, doesn’t return the webp but the original jpeg. This way you don’t really have to worry.

6

That’s great! Now I also need a (standalone) plugin for mozjpeg JPEG optimization and AVIF format. :slight_smile:
Edit: And svgo, gif (gifsicle) and PNG (optipng) optimizations!
There are also libraries that can perform a subjective image assessment to find the best image compression strategy. But all this will require lots of processing from the server, hence it may not be practical for lots of images…

8

Do you use Cloudflare? If so, how did you handle that part of things? WebP Express was great for me, but once Cloudflare started caching things it got really messy.

9

I use Cloudflare. You need to use the Cloudflare plugin.

We also wrote some custom calls to the CF API to handle some specific needs. The homepage clears when a new post is made, but not the “latest” posts page, so we cleared that too. And we have some custom site settings and needed to initiate a full cache clear when those settings were updated.

If you also have a local cache (varnish, plugin, memcached, etc) you must clear that BEFORE clearing Cloudflare.

10

Interesting. So, for a full explanation, my current issue with WebP Express is that Cloudflare caches my images as .webp, even though my nginx configs deliver .jpg/png to incompatible browsers. Which means that on browsers like Safari, images aren’t displaying because Cloudflare is delivering .webp.

Are you saying if I download the Cloudflare plugin, this won’t happen anymore? That Cloudflare will have a separate cache of .jpg/pngs for the appropriate browsers?

Thank you for your time.

11

This is now getting into a Cloudflare discussion more than a Sage discussion.

The Cloudflare plugin is not needed for webp, but it is needed for other WordPress integrations like cache bypass when logged in, clearing pages and the homepage when a post is published, etc.

I’m not sure how you have webp configured at CF, but if you use Cloudflare’s Polish service, CF will only deliver webp to compatible browsers. If your WP installation serves jpgs or pngs, Polish will also only deliver webp versions if they are smaller than the original images. I don’t know how to configure webp outside of Polish.

Your nginx config for images may or may not be ignored by CF, depending on whether you have instructed CF to respect origin cache headers. If you have not, CF will override any origin cache settings.

CF will cache images in both webp and the original format.

In my experience it’s probably better to let CF handle browser detection for webp delivery. Edge cache delivery is what CF optimizes for and it will likely be more robust than anything we do ourselves on the origin server.

12

Thank you for your response. Unfortunately for me, if I start using the CF Polish service, I would have to upgrade to the $20/mo for all of my sites which would have me operating at a loss for my client website maintenance. I actually put one of my websites on Cloudflare’s Pro service, and I actually found that using CloudFlare’s optimization in favor of WordPress plugins that do similar things, I actually got worsened performance overall by about 5%. This irks me quite a bit because before using Cloudflare my performance scores on mobile were consistently 90%+, so I’m actually paying $20/mo more and getting the opposite desired result.

13

I also rather want to have something more stand alone than relying on some external optimization service.

14

This topic was automatically closed after 42 days. New replies are no longer allowed.