Broken images in Blog Post – images NOT replaced with AVIF are broken

This is strange because it should only be converting images as you upload them. Did you regenerate images?

For reference, here’s example image markup which I see has a broken image on the frontend:

<img data-dominant-color="8f737d" data-has-transparency="false" style="--dominant-color: #8f737d;" decoding="async" class="not-transparent aligncenter wp-image-222382 size-fusion-600 lazyloaded" src="https://www.greathomesincharlotte.com/wp-content/uploads/2023/10/Bridgehampton-entrance-600x280.jpg" data-orig-src="https://www.greathomesincharlotte.com/wp-content/uploads/2023/10/Bridgehampton-entrance-600x280.jpg" alt="Entrance to Bridgehampton neighborhood in Charlotte's Ballantyne area" width="600" height="280">

I can see that the original image does exist: https://www.greathomesincharlotte.com/wp-content/uploads/2023/10/Bridgehampton-entrance.jpg

I’m confused why this img is specifically serving the 600×280 size and that the srcset and sizes attributes are absent. Can you share the block markup for this image from the editor?

Question: In the Media settings, do you have the “Output JPEG images in addition to the modern format” option enabled?

I did regenerate the thumbnails yesterday with the Force Regenerate Thumbnails plugin after my client showed me all of the broken images but that did not fix the issue. I am restoring the site now to before that point onto a staging URL so you can see it before I made any changes. There are more issues than just the previous ones I mentioned as well. The filenames were generated weirdly meaning it changed the structure of the file NAME (see screenshot), it did NOT replace all of the image paths in the blog posts, it converted MOST of them to .avif but some also to .webp and there is no rhyme or reason to it. It is just very frustrating. IF the original jpg files had been copied into the new format instead then it would not have broken all of these images.

Here are some screenshots showing the additional issues that I found:

https://www.greathomesincharlotte.com/wp-content/uploads/2024/07/1Screenshot-July-18-2024-15-47-18-jpg.avif

https://www.greathomesincharlotte.com/wp-content/uploads/2024/07/1Screenshot-July-18-2024-12-24-24-scaled.avif

I have been trying to fix all of thes broken images on the site all day but there are literally thousands because the option to “Crop thumbnail to exact dimensions (normally thumbnails are proportional)” was on so every image the client uploaded over the last 6 years created thumbnails of various sizes and there is no possible way I can go through 950+ posts to find them all. After hours of going through and doing search and replaces I am just going to restore the live to before this plugin was implemented. You can use the staging site to troubleshoot. Send me an email to support (a) yoursiteneedsme.com and I’ll shoot you the login and SFTP for the staging site.

Thanks for this.

In the Media settings, do you have the “Output JPEG images in addition to the modern format” option enabled?

@jamesosborne Does this additional information shed light on your investigation?

I’ll need to perform some additional checks with the “Crop thumbnail to exact dimensions” setting enabled @westonruter.

@charrabennett Sorry to hear of your experience. Hopefully we can determine more on this. While we’re unable to login to users sites, whether staging or production, we can perform some checks with a setup similar to your own. I noticed that your slideshow images are served from Amazon S3 servers. To troubleshoot this further, which may assist with other users impacted or with logging a possible Github issue, please share the following:

1. Your Site Health information. You can use this form to share this privately if preferred.
2. Do you have an example URL where some of the images are broken, or were these primarily slideshow images? I ask as it looks like the slideshow on your homepage and on the individual property pages have additional non standard attributes and are served from S3 (homepage example | property example). I’m wondering does the same occur on additional pages with images not served from s3. I checked the URL you shared in your additional post, and the standard images appear from here.

Let me know if you have any questions with the above.

As far as I can tell that option was unchecked @westonruter but I do not know when this plugin was installed and I have 30 days of backups that I would have to restore and go through individually to see when the option to convert the images happened exactly. You can look in the staging site to see all settings.

@jamesosborne submitted!

Many thanks for your patience on this, and your willingness to share your environment. I’ve been performing some checks on this and in my case, when regenerating thumbnails, regardless of the image format selected or the Modern Image Formats media settings, I don’t encounter any broken images. This leads me to suspect that the images that were broken on your site were the ones served from S3 servers, which seem to be associated with your IMPress for IDX Broker plugin. I say this as I can see some owl-slider references with the images including plugin references, along with no obvious slider plugins active on your site. I can see similar slideshows on this plugins commercial site.

Note that during my testing I setup a couple of sites with the same plugins as your own minus the commercial plugins, which includes IMPress for IDX Broker.

I appreciate you moved on from the plugin, and likely removed the staging site. I’m happy to test this further with some images served from a CDN if you do recall where on your site you encountered the broken images, even from your live site, so I can see if I spot any potential conflict.

Note also that if you are testing the plugin going forward, on this site or another, you can use the “Output JPEG images in addition to the modern format” option to ensure there are JPEGs generated as a fallback. The plugin by default only impacts newly uploaded images although if you are to use wp media regenerate or a plugin to regenerate existing images, it may be of use to have the JPEG versions present.

Hi James,

That plugin is actually only serving property images for the MLS feed service they use. It does not upload serve any images uploaded to the wordpress site iteself.?

I am good for now thank you.?I will just make sure that option is checked. I already restored the live site but the staging site is still active. I send the images served from the CDN in the form I filled out previously but you can see one here if you like:

https://greathomesidev.wpenginepowered.com/lawson-home-sales-q2-2024/

Yep having the same issue, a lot of my images on frontend and block editor is lost because it still mention the old .jpg images.