Disclosure: This post contains affiliate links. I may receive compensation when you click on links to products in this post. For an explanation of my Advertising Policy, visit this page. Thanks for reading!
Some common reasons why your WordPress images are not showing up on mobile or are distorted.
In this post, we are going to go over some of the most common reasons we have come across as to why your WordPress images are not showing up on mobile or distorted.
Please note, that this is not an exhaustive list and there could be other factors that you should check out like your current theme or changes to it, as well as possible web hosting issues with your current Web Hosting Provider among others.
However, here are the most common reasons we have come across as to why your WordPress website images are not showing up on mobile devices or if they are, they may be distorted:
- Plugin or Theme Conflict.
- Page Builder Issues.
- Lack of theme updates.
- Using an Image Optimizing Plugin.
- Images look different on mobile than on desktop.
- Issues with WP Rocket.
WordPress images not showing on mobile. Causes and Fixes.
Plugin or Theme Conflict.
In many cases as with most issues WordPress related, this could be a plugin conflict.
To check for other plugin conflicts, first, disable all the plugins running on your site. Then switch to a default “Twenty” something theme.
If the problem goes away, enable the plugins one by one to identify the source of the problem. Then enable your theme.
To make things easier to diagnose, install the plugin Health Check.
On its “Troubleshooting” tab, you can also click the button to disable all plugins and change the theme for you. All while you’re still logged in, without affecting the normal traffic, nor visitors to your site.
Page Builder Issues.
If you are using a page builder like Elementor in the edit page check that you have uploaded an image for mobile responsive.
You’ll find it at the bottom of the Elementor in Settings >>Responsive Mode: select the mobile view. Then drag the image you wish to show.
You can also use some CSS to display that, but that is not necessarily the best option. However, you can give this a try:
Add the CSS code below into your current active child theme’s style.css file or you can add an additional css option in the theme’s customizer:
@media (max-width: 767px){
.elementor:not(.elementor-edit-area-active) .elementor-hidden-phone {
display: block;
}
}
If you find that after fixing the mobile issue the image disappearing also happens on the desktop browser when you minimize the browser size past a certain size.
Then try this:
Go to the “Edit page with Elementor” click on Section>>Advanced>>Responsive and turn off the hidden on mobile option. Or you can add the below code to the Customize>>Custom CSS section to fix it:
@media (max-width: 767px)
.elementor:not(.elementor-edit-area-active) .elementor-hidden-phone {
display: block !important;
}
Lack of Theme updates.
If by chance you are using an old theme or a free theme that doesn’t include updates, the images not showing up on mobile could either be related to a lack of updates to your free theme in conjunction with regular WordPress core updates or the lack of regular theme updates in general.
So switching out your theme to the WordPress “Twenty” something default theme, which does get regular updates, should determine whether the issue is theme related.
Using an Image Optimization Plugin.
If you are using an image optimization plugin, it could be converting your images into a format not recognized by your theme or is not compatible with it.
For example, there was an issue caused by the Autoptimize plugin, which converts images to .webp format for speedy load and other functionalities.
Quick note: the .webp format doesn’t work well on all browsers.
You could also have a problem with a “Lazy Loading” plugin as well.
If these or other image optimization plugins are the case you may want to try a few other image optimization plugins that are more compatible for faster load times.
Images look different on mobile than on desktop.
Your featured images look fine on desktop, but on mobile the images are much too large and end up going outside of the post’s preview borders. If this is the case, you’ll want it to be more responsive so it fits on the page.
For this you should try this plugin and see if it helps:
Issues with WP Rocket.
If you’ve recently purchased WP Rocket and hoping that it will speed up your site, but find your images disappearing on mobile you’ll want to go over this troubleshooting document over at WP Rocket for some potential quick fixes: “My Site Is Broken”.
WordPress images not showing on mobile conclusions.
In most cases, as with many issues with WordPress, It may just come down to a plugin and or theme conflict.
Open source is great because it allows for all kinds of contributions from creative and earnest developers who are constantly looking to improve WordPress for their users.
However, because of the massive amounts of themes and plugins along with their coding, it’s inevitable that conflicts may happen.
But rest assured, plugin and theme conflicts are usually the easiest to resolve if you know what they are. By using the plugin above, Health Check, you can pretty much find any conflicts quite quickly.
If that fails to find the source of the issue, then the other common reasons listed as to why your WordPress images are not showing up on mobile or are distorted may be the cause(s).
If all else fails, then you should contact your WordPress theme’s developer or their support to narrow down the issue from their end.
