• Resolved uidb4056

    (@uidb4056)


    Hello,
    The site is a WooCommerce shop with W3TC installed and a CDN Cloudflare working without problems.
    Now I’ve found the extension of Image Service on W3TC and activated. I’ve converted the images showed on the home page and webP extensions are generated ok, however the developer tools still shows that the images loaded are jpg instead of webP.

    How can have webP images loaded trough Cloudflare?

    Thanks in advance for your help.
    Best regards,

    Robert

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 15 total)
  • Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @uidb4056

    Thank you for reaching out and I am happy to assist you with this.
    As I can see, the images are being converted:
    https://cdn.kalasandra.com/wp-content/uploads/2021/05/cropped-color_logo_GRAN.webp
    I can also see that you are using CDN to serve the images besides Cloudflare, so you should purge the CDN as well as Cloudflare cache, and make sure that the expired settings for static files on your CDN and Cloudflare respect the origin headers (W3TC)
    If you find that your original image has been converted to WebP, but other image sizes are missing WebP versions, you may need to double-check that your WordPress environment supports the WebP format.

    While the original image is converted via our API service, the different sizes (e.g. Large, Medium, Thumbnail) are created by your own server. For this, you must have WordPress 5.8 and the appropriate libGD or ImageMagick package available on your server.

    To check if your WordPress environment supports WebP, navigate to Site Health > Info > Media Handling and double-check that WebP is listed in the supported file formats for the library shown in the Active editor. If you find these are missing the WebP extension, consult your system administrator to set up the correct packages.

    Let me know if this helps!

    Thread Starter uidb4056

    (@uidb4056)

    Hello Marko,

    Yes the images are converted, you show me that are on CDN Cloudflare, also I’ve purged several times the CDN Cloudflare cache and W3TC cache with no results.

    But inspecting with Dev Tools in Chrome using incognito mode, I still see the JPG file instead of the WebP.

    I’ve checked the WordPress Environment and ImageMagick is available, and it shows that WebP is listed as supported.

    What has to be done in order to WebP images are sowed instead of JPG?

    Thanks in advance for your help,

    Robert

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @uidb4056

    Thank you for the information.
    Cloudflare does not use URL rewrite. Can you please confirm you are not using any other CDN?
    Thanks!

    Thread Starter uidb4056

    (@uidb4056)

    Hello Marko,

    Yes, as far as I know no other CDN is used, the W3TC is configured to use Cloudflare and until now all has worked ok since several months ago until I’ve activated Image Service on W3TC, the site is running WooCommerce with free plugin of W3TC that is configured with a CDN of Cloudflare free account to.

    May be is related to some configuration settings on W3TC or Cloudflare?

    Best regards,

    Robert

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @uidb4056

    Thank you for the information.
    Can you please share how you configured Cloudflare? Have you used any kind of URL rewrite?
    Can you please check inf the CDN has been enabled in Performance>General settings? Also please make sure that the Cloudflare Browser Cache TTL respects the origin header
    1. Log in to your Cloudflare dashboard.
    2. Click Caching.
    3. Under Browser Cache TTL, click the drop-down menu to select the desired cache expiration time.
    The Respect Existing Headers option tells Cloudflare to honor the settings in the Cache-Control headers from your origin web server.

    Thanks!

    Thread Starter uidb4056

    (@uidb4056)

    Hello Marko,

    As far as I know, I’ve not used URL rewrite.
    In Cloudflare caching browser, cache expiration time is set to ‘Respect Existing Headers’.
    I don’t know if it is possible in Cloudflare to download a json file with the configuration settings but in W3TC yes, however I don’t see how to share this file with you.

    Best regards,

    Robert

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @uidb4056

    I would advise reaching out to us directly via the plugin in Performance>Support and sharing the JSON file so I can check the settings.
    Thanks!

    Thread Starter uidb4056

    (@uidb4056)

    Hello Marko,
    If I go to Performance>Support, I get a list of different Services and Solutions some of them free and some paid, but can’t found the right one that let’s me include the json configuration.
    I’ve the free plugin of W3TC.

    How can I send it to you?

    Best regards,

    Robert

    • This reply was modified 2 years, 11 months ago by uidb4056.
    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @uidb4056

    Thank you for yoru feedback.
    Once I reply to your email, you will be able to attach any files and send them back to us.
    I hope this helps!
    Thanks!

    Thread Starter uidb4056

    (@uidb4056)

    Hello Marko,
    I’ve replied the email, but in the meantime I’ve disabled on W3TC the CDN and the web are now served from my hosting, but the images are still served as JPG, that mean that the problem are not related with Cloudflare. I’ve attached in the answer to your email a json configuration attached and images showing that CDN is disabled and still served as JPG.

    Best regards,

    Robert

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @uidb4056

    We have not received any email from you via the support channel.
    So it appears that the CDN was enabled and the problem is that the CDN needs to be purged and the Browser Cache TTL managed to respect origin headers.
    As I can see the images are now being served as webp, and the problem is with the resized images.

    Please make sure that Imagic supports webp.
    I hope this helps!

    Thread Starter uidb4056

    (@uidb4056)

    Hello Marko,

    I’ve sent the answer with attachments as a reply of your message from [email protected].

    I’ don’t know where to send this files to you because on the support page of W3TC doesn’t see any way to attach a file, any way I’ve sent a message to ask help to do this.

    With respect to your answer, you say ‘CDN was enabled’ but I’ve said ‘CDN has been disabled from W3TC’.

    Anyway that is now a bit confusing, on dev tools if I look at element image I see the complete path without cdn but with extension JPG, however if I select network->img the type is showed as WebP and the size matches with WebP image.

    Also, can’t understand the problem with the resized images.

    Best regards,

    Robert

    Thread Starter uidb4056

    (@uidb4056)

    Hello,

    I’ve one update about the problem.

    If CDN (Cloudflare) is disabled on W3TC, the images are loaded with the size of WebP format as can be seen on Dev Tools Network.
    If CDN is enabled on W3TC, the images are loaded with the size of JPG format, however in Cloudflare you can found this image also on WebP format but are not loaded P1040763-retallat-1950×500-1.webp.

    Best regards,

    Robert

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @uidb4056

    Thank you for your feedback.
    We’ve received your email and replied to it. Please continue the correspondence there so we can avoid duplicating the answers.
    Thanks!

    Thread Starter uidb4056

    (@uidb4056)

    Hello Marko,

    I’ve answered your email.

    Many Thanks,

    Robert

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Image Service and Cloudflare CDN’ is closed to new replies.