Picture tag only takes 1 image

  • Hi

    First, thank for your plugin, it works well and do it as spected.

    I have a site running with nginx. I’ve tried the try_files path but this leads to serve jpg url with webp content, like this one:

    https://site.com/wp-content/uploads/2024/11/image.jpg content-type: image/webp; charset=utf-8

    That rigth for a end user… but now I have a bunch of 404 errors in Google Search Console because Google bots tries urls that doesn’t exists:
    https://site.com/wp-content/uploads/2024/11/image.webp

    Then I tried to do it with the picture tag, but this only puts the big image image in the srcset, so only 1 image is used, don’t matter the screen size.

    <picture class="some-class"

    decoding="async"

    fetchpriority="high">

    <source type="image/webp" srcset="https://site.com/wp-content/compressx-nextgen/uploads/2024/11/image-1024x667.jpg.webp"

    sizes="(max-width: 1024px) 100vw, 1024px">

    <img width="1024" height="667"

    src="https://site.com/wp-content/uploads/2024/11/image-1024x667.jpg"

    class="some-class" alt="ALT for the image"

    decoding="async"

    fetchpriority="high"

    srcset="https://site.com/wp-content/uploads/2024/11/image-1024x667.jpg 1024w,

    https://site.com/wp-content/uploads/2024/11/image-300x196.jpg 300w,

    https://site.com/wp-content/uploads/2024/11/image-768x500.jpg 768w,

    https://site.com/wp-content/uploads/2024/11/image.jpg 1200w"

    sizes="(max-width: 1024px) 100vw, 1024px">

    </picture>



    I think the plugin must create some like:

    srcset="https://site.com/wp-content/uploads/2024/11/image-1024x667.jpg.webp 1024w,

    https://site.com/wp-content/uploads/2024/11/image-300x196.jpg.webp 300w,

    https://site.com/wp-content/uploads/2024/11/image-768x500.jpg.webp 768w,

    https://site.com/wp-content/uploads/2024/11/image.jpg.webp 1200w"

    sizes="(max-width: 1024px) 100vw, 1024px">

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support tonyrobins

    (@tonyrobins)

    Hello @lofesa

    Thanks for your feedback.

    We are going to do some tests and researches on the topic.

    All the best,

    Thread Starter lofesa

    (@lofesa)

    Some news on this?

    I do a workaround doing redirect to the CompressX folder if the image exists in it, but is a dirty workaurond because it does too many redirects in some pages

    Plugin Support nicholas2019

    (@nicholas2019)

    Hello @lofesa ,

    We are actively addressing the issue of image optimization using the picture tag. Our algorithm has been refined, and it is currently undergoing testing.

    Regarding the redirection workaround, we are unable to provide specific advice at this time, as we lack details about your Nginx server configuration. If you could share the debug information via the CompressX system information page, we will investigate further. We suspect that the 404 error may be caused by the Nginx server configuration.

    BTW, to ensure efficient tracking of your thread, we kindly ask you to include the link to the thread in your email.

    Kind regards.

    Thread Starter lofesa

    (@lofesa)

    Hi @nicholas2019
    Thanks for your response.

    No, the redirect is not an issue, but a workaround I’ve implemented.

    What is the problem? When using the try_files way, images are served w/o changing the url, but change the content.

    A image like https://server.com/wp-content/uploads/2025/01/image.jpg still have this url but the content changed to webp (you see in the headers Content-Type: image/webp) . Then Google bots search for https://server.com/wp-content/uploads/2025/01/image.webp because it changes the file extension accordling to the Content-Type header, this throw a 404 error.

    And here comes the redirect workaround: if the webp file exists I do a redirect to https://server.com/wp-content/compressx-nextgen/uploads/2025/01/image.jpg.webp, so Goolge bots come searching this image and don’t throw the 404 error. This workaround has the inconvenience of have some redirects, and if the page contains a bunch of images, there are a bunch of redirects.

    This can be solved in 2 ways If the webp image exists:


    A) Change the original img tag to use the images generated in compressx-nextgen folder.

    B) Use the picture tag (and here you have half the work done). But this, in the actual plugin version, only uses 1 webp image for all the sizes, and this must be changed to use the whole srcset like with the original images.

    Hope the explanation is understandable because my english is not so good

    Plugin Support tonyrobins

    (@tonyrobins)

    Hello @lofesa

    Thanks for the information.

    We are working on the 2nd way where all sizes in srcset will be covered, and will release a new version once we finish development and testing. Until that, if you’d like to test it, you can contact us through this form.

    All the best,

    Thread Starter lofesa

    (@lofesa)

    HI @tonyrobins

    I’ve send an email with the form you provided

    Plugin Support tonyrobins

    (@tonyrobins)

    Got it.

    All the best,

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

Tags