webp images

  • I have recently discovered that CF causes problems with my webp images due to the page caching.
    So it will serve whatever image type was saved in the most recent cache.
    As a result, if it has cached webp images and someone visits from a browser that doesn’t support webp images, they will all be broken.
    If it has cached jpg/png files, then nobody will get webp images.

    Does your plugin provide any solution to this?
    I have read that the CF API does have a workaround called vary images.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor iSaumya

    (@isaumya)

    Does your plugin provide any solution to this?

    – There is no solution to this if you understand the problem deeply. You see when you are using a disk-level image optimization plugin that uses server rules i.e. rules added to .htaccess to determine whether to serve WebP or native JPG/PNG are nonexistent when a resource is being served from cache and especially CDN cache.

    When CF received your first request and if that request is not cached, but you have asked CF to cache it – it will cache it in it’s CDN. Then from the next request and onwards for the same request (until cache expires or removed) will be served from your nearest CF CDN.

    So, the request will not even reach your origin server. So, no server rule to check when to serve JPG/PNG vs WebP.

    This is why when using these advanced CDN caching systems, I always suggest people to choose between one of these 2:

    1. Get Cloudflare Pro ($20/mo) and get unlimited image optimization using Cloudflare Polish which also has WebP support. This is personally my favorite because in this case you don’t have to do any special image optimization within your WP site. Rather you serve the image in JPG/PNG and after Cloudflare cache the image – it will optimize it and serve it in WebP if the browser supports it or in optimized JPG/PNG.
    Screenshot: https://i.imgur.com/NapT3kA.jpeg

    Also in this case your image URLs doesn’t get changed to a random CDN URL – instead it remains your normal website URL while being served over via Cloudflare CDN.

    2. The alternative to this is get something similar to this but where you might not need to pay 20$/mo and has a good free quote. Examples of such systems will be Imagekit.io, Optimole, EWWW Image CDN, Shortpixel etc.

    In all of these cases your image URL will be changed withe their CDN URL so, basically your page content will be served via your site hostname example.com while your images will be served via a different service which has nothing to do with your page caching e.g. sdf56.imagekitcdn.com/something.png

    Hope this clarifies the matter in depth.

    Thread Starter lordsnake

    (@lordsnake)

    actually if you check the forums, there are several solutions to this, including the aforementioned API method.

    Plugin Contributor iSaumya

    (@isaumya)

    This plugin does not implement anything special on the images. Depending on what cache-control header value you have set for the images Cloudflare will simply abiode that. If you have cache-control header set asking CF to ache the images – it will do that alternatively if you have set cache-control as no-cache, max-age=0 then Cloudflare won’t cache the image.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘webp images’ is closed to new replies.