• Resolved technig

    (@technig)


    Thanks for this wonderful plugin. We are running our WordPress site on nginx and followed rewrites instructions as described. Everything works well, with images redirecting to WebP versions, except for featured images. In the URL shared, you will see that all images within the post redirect to their WebP version, but the featured image doesn’t.

    How can we fix this? We use Divi Builder with no customisations on the featured images at the moment.

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author rosell.dk

    (@roselldk)

    Is “Patricia-80.jpg” the featured image on that page? I can see it is served as webp. Perhaps you are locally seeing the cached jpeg, because you visited the page before there was a webp and a redirect?

    There are some images not served as webp. I haven’t looked through them all, but it seems these are all images on other servers.

    • This reply was modified 3 years ago by rosell.dk.
    Thread Starter technig

    (@technig)

    Hello @roselldk yes, Patricia-80.jpg is the featured image. When I right-click in it to ‘save image as’, it proceeds to download a .jpg image. This is not the same for other jpeg images within the post, which when I save-as, download a .webp image. I thought it might be a caching conflict so I cleared our cache and even tried incognito, same thing.

    Do you mean that even though it’s downloading a jpeg, it’s implicitly serving a webp? Even though other images within the post are explicitly downloading webp?

    Plugin Author rosell.dk

    (@roselldk)

    When using “Varied image responses”, the file name still ends with “.jpg”. But don’t let the extension fool you. What the browser cares about is the Content-Type header. Patricia-80.jpg is a webp, it is served as a webp. It just has an awkward file extension. I know it isn’t ideal, but the only bad thing it does, is that it confuses people. Especially those who downloads the image. I could have created the redirection such that it makes an external redirection instead of an internal, which it does now. If I did that, the file name would have the correct file extension. However this would cost an extra HTTP request per image.

    The other images are referenced with “webp” extension. This means that you have enabled AlterHTML. AlterHTML doesn’t catch all images. So that is why the featured image is different.

    Plugin Author rosell.dk

    (@roselldk)

    Screenshot that shows that the browser knows it is a webp:

    Screenshot

    Plugin Author rosell.dk

    (@roselldk)

    I’m puzzled that Alter HTML doesn’t transform the HTML for the featured image. The HTML looks fine and the image is there.

    HTML looking fine (but it has not been transformed):
    <img loading="lazy" width="1055" height="700" src="https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80.jpg" alt="" title="Patricia-80" srcset="https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80.jpg 1055w, https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80-980x650.jpg 980w, https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80-480x318.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1055px, 100vw" class="wp-image-191978">

    WebP image is there:
    https://techpoint.africa/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2021/08/Patricia-80.jpg.webp

    I just tried to run the raw HTML through the [alter html library](https://github.com/rosell-dk/dom-util-for-webp). It transforms it, and it does it correctly. It is transformed to this:
    <picture><source srcset="https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80.jpg.webp 1055w, https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80-980x650.jpg.webp 980w, https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80-480x318.jpg.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1055px, 100vw" type="image/webp"><img loading="lazy" width="1055" height="700" src="https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80.jpg" alt="" title="Patricia-80" srcset="https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80.jpg 1055w, https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80-980x650.jpg 980w, https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80-480x318.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1055px, 100vw" class="wp-image-191978 webpexpress-processed"></picture>

    So yes, I am puzzled that the HTML isn’t transformed for that image.
    But well, Alter HTML isn’t capable of transforming all image HTML anyway (CSS backgrounds and lazy loaded images are examples). But the .htaccess rewrite rules makes sure that the image are served as webp even then – albeit with the misleading file extension

    Thread Starter technig

    (@technig)

    Thanks for the detailed clarification @roselldk and apologies for the delayed response. As long as the featured image is served in webp format, we are satisfied (even though it’s still confusing that what we are able to download is a jpeg and it’s large in size, we just hope this is not what browsers read). You have an awesome plugin, we’ll definitely buy you cofee

    Plugin Author rosell.dk

    (@roselldk)

    thanks ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Featured images not redirected’ is closed to new replies.