7 Most Common Image Issues in WordPress and How to Fix Them
It is an innate human trait to love great visual stimuli. They create a wide range of emotions in us, generate our response, and strengthen our connection to the graphic content. Our brains are also naturally hardwired to process graphic content much faster than textual. In just a few milliseconds we can understand what a picture is about. Because of that, images are used to convey various types of messages to users, illustrate projects, increase user engagement, and bring websites to life.
But adding images to a site may not always be smooth sailing. Now and then, some technical problems may arise preventing you from adorning pages with picturesque imagery. In this article, we will share with you the list of some of the most common image issues in WordPress and we will show you how to resolve them with ease. We will discuss the following:
Uploading images to your WordPress website isn’t always a stress-free experience. Every so often, an error will pop up on your screen preventing you from adding photos to your library. But before we start discussing the most common image issues, let’s see first how to correctly upload image files to your site.
Uploading Images in WordPress
N.B. We recommend you optimize images for the web prior to uploading them to ensure low load times and flawless website performance.
First up, go to the page or post where you wish to add a picture. Then, if you’re using Gutenberg, look for the Image block. Or Media & Text, in case you’d like to add some textual content along with imagery.
You can now upload a new image, select one from your media library, or paste the image URL.
If you wish to add an image from the media library, upon selecting it, you’ll see some editing options on the right side of the screen. For instance, you can edit the name of the image, add a caption, description, choose image link target, and much more.
And when you find an image you like and add it to your page, you can select left, center, or right alignment. This option is available from your dashboard.
In case you are still using the Classic editor, to add files to your page or post you should click the Add Media button.
The media library will load, and just like with Gutenberg, you’ll be able to select one of the already added files or upload a new one. Editing options are displayed within the media library, but some show up in the toolbar or below the picture itself once you add the file. For example, the settings regarding alignment will appear on click, under the image.
If Elementor is your preferred page builder, you should search for Image in the Elements tab.
Upon selecting this widget, some image-related options will appear on the left-hand side of the screen. Click on Choose Image to upload your file and customize settings to your requirements.
We wrote a separate article on how to add interactive images in WordPress, so if that’s something you’d like to master, these tutorials will be of great help to you.
HTTP Error During Upload
The HTTP error message is quite common in WordPress. And in a lot of cases, the solution to the problem is simpler than expected.
The first thing you should do is to check your internet connection. The network or the server may be temporarily down, so wait for a few minutes and then retry adding your image. Another thing you could try is to clear your browser cache and use a different browser.
If the issue persists, verify the name of the file. WordPress may cause problems if you use special characters or accent letters, so it’s best to avoid them.
Some users experience problems with the image upload because of the plugins or the theme they’ve installed. To rule that possibility out, you should deactivate all plugins, switch to the default theme (but not before backing up your site) and then try to add the files again.
Sometimes, the HTTP error will occur due to the missing file permissions or memory limits of your server. In one of our previous articles, we talked in great detail about how to fix the HTTP error during image upload, so make sure to check it out for a step-by-step tutorial on resolving these technical issues.
Image Files Too Big to Upload
If you resize your images in Photoshop or any other photo editing software and optimize them for the web, it’s highly likely you won’t experience any issues while uploading them to your site. We’d suggest you avoid resizing pictures using WordPress’ default editor because it lets you change just the dimensions of your file but not its weight. Image weight is an important feature that ideally needs to stay below 100 kb or 150 kb max to not jeopardize the page load speed.
Another thing you should do is increase the maximum file upload size. Its default value usually isn’t that large, but if needed, you can increase it to meet your requirements either by modifying the functions file, creating or editing a php.ini file, updating the .htaccess file, modifying the wp-config.php file, or by using a plugin. In case you need a helping hand in this regard, all of the methods are described in our article on how to increase the maximum file upload size in WordPress.
You can also try cropping photos and cut out superfluous parts. In that case, you should use the WordPress’ Crop option. In Gutenberg, you’ll find it displayed in the toolbar above your image.
In the Classic editor, you first need to click on the image and select the Edit option.
A pop-up window Image Details will appear with information regarding your file written in it. To crop your photo, select the Edit Original option on the right-hand side of the window.
The crop option is the first in line.
You can crop your image even before adding it to a page or post. While you’re still exploring the media library, find the photo in question, click on Edit Image on the right-hand side of the screen.
In the newly-opened Image Details window, select the option to crop the file before you insert it onto a page.
Qode Themes: Top Picks
View Collection
Once you upload an image to your media library, you may realize that it appears sideways or upside down. This usually happens if a picture is taken with a phone because the Exchangeable Image File (EXIF) metadata, which determines the orientation of an image, can’t be transferred to WordPress (not all software can read that kind of metadata).
To rotate your image, click on it, and select the Edit option.
A pop-up window Image Details will appear with information regarding your file written in it. To rotate the photo, click on the Edit Original button displayed below your image.
The buttons of our interest are second and third in line. Click on Rotate Left or Rotate Right and save the changes.
You can rotate your image in the media library, just like you could crop it. Simply select the file in the library, press the Edit Image button, and rotate the photo.
This problem usually occurs if images are taken with a phone’s front camera. You can fix it within the media library or by editing the file on a page or post.
For testing purposes, we’ve tweaked our image so that it looks as if shot in a mirror.
The path leading to the Flip button is the same as the one to Crop and Rotate Left/Right options. If you want to flip an image in the library, select the file, click on Edit Image and then choose between Flip Vertical or Flip Horizontal. Alternatively, once you add your image to a page, click on Edit, then press Edit Original and flip the file.
To make your blog posts more interesting, you can add cover images at the beginning of new sections and chapters. This feature is exclusive to Gutenberg and to make use of it, you must add the Cover block to your post.
Then, you need to upload an image or a video file or select them from your media library. Alternatively, you also have the option to choose a color that will be used instead of an image.
Once you select the file, some editing options will appear in the sidebar menu on the right. The first one allows you to enrich your page with the parallax effect. To add it, enable the Fixed Background option.
Some settings enable you to add text and choose color overlay for your cover image (to make it better match the style of your theme or the mood of the post), specify the opacity level, as well as adjust its position and dimensions.
Featured images are a visual illustration of your content, be it a post, page, or a custom post type. This feature depends on a theme you are using and has nothing to do with the platform itself. To learn more about them, make sure to give the how to add featured images to your WordPress posts article a read.
Aside from using the Featured Image option to display it on their website, many users who are new to WordPress also upload the same image in the page builder of their choice. And only when they preview that page do they realize that there are two featured images at the top of a page. To prevent this from happening again, only use the Featured Image option displayed in the sidebar and never add it to the editor.
In case you’re using a theme that doesn’t support featured images, and also to ensure your posts are never published without a featured image, consider installing a Quick Featured Images plugin. In just a few clicks, you can set a default featured image for future posts, as well as remove and replace featured images for existing posts. You have the option to specify the so-called rules that will be applied to featured images before they are added to a post. This plugin is also a true time-saver because it lets you perform bulk actions.
Organizing your images well and enabling users to find more quickly what interests them is easy to do when you use tags. However, WordPress doesn’t allow you to add them to photos by default. Instead, you need to install a powerful image gallery plugin to your site to do that job.
Luckily, you can find excellent plugins for that on the official WordPress plugin repository. The most popular ones include Photo Gallery by 10Web, Envira Photo Gallery, and FooGallery.
Alternatively, you can install a WordPress photography theme that includes the possibility of adding tags by default.
Let’s Wrap it Up
From uploading images, cropping them, creating image galleries, and removing duplicate featured images, to resolving duplicate featured image issue, creating a magnifying glass, adding a watermark to your photos, and more, we hope our roundup of the most common image issues in WordPress helps you fix them with ease. As you could see, most issues can be resolved from your admin dashboard and don’t even require the use of a plugin. For those that do need a plugin, we have made a selection of the finest options on the market that are free to download and will help you complete desired actions in a few steps. What matters is that, if you follow our explanations, you will save yourself a lot of nerves and time, and create striking imagery-filled websites.
