I have a Wordpress site with a LOT of posts that still get significant amount of traffic (10,000's of posts).

The site is image heavy and uses <img> tags for inline Jpegs as featured and inline images, and it's time to downsample some of them as well as produce WEBP versions as we want to improve our PageSpeed score and improve the UX.

I identify a few elements of this:

  • Using the wp_content_img_tag hook to replace <img> with <picture>...<source>...<img>... markup to support .webp images with a .jpg fallback.

  • It seems computationally expensive and unnecessary to do this every time a page is loaded, so I'd prefer to do this in WP-CLI to update the post content with new markup -- is it possible to use this hook from WP-CLI?

  • On image upload, catch the image_send_to_editor hook, and insert the right markup rather than an image tag (though I seem to have heard with won't work if we migrate to Gutenberg)

  • Switch the markup generated in custom parts of our theme (e.g. menus, sidebars, etc)

Are there any gotchas to my proposed approach? I've already taken care of generating the .webp and downsampled .jpg on the server side, so I'm not worried about that.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.