I recently encountered a really, really weird bug on my WordPress website. On mobile devices some images were getting partially cut off. The images would always be cut off in such a way that part of the image would be missing from the top of the image. This would only happen in Google Chrome and only when viewing the images on a mobile browser. The desktop version of the browser wasn’t affected, although I would later determine that this bug did show up in the “mobile preview” mode of the desktop browser.
This bug would lead to deformed website images on mobile that often looked like this:
As you can see in the screenshot above, the image is supposed to have a blue border around the entirety of the outside of the image, but the top part of the image gets cut off. This bug was particularly hard to track down as it would only happen sometimes, not on every page load. In addition, if I would scroll to the bottom of the page and then back up to the top the image would magically repair itself and be showing properly.
Troubleshooting the Bug
My first thought as to why the bug might be occurring was that it might be an issue with the LiteSpeed Cache plugin. It became noticeable around the same time that I added the LiteSpeed caching plugin to my website. However after much troubleshooting, including disabling the caching plugin entirely, the bug remained. I was able to rule LiteSpeed out as a cause of the bug.
I then turned my attention to image lazy loading. I wondered if due to the nature of the image only loading partially the bug could be caused by an issue with lazy loading. This led me to experiment with disabling the lazy loading HTML tags I programmatically add to every image. However, even after removing the lazy loading the bug remained.
Finding the Root Cause
Finally, after more closely inspecting the images and their tags on the website I noticed something I hadn’t put there. A little HTML attribute that was causing big problems.
<img decoding="async" src="https://yourrightwebsite.com/app/uploads/2025/03/baby-laptop-770x580-1.jpg" class="the-image" loading="lazy" width="770" height="580" alt="">
Do you see anything wrong with the image tag above? At first I didn’t either, but then I realized that it had somehow gained a decoding=”async” attribute that I had not added. After looking into this further, I discovered that as of WordPress 6.1 the CMS would automatically add this attribute in an effort to reduce page load time. The idea is that the tag allows your browser to load images a little bit later than the rest of the data on your page, which should let your site load content like text, scripts and styles first, leading to a more responsive page. However, for whatever reason this attribute doesn’t seem to play nice with Chrome’s mobile browser.
I’m not sure if this image issue is widespread as searching for others having a similar issue on Google didn’t yield any meaningful results. Perhaps the intermittent nature of the bug led others to write it off as a loading error instead of a browser bug. In fact, I only attributed it to a bug after seeing it occur multiple times on multiple devices. I thought initially that it might be local only to my older Samsung phone but was then able to replicate using the Chrome desktop browser’s mobile device preview mode.
The Fix
If your site is experiencing a similar issue, luckily the fix is simple. You simply need to disable WordPress’ behavior of automatically adding this attribute to every image. You can do so by pasting the following code into your WordPress theme’s functions.php file (or setup.php if you’re using Sage):
/* Disable problematic image attributes */
add_filter('wp_get_loading_optimization_attributes', function($loading_attrs, $tag_name, $attr, $context) {
// Check if the tag is an image
if ($tag_name === 'img') {
// Remove the decoding attribute from the array
unset($loading_attrs['decoding']);
}
return $loading_attrs;
}, 10, 4);
The fix is simple and the result is immediate. The above code will remove the “decoding” attribute from images entirely, which should solve the rendering issue in Chrome mobile. After implementing this fix I am happy to say that I have not seen this behavior again, even after a couple of weeks of intermittent testing.
Hopefully you found this blog post useful. If you need help with your own WordPress website I offer website consulting where I would be happy to assist you with your own WordPress issues.