Way to exclude images from being cached?

I had a similar situation. You can actually run the Litespeed plugin and use only the image optimization / webp. I used only litespeed’s minification and webp for a short time after adding WP Cloudflare SUper Page Cache.
That is a lot of extra plugin code for just webp and minify, and I no longer needed minification – so I now use the WebP Express plugin. Imagify also has WebP in its plugin, and is a little easier to set up (or is less customizable, depending on how you look at it).

• This reply was modified 3 years ago by giggles420.

@gigglesslut420

Thanks for the comment! Yes, currently I only use LiteSpeed Cache for page optimization features (i.e. minification, defer JS, remove emoji, etc.) and image optimization (compression and WebP conversions).

To clarify, I am not using LiteSpeed Cache for caching, never have. I actually can’t if I wanted to because the caching functionality in the LiteSpeed Cache plugin only works on LiteSpeed servers. However, I do rely on LiteSpeed Cache for optimization measures to ensure the pages load fast and that everything is optimized properly before getting cached by Cloudflare.

It just sucks that I lost the ability for the images to load as WebP after switching from WP Super Cache. Hoping the plugin support can provide some guidance on this.

so I now use the WebP Express plugin. Imagify also has WebP in its plugin, and is a little easier to set up (or is less customizable, depending on how you look at it).

Are you saying that with caching done by WP Cloudflare Super Page Cache, WebP Express and Imagify WebP conversions are displaying on the cached pages? I was under the impression that the WebP versions were not displaying due to the fact that Polish is not active on my Cloudflare account, resulting in the PNG’s and JPEG’s being displayed instead.

Hi,
the reason you are having this problem is that the way Lightspeed cache does the image optimization is that when a request comes to your server then the server rules, PHP and lightspeed check what version of the image to provide and provide it.

But when you are using Cloudlfare with this plugin, then Cloudlfare not only cache’s your static files (like CSS, js images) but also the HTML page content. So, the next time when a user request for that page if that page is already cached in your nearest CF datacenter then the page HTML along with it’s static content all will be served from Cloudflare and the request won’t even reach your origin server so there is no PHP execution or any server rule execution.

The best way to circumvent this is not to use a system that does server level image optimization and rather use a on the fly optimization. There are many systems like Imagekit.io, Optimole that will do this for you and they have a great free plan as well. Otherwise, you can also take the CF PRO plan if you have a high traffic site.

Hope this helps.

@isaumya

Thank you for the response! I understand how and why they are being cached, that’s why I asked how to exclude the image files from the HTML caching this plugin does, so that when CF is rendering the pages to the visitor, it still makes a call to my server for the images and is able to serve up the correct version.

Are you saying that with your plugin, there is no way to fine-tune what is cached and what is not, and that I must look for a different plugin that handles WebP conversions? If that is the case, how would this other plugin be able any different? Would it force the images to be loaded from a different CDN or something of that nature?

Thank you again for your time.

• This reply was modified 3 years ago by James W.. Reason: Clarity

Hi,
To exclude images from caching by Cloudflare make sure the cache-control header value of the images are set to no-cache. Any static files you do not want to cache make sure the cache-control header value of that file is no-cache the Cloudflare won’t cache that and it will always be served from the origin server.

Would it force the images to be loaded from a different CDN or something of that nature?

– Yes if you use imagekit.io or optimole both of them will load the images from a different CDN URL.

@isaumya

Excellent, thank you so much for this info! Where would I set the cache-control header value for the images?

It depends if you are on a apache or lightspeed server then you need add the rules in the .htaccess file or if you are running a nginx server then you need to add the rules in your nginx.conf file.

@isaumya oh I thought those were just for browser caching. Okay I’ll see what I can do.

No. Cloudflare will respect the cache-control header for caching as well.

Hey @isaumya

I added the following to the .htaccess file:

<FilesMatch "\.(gif|jpe?g|png|webp)$">
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate, max-age=0"
</IfModule>
</FilesMatch>

but all that did is not cache the png and jpeg files being served; the headers on the images showed “DYNAMIC” which is good…but my issue is they are still being served as png’s and pjeg’s, and not as webp. Am I missing something?

• This reply was modified 3 years ago by James W.. Reason: Missing a code line

This is maybe because though your static files (images) are not being cached but your main HTML pages are being cached to Cloudflare. So, the lightspeed plugin is unable to make change to the HTML file.

I guess it will only work if you do not use Cloudfare for caching and only use their plugin for both page caching and webp conversion. That is my guess.

@isaumya

Well like I said for the longest time I was using WP Super Cache and it had no issue serving up the WebP versions. It appears there is already an integration with the LiteSpeed Cache plugin in the settings, so I’m curious is there any possible way you can work with LiteSpeed on this incompatibility? I LOVE your plugin and would prefer to continue using it for caching purposes…

Please also note that since I am not on a LiteSpeed server, the caching abilities in LiteSpeed Cache are disabled, so that would not be an option for me.

Thanks again!

Try disabling caching via the plugin and check if it works. If it does then it is happening because of what I said above and unfortunately there is nothing that can be done cause when a page HTML is being served from CF the request is not even hitting the origin server.