Contrib.social

Webp image is not displaying

Open on Drupal.org →
Created on 10 May 2023, about 1 year ago
Updated 1 March 2024, 4 months ago

Problem/Motivation

webp image is not displaying

Steps to reproduce

I installed https://www.drupal.org/project/imageapi_optimize_webp → and https://www.drupal.org/project/imageapi_optimize → module. Created a pipeline and applied it sitewide.

Also enabled the imageapi_optimize_webp_responsive submodule.

But this is the output I get.

<picture>
                  <source srcset="/sites/default/files/styles/original_ratio_xxxxl/public/2023-05/original.jpg.webp?itok=AnW2ES__ 1x" media="(min-width: 4000px)" type="image/webp">
              <source srcset="/sites/default/files/styles/original_ratio_xxxl/public/2023-05/original.jpg.webp?itok=AimMarc5 1x" media="(min-width: 2000px)" type="image/webp">
              <source srcset="/sites/default/files/styles/original_ratio_xl/public/2023-05/original.jpg.webp?itok=cykD1FzG 1x" media="(min-width: 1200px)" type="image/webp">
              <source srcset="/sites/default/files/styles/original_ratio_lg/public/2023-05/original.jpg.webp?itok=edKJlYKP 1x" media="(min-width: 992px)" type="image/webp">
              <source srcset="/sites/default/files/styles/original_ratio_md/public/2023-05/original.jpg.webp?itok=GsmSZUVz 1x" media="(min-width: 768px)" type="image/webp">
              <source srcset="/sites/default/files/styles/original_ratio_sm/public/2023-05/original.jpg.webp?itok=AVDYFhj3 1x" media="(min-width: 576px)" type="image/webp">
              <source srcset="/sites/default/files/styles/original_ratio_xxxxl/public/2023-05/original.jpg?itok=AnW2ES__ 1x" media="(min-width: 4000px)" type="image/jpeg">
              <source srcset="/sites/default/files/styles/original_ratio_xxxl/public/2023-05/original.jpg?itok=AimMarc5 1x" media="(min-width: 2000px)" type="image/jpeg">
              <source srcset="/sites/default/files/styles/original_ratio_xl/public/2023-05/original.jpg?itok=cykD1FzG 1x" media="(min-width: 1200px)" type="image/jpeg">
              <source srcset="/sites/default/files/styles/original_ratio_lg/public/2023-05/original.jpg?itok=edKJlYKP 1x" media="(min-width: 992px)" type="image/jpeg">
              <source srcset="/sites/default/files/styles/original_ratio_md/public/2023-05/original.jpg?itok=GsmSZUVz 1x" media="(min-width: 768px)" type="image/jpeg">
              <source srcset="/sites/default/files/styles/original_ratio_sm/public/2023-05/original.jpg?itok=AVDYFhj3 1x" media="(min-width: 576px)" type="image/jpeg">
                  

<img src="/sites/default/files/styles/original_ratio_zero/public/2023-05/original.jpg?itok=2lw72qSZ" alt="" class="img-fluid">
  </picture>

In the source tags I can see the .webp image sources but the image tag still displays the original .jpg image. How can I fix it?

🐛 Bug report
Status

Active

Version

2.0

Component

Code

Created by

🇵🇰Pakistan hmdnawaz

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @hmdnawaz
  • Comment about 1 year ago →
    🇨🇷Costa Rica rigoucr

    I'm experiencing exactly the same issue:
    drupal version: 9.5.8
    module version: 2.0.0
    imageapi_optimize_webp_responsive module : enabled.

    steps to reproduce:

    - Create a imagepi pipeline (configure it as global)
    - add to that Pipeline the WebP processor
    - now Add the Resmush.it processor
    - Save your config

    - Now go to any existing node with a media field, update the image (to try to regenerate the img style)
    - Now go to your node FE , you should be able to see your image ,but if you inspect the markup you can noticed that the image being shown is original image uploaded by the user not the webP

  • Comment about 1 year ago →
    🇨🇷Costa Rica rigoucr

    Coming back at this because this was not really my issue , I dig a little bit more I discovered that I was having some issues with crop module. So I created this issue https://www.drupal.org/project/imageapi_optimize_webp/issues/3362476 🐛 Webp Image not being updated when the Focalpoint/crop entity is Updated Needs review , so more details there

  • Comment 4 months ago →
    🇺🇸United States possiBri

    I, too, am having this issue with the 2.0 version of the module, on Drupal 10.2.3, steps I've taken:

    • Enable module and _responsive submodule
    • Set up the Image Pipeline, set only WebP derivative in the pipeline
    • Set that pipeline as the sitewide default
    • Set the default sitewide pipeline for image style I'm testing with, since nothing was generated until I did that
    • Flushed the style being targeted to recreate derivatives
    • Confirmed .webp files in the specific image style directory I'm focusing on
    • Confirmed image style is correctly set in view's field settings for the particular images/view I'm looking at
    • Run a cache rebuild for good measure
    • Refresh the page with targeted image, but I'm still seeing the original .jpg file as the img src

    The readme.md file doesn't provide any additional instructions, but I'm wondering if there is some other config/modification we need to do in our theme to make sure it points at the webp (when supported by the browser) instead of the jpg?

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024