WebP images are being optimized to a lower quality

  • Resolved georgeamir

    (@georgeamir)


    3 months ago

    I am experiencing an issue with the Imagify plugin where WebP images are being optimized to a lower quality than expected.

    Here are the details:

    • I have installed and configured Imagify to optimize and convert images to WebP format before uploading.
    • Despite setting the optimization mode to Lossless to maintain image quality, the resulting WebP images are still of low quality.

    Could you please advise on how to resolve this issue? Any guidance or adjustments I can make to ensure that WebP images retain their quality would be greatly appreciated.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author WP Media

    (@wp_media)

    Hello,

    Thank you for reaching out.

    First, I recommend checking in your Media Library to confirm which compression level has been applied to the images—whether it’s set to Smart or Lossless. You can view this here: https://prnt.sc/gVdTz-d0onKu.

    If you notice that images appear blurry or the layout is broken on the frontend, this might be due to the <picture> tag method used for displaying WebP images.

    To resolve this, you can try the following steps:

    1. Disable the “Display images in Next-Gen format on the site” option in your Imagify settings.
    2. Clear all caches, including caching plugins, browser cache, and CDN cache if you have one.
    3. Check if the issue persists.

    If you’re not using Cloudflare or a CDN, you might want to switch to the rewrite rules method in your Imagify settings, as it is generally a safer way to serve next-gen images.

    Please let us know how it goes or if you need further assistance.

    Best regards,
    Saransh

    Thread Starter georgeamir

    (@georgeamir)

    I’m certain that I used the Lossless option in my plugin settings. Additionally, I implemented the recommended approach of using <picture> tags, as advised. I referred to the article at Imagify’s recommended settings and confirmed that this setup is aligned with best practices. Since we are using Cloudflare or a CDN, here is an example of how this option is currently implemented:

    <picture><source type=”image/webp” srcset=”xxxxxxxxxxxxxxxx/uploads/2020/11/3.jpg.webp 1x”><img class=”img custom-cover-img lazy-loading-image-loaded” src=”xxxxxxxxxxxxxxxxxxxxxx/uploads/2020/11/3.jpg” alt=”Deploy” width=”960″ height=”738″ style=”opacity: 1;”></picture>

    Could you please advise on the best solution in this case?

    Plugin Author WP Media

    (@wp_media)

    Hi @georgeamir,

    Thank you for your reply.

    Can you please confirm if disabling <picture> tag and turning off WebP feature fixes the issue?
    This will help us to determine if the issue is because of WebP or there is some other reason.

    Looking forward to your reply.

    Best Regards,

    Thread Starter georgeamir

    (@georgeamir)

    Just to clarify, are you asking if we should use only optimized images? If so, the answer is yes. When displaying images from the media library in an optimized format (non-WebP), the quality is much better. However, when they are converted to WebP, the quality or performance noticeably worsens.

    Plugin Author WP Media

    (@wp_media)

    Hi,

    Thank you for your reply.

    As rewrite rules method is not an option, you can switch back to <picture> tag method and use this helper plugin to keep attributes in <img> tag instead of <picture> –?https://github.com/wp-media/imagify-helpers/raw/master/webp/imagify-keep-attributes-on-img-tags/imagify-keep-attributes-on-img-tags.zip. It would be good to test it out in order to be 100% sure it worked.

    Let me know how it goes.

    Best Regards,
    Saransh.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.