- \n
- Check file permissions:<\/strong>\u00a0You can view the settings for your
\/wp-content\/uploads\/<\/code> directory using an FTP client or through your hosting control panel. Generally, the permissions for WordPress directories and folders should be set to755<\/code>, while most file permissions should be set to644<\/code>.<\/li>\n<\/ul>\n\n\n\n![\"\"](\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2024\/07\/wordpress-file-permissions.png\" "\\"\\"")
<\/a>Image source: Kinsta<\/a><\/figcaption><\/figure>\n\n\n\n - \n
- Increase PHP limits<\/strong>: Your website won’t let you upload images over the limit. Update the
upload_max_filesize<\/code> andpost_max_size<\/code> limits in thephp.ini<\/code> file on your server. Change the default32M<\/code> or another number currently set to the desired limit (e.g.256M<\/code> or512M<\/code>).<\/li>\n\n\n\n- Use a WordPress Plugin:<\/strong> You can use WordPress plugins to adjust settings automatically. Use plugins like Big File Uploads<\/a> and Increase Maximum Upload File Size<\/a> to allow your site to upload larger image files.<\/li>\n<\/ul>\n\n\n\n
2. Images not displaying<\/h3>\n\n\n\n
You\u2019ve uploaded your images successfully, but they just won\u2019t display on your website. <\/p>\n\n\n\n
![\"\"](\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2024\/07\/wordpress-image-not-displaying-1024x408.png\" "\\"\\"")
<\/a><\/figure>\n\n\n\nFortunately, there are a few common reasons why this might be happening, and several straightforward solutions to get your images showing as they should.<\/p>\n\n\n\n
Solutions<\/strong><\/strong>:<\/p>\n\n\n\n
- \n
- Check if the image exists: <\/strong>Open the image URL to verify if it exists on the disk. If the URL points to a thumbnail (e.g., with dimensions like ‘1024×768’ before the file extension such as example.com\/wp-content\/uploads\/2024\/04\/image-1024×768.jpg), remove the dimensions from the URL (eg. example.com\/wp-content\/uploads\/2024\/04\/image.jpg) to test the original image. If the original image loads, proceed to regenerate the thumbnails as instructed below. If the original image doesn’t load, it means it doesn’t exist on the disk.<\/li>\n\n\n\n
- Check the image URLs: <\/strong>An incorrect URL is often the culprit behind images not displaying properly. This issue might arise if the URLs are broken, missing, or formatted incorrectly. Head over to your media library, click on the image in question, and verify that the URL is correct. If you\u2019ve recently moved your website to a new domain or changed its directory structure, make sure that all image URLs have been updated to reflect these changes. Additionally, if you\u2019re using a CDN, try temporarily disabling it or double-check that the CDN URL is accurate and not an issue on their side.<\/li>\n\n\n\n
- Regenerate the thumbnails:<\/strong> WordPress, for instance, uses various sizes of images across different parts of your site. Sometimes, the thumbnails might not be generated correctly. Regenerating the thumbnails using a plugin such as reGenerate Thumbnails Advanced<\/a> can help resolve this. Once the plugin is active, navigate to its settings and run the regenerate process. This will recreate all the necessary thumbnail sizes for your images, and with any luck, they should start appearing as they should.<\/li>\n\n\n\n
- Clear your cache<\/strong>: Both your website and your browser can cache<\/a> images, which sometimes leads to outdated or broken images being displayed. If you\u2019re using a caching plugin, you can clear the cache<\/a> from the plugin\u2019s settings. Don\u2019t forget to clear your browser cache as well. Also, if applicable, make sure to also clear the server and CDN cache. <\/li>\n<\/ul>\n\n\n\n
By following these steps, you can typically resolve the issue of images not displaying on your WordPress site.<\/p>\n\n\n\n
3. Slow image loading<\/h3>\n\n\n\n
Images on your site can load slowly, which affects user experience. <\/p>\n\n\n\n
![\"\"](\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2024\/07\/loading-website.png\" "\\"\\"")
<\/a><\/figure>\n\n\n\nThis issue can lead to higher bounce rates as visitors may leave the site before it fully loads. Slow-loading images also negatively impact your site’s SEO, reducing its visibility in search engine results. <\/p>\n\n\n\n
Additionally, if your site has a lot of images, unoptimized image loading can increase server load and bandwidth usage, further slowing down the entire site.<\/p>\n\n\n\n
Solutions<\/strong>:<\/p>\n\n\n\n
- \n
- Optimize images<\/strong>: Use a plugin like ShortPixel Image Optimizer<\/a> to compress images without loss of quality.<\/li>\n\n\n\n
- Use a CDN<\/strong>: Use a solution such as ShortPixel Adaptive Images<\/a> to serve images from servers closer to your users’ locations. CDNs reduce the distance data must travel, speeding up image loading times. They also provide additional benefits like delivering the images in next-gen WebP<\/a> and AVIF<\/a> formats, as well as properly-sizing<\/a> the images.<\/li>\n\n\n\n
- Serve next-gen formats:<\/strong> Consider serving images in next-generation formats such as WebP and AVIF, which provide superior compression and quality compared to traditional formats. These formats can be converted and delivered automatically using WordPress plugins, including ShortPixel Image Optimizer and Adaptive Images linked above.<\/li>\n\n\n\n
- Lazy loading<\/strong>: Enable lazy loading to defer the loading of off-screen images until the user scrolls near them. Lazy loading reduces initial page load time, making your site appear faster and more responsive to users.<\/li>\n<\/ul>\n\n\n\n
4. Duplicate images in the Media Library<\/h3>\n\n\n\n
You may see multiple copies of the same image in your media library. <\/p>\n\n\n\n
![\"\"](\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2024\/07\/wordpress-duplicate-image.png\" "\\"\\"")
<\/a><\/figure>\n\n\n\nThis issue can clutter your media library, making it harder to manage and find the images you need. <\/p>\n\n\n\n
Duplicate images also consume unnecessary server storage, which can increase hosting costs and potentially affect site performance.<\/p>\n\n\n\n
Solutions:<\/strong><\/p>\n\n\n\n
- \n
- Avoid re-uploads<\/strong>: Do not upload the same image multiple times. Instead, make use of existing images in your media library. Use the “Add Media” button to search for and insert images already in your library rather than uploading new copies. Train site contributors to follow this practice to prevent duplicates.<\/li>\n\n\n\n
- Use a cleaner plugin<\/strong>: Use a plugin like Media Cleaner<\/a> to identify and remove duplicate images from your media library. Media Cleaner scans your library for duplicates and provides an easy way to delete them, freeing up storage space and keeping your media library organized. Regularly schedule scans with the plugin to maintain a clean and efficient media library over time.<\/li>\n<\/ul>\n\n\n\n
5. WordPress featured image not showing<\/h3>\n\n\n\n
You may occasionally encounter a situation where the WordPress featured image is not showing<\/a> in the posts or pages.<\/p>\n\n\n\n
It can happen for various reasons, including theme issues, plugin conflicts, media library errors, and HTTP issues. <\/p>\n\n\n\n
Solutions: <\/strong><\/p>\n\n\n\n
- \n
- Set featured images properly<\/strong>: Use the block editor to set the featured image on the right-hand sidebar when editing posts or pages. This ensures that the featured image is correctly associated with the post or page and is displayed where intended.<\/li>\n<\/ul>\n\n\n\n
![\"\"](\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2024\/07\/set-featured-image.png\" "\\"\\"")
<\/a><\/figure>\n\n\n\n- \n
- Check and fix theme files<\/strong>: Verify that the
the_post_thumbnail()<\/code> function is correctly called in the theme’s template files (e.g., single.php, archive.php). This function is important for displaying the featured image as defined by your theme. If you’re not familiar with the technical intricacies, it’s best to contact the theme developer for assistance.<\/li>\n\n\n\n- Plugin conflicts<\/strong>: Deactivate all plugins and reactivate them one by one to identify if a plugin is causing the featured image display issue. Some plugins may conflict with how WordPress handles featured images, preventing them from displaying properly.<\/li>\n<\/ul>\n\n\n\n
6. Poor image quality<\/h3>\n\n\n\n
Images might appear blurry or pixelated after uploading, detracting from your site’s visual appeal and professionalism.<\/p>\n\n\n\n
![\"\"](\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2024\/07\/wordpress-blurry-image.jpg\" "\\"\\"")
<\/a><\/figure>\n\n\n\nSolutions<\/strong><\/p>\n\n\n\n
- \n
- Use high-quality images<\/strong>: Start with high-resolution images that are suitable for web display, and always equal to or larger than the container where the image is inserted. Higher-quality images will retain clarity and detail after compression.<\/li>\n\n\n\n
- Avoid over-compression<\/strong>: Make sure you don’t use more than one image optimizer, which could lead to over-compression. Optimize images without excessively reducing their quality. Find a balance between file size reduction and maintaining image sharpness, such as with the Glossy<\/a> optimization level of ShortPixel Image Optimizer<\/a>.<\/li>\n\n\n\n
- Check thumbnail display<\/strong>: Make sure that the image displayed is not a thumbnail smaller than the container on the screen. If so, ensure the thumbnail is appropriately sized for the container by adjusting the resolution using the block editing panel. Here is a guide<\/a> if you’re experiencing this issue with WooCommerce.<\/li>\n<\/ul>\n\n\n\n
![\"\"](\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2024\/07\/full-size-image-wordpress-block.jpg\" "\\"\\"")
<\/a><\/figure>\n\n\n\n7. Featured image appearing twice<\/h3>\n\n\n\n
Sometimes, you may encounter an issue where the featured image appears twice in your posts. <\/p>\n\n\n\n
![\"\"](\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2024\/07\/wordpress-duplicate-featured-image.jpg\" "\\"\\"")
<\/a><\/figure>\n\n\n\nSolutions:<\/strong><\/p>\n\n\n\n
- \n
- Review post content<\/strong>: Many themes automatically display the featured image at the top of your posts. If you also insert the same image manually within the post content, it will appear twice. Make sure you haven\u2019t inserted the featured image manually in the content editor. If you find the image within the post content, remove it, as it will already be displayed by your theme.<\/li>\n<\/ul>\n\n\n\n
8. Mixed content error after switching to HTTPS<\/h3>\n\n\n\n
If you switch your WordPress website from HTTP to HTTPS<\/a> to make it safer, images loaded over HTTP can cause mixed content errors.<\/p>\n\n\n\n
These errors can lead to browsers blocking or warning against insecure resources, compromising user experience and site integrity. <\/p>\n\n\n\n
This issue can also impact your site’s security credibility, potentially deterring visitors.<\/p>\n\n\n\n
Solutions:<\/strong><\/p>\n\n\n\n
- \n
- Update the WordPress general settings: <\/strong>In the WordPress admin area, visit the Settings > General page and update your WordPress Address and Site Address fields by replacing
http<\/code> withhttps<\/code>.<\/li>\n<\/ul>\n\n\n\n![\"\"](\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2024\/07\/https-wordpress-general-settings.png\" "\\"\\"")
<\/a><\/figure>\n\n\n\n- \n
- Update .htaccess redirects:<\/strong> Ensure your
.htaccess<\/code> file includes a rule<\/a> that redirects all HTTP traffic to HTTPS, mitigating mixed content issues at the server level.<\/li>\n\n\n\n- Use a plugin:<\/strong> Use a plugin like Better Search Replace<\/a> to scan and convert all HTTP URLs in your database to HTTPS. It works well for large sites with many images.<\/li>\n<\/ul>\n\n\n\n
9. HTTP error during image upload<\/h3>\n\n\n\n
It can be very annoying to get an HTTP error when trying to upload an image. Several things can cause this, such as a wrongly configured server, PHP memory limits, or file size limits. <\/p>\n\n\n\n
Solutions:<\/strong><\/p>\n\n\n\n
- \n
- Check file size and type limits:<\/strong> Ensure the image file does not exceed WordPress or server file size limits and is in an allowed file type. If necessary, resize the image or convert it to a different format.<\/li>\n\n\n\n
- Increase PHP memory limit:<\/strong> Edit the
wp-config.php<\/code> file to increase the memory available to WordPress. Add or adjust thedefine('WP_MEMORY_LIMIT', '256M');<\/code> constant. It provides sufficient memory for uploads.<\/li>\n\n\n\n- Adjust .htaccess file:<\/strong> Your provider (especially on shared hosting solutions) may impose restrictions on CPU usage to prevent abuse across shared hosts. One common restriction is preventing the execution of multi-threaded tasks. For example, when loading an image with Imagick, which typically utilizes multi-threading for faster processing, you may encounter errors due to these restrictions. To resolve this issue, you can instruct Imagick to run on a single thread by adding the
SetEnv MAGICK_THREAD_LIMIT 1<\/code> rule to the.htaccess<\/code> file.<\/li>\n<\/ul>\n\n\n\n10. Blank thumbnails in the Media Gallery<\/h3>\n\n\n\n
WordPress users may encounter an issue where image thumbnails in the Media Library appear as blank or greyed-out icons instead of displaying the actual images. <\/p>\n\n\n\n
![\"\"](\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2024\/07\/wordpress-blank-thumbnails.png\" "\\"\\"")
<\/a><\/figure>\n\n\n\nThis problem can arise due to various causes related to plugins, themes, changes in thumbnail sizes, conflicting file names, or issues during site migration to HTTPS.<\/p>\n\n\n\n
Solutions<\/strong><\/p>\n\n\n\n
- Increase PHP memory limit:<\/strong> Edit the
- Use a plugin:<\/strong> Use a plugin like Better Search Replace<\/a> to scan and convert all HTTP URLs in your database to HTTPS. It works well for large sites with many images.<\/li>\n<\/ul>\n\n\n\n
- Update .htaccess redirects:<\/strong> Ensure your
- Update the WordPress general settings: <\/strong>In the WordPress admin area, visit the Settings > General page and update your WordPress Address and Site Address fields by replacing
- Avoid over-compression<\/strong>: Make sure you don’t use more than one image optimizer, which could lead to over-compression. Optimize images without excessively reducing their quality. Find a balance between file size reduction and maintaining image sharpness, such as with the Glossy<\/a> optimization level of ShortPixel Image Optimizer<\/a>.<\/li>\n\n\n\n
- Plugin conflicts<\/strong>: Deactivate all plugins and reactivate them one by one to identify if a plugin is causing the featured image display issue. Some plugins may conflict with how WordPress handles featured images, preventing them from displaying properly.<\/li>\n<\/ul>\n\n\n\n
- Check and fix theme files<\/strong>: Verify that the
- Use a cleaner plugin<\/strong>: Use a plugin like Media Cleaner<\/a> to identify and remove duplicate images from your media library. Media Cleaner scans your library for duplicates and provides an easy way to delete them, freeing up storage space and keeping your media library organized. Regularly schedule scans with the plugin to maintain a clean and efficient media library over time.<\/li>\n<\/ul>\n\n\n\n
- Use a CDN<\/strong>: Use a solution such as ShortPixel Adaptive Images<\/a> to serve images from servers closer to your users’ locations. CDNs reduce the distance data must travel, speeding up image loading times. They also provide additional benefits like delivering the images in next-gen WebP<\/a> and AVIF<\/a> formats, as well as properly-sizing<\/a> the images.<\/li>\n\n\n\n
- Check the image URLs: <\/strong>An incorrect URL is often the culprit behind images not displaying properly. This issue might arise if the URLs are broken, missing, or formatted incorrectly. Head over to your media library, click on the image in question, and verify that the URL is correct. If you\u2019ve recently moved your website to a new domain or changed its directory structure, make sure that all image URLs have been updated to reflect these changes. Additionally, if you\u2019re using a CDN, try temporarily disabling it or double-check that the CDN URL is accurate and not an issue on their side.<\/li>\n\n\n\n
- Use a WordPress Plugin:<\/strong> You can use WordPress plugins to adjust settings automatically. Use plugins like Big File Uploads<\/a> and Increase Maximum Upload File Size<\/a> to allow your site to upload larger image files.<\/li>\n<\/ul>\n\n\n\n
- Increase PHP limits<\/strong>: Your website won’t let you upload images over the limit. Update the