When I looked at Fuji X Weekly this morning, I immediately noticed a weird issue: some photos were not displaying the correct size. Some were, some were not. There didn’t seem to be any rhyme or reason to it. After some investigating, I discovered that the issue was only on Google Chrome, and not Safari or other browsers. And only on desktop, and not mobile. After a lot of frustration, and then some help from WordPress, I found the issue and fixed it.
Here’s what it looked like:
Left: Google Chrome / Right: Safari
First, let me apologize if your viewing experience was abnormal. It was normal before my weekend trip to Philadelphia (can’t wait to write about that), and very much not normal when I looked at the website this morning. I spent a few hours today trying to figure it out. I’m not exactly sure what changed, but the issue was clearly with Chrome—something that they adjusted recently, apparently. I’m a photographer and not an IT specialist, but sometimes I’ve got to put on my webmaster hat. I’ve been able to resolve most of the issues over the years, thanks to those who have shared their solutions publicly, have emailed me directly with a fix, and the WordPress help desk. If you ever see something on Fuji X Weekly that doesn’t look right, please let me know.
WordPress advised me that the specific issue affecting this website is how Chrome now handles lazy-loading images. For those who don’t know (I didn’t know until a few minutes ago), lazy loading is an optimization technique for loading pages faster and reducing memory. It’s good when it works, but obviously not good when it doesn’t. Google changed something with how Chrome lazily loads pictures, and my website was affected by this. Thankfully, someone figured out an easy fix.
If you have a WordPress page and have noticed Chrome not displaying photos the correct size, add this custom CSS code to your website:
img[loading=”lazy”] {
width: revert-layer !important;
}
If you are not sure where to do that, it’s found in Apparence -> Customize -> Additional CSS. I hope this information is helpful to someone. For the rest of you, sorry to take you through the weeds, and for the problem. Now that it’s fixed, I can get back to the things that I was hoping to get to today. Like lunch. And a second cup of coffee.
I encountered more or less the same problem on my WP blog and while searching for a solution I found your article. I tried your…
img[loading=”lazy”] {
width: revert-layer !important;
}
… in my child theme’s style.css. But found that for me it didn’t work. What did work though was simply disabling the lazy loading feature from WordPress altogether with the help of the plugin Disable Lazy Load by Jeff Starr. And yes, I know that this works around the problem by approaching it from a different direction. I would have preferred your approach of modifying the style sheet.
Instead of using the plugin you could add this line to the functions.php of your theme:
add_filter(‘wp_lazy_loading_enabled’, ‘__return_false’);
(not tested here, your mileage may vary)
Glad that you got it sorted out for your website. Thanks for reporting. Hopefully all this will help some others.
I’d like to add that on my side the problem not only manifested itself in Chrome, but in all Chromium based browsers, like Chromium (duh), Brave Browser, Opera and also in Chrome and Opera for Android. Firefox is not affected in any way. I’m afraid this is not a bug but some new (undocumented) feature, because Chromium has had about three or four new updates on my Linux desktop and the problem is still there. I hope to find a CSS based solution similar to yours. Meanwhile it’s interesting to note that my other up-to-date WordPress site, a photo blog, does not suffer from this problem, because here WordPress doesn’t add the lazy loading thing to the images. I think this is because the posts are a different type of format (‘image’ instead of ‘standard’). The photos are not preceded by any text and every post contains just one photo. See kamafotos dot nl.