Existing images in posts not rendering after bulk optimization

  • Resolved zethd

    (@zethd)


    3 years, 11 months ago

    I’m using WordPress with the classic editor and have many posts with images added into the content editor. After bulk optimizing the media gallery and toggling on the “Use picture tags” option, the images within these posts aren’t rendering and are showing up as broken links. However, they do render properly if I remove the image from the content editor and add it back in, but with many posts this can take an absurd amount of time.

    Here’s an example of a working webp image in one of my posts (I took out the URLs for shortness/privacy):

    <picture loading="lazy" class="alignnone wp-image-2057 size-full">
    <source type="image/webp" srcset="[insert url here] 936w, [insert url here] 300w, [insert url here] 768w">
    <img loading="lazy" src="[insert url here]" alt="" width="936" height="484" srcset="[insert url here] 936w, [insert url here] 300w, [insert url here] 768w">
</picture>

    And here’s an example of another image (in the same post) that isn’t rendering:

    <picture>
    <source type="image/webp" srcset="[insert url here]">
    <img src="[insert url here]">
</picture>

    The first image only worked after I removed it from the content & added it back in. The second image lacks the proper srcset and other image attributes.

    Just to reiterate, posts that contained images in the content/body prior to bulk optimization are now failing to render images after bulk optimization.

    Can someone help me figure out what’s going on here?

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

    (@wp_media)

    3 years, 11 months ago

    Hi @zethd,

    This is Joseph from Imagify, and I’ll gladly assist you here!

    I’m really sorry you’re having issues with this!

    I can’t be sure exactly what is happening when you remove the images from the content and then add them back in, but it seems that’s causing some issue preventing WordPress from applying the srcset attributes for responsive display.

    I don’t think that’s related to Imagify, but since you’re only doing this when there is an issue with your images loading, hopefully, it shouldn’t be a problem once the main issue is resolved.

    I can also see that when you do that, the lazy loading is no longer applied (in your second example). The “Use picture tags” option can have some issues with lazy loading causing images to not load properly, so that could be the case here, and I can offer the following suggestions to try:

    ► You can try switching to the “Use rewrite rules” option in your Imagify plugin settings page as long as you don’t use a CDN or Cloudflare (as these conflict and may cause other image display issues, especially in Safari browsers).

    The “Use rewrite rules” option does not have the same issues with lazy loading, so if you can use this option, I believe it should help.

    It’s worth noting that when using the rewrite rules option, the HTML code of your pages will still show the JPG or PNG versions of images, but the rewrite rules work in the background to actually serve the WebP versions.

    You can follow the Rewrite Rules section of this guide to check that WebP images are being served: https://imagify.io/documentation/how-to-check-if-webp-image-is-displayed-on-your-site/.

    ► If you’re not able to use the “Use rewrite rules” option, then you could instead enable the “Use picture tags” option again and then try installing the following helper plugin that can sometimes help with these issues:

    https://github.com/wp-media/imagify-helpers/raw/master/webp/imagify-keep-attributes-on-img-tags/imagify-keep-attributes-on-img-tags.zip

    Please feel free to let me know how it goes and I’ll be glad to continue assisting any way I can!

    Best regards,
    Joseph

    Thread Starter zethd

    (@zethd)

    3 years, 11 months ago

    Hey Joseph, thanks for getting back so quickly!

    Unfortunately, I don’t think I can go for the “Use rewrite rules” option and the helper plugin you provided hasn’t fixed the issue.

    I did notice now that regardless of whether “Use picture tags” is on or off, the images in the content editor are appearing as broken image icons. I’m sorry I can’t give better details, but I’m not entirely sure what’s causing the issue.

    I’m guessing this might just be a WordPress issue, where the content editor is having trouble recognizing the images after they’ve been optimized into WebP format.

    If you have any other ideas regarding a solution, please let me know — thanks so much!

    Plugin Author WP Media

    (@wp_media)

    3 years, 11 months ago

    Hi @zethd,

    Sorry neither of the solutions worked for you!

    I can say that for instances of images not loading on a page being, I’m really only aware of that being caused by the “Use picture tags” option.

    If you try to view the URL to one of these images directly in your web browser, does it load and display the image for you?

    Unfortunately, it may be a bit difficult for me to know exactly what might be happening without being able to take a look at your site.

    Since you’d prefer to not share your site publicly, you could open up a ticket with us here:

    https://imagify.io/contact/

    Going this route would me that only I will see the page.

    Best regards,
    Joseph

    Thread Starter zethd

    (@zethd)

    3 years, 11 months ago

    Yes, if I copy the URL of the image & open it in the browser the image does show up. I went ahead & opened up a ticket through the link you sent me, thank you!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Existing images in posts not rendering after bulk optimization’ is closed to new replies.