Image is widely used in WordPress to make the website more attractive to the visitors. However, without properly optimize it in WordPress, image might bring some negative impact on website. In below, we will talk about how to manage images in WordPress, from optimization, SEO, user experience and more.
Resize the Images If the Dimension Is Large
The large images can destroy your page loading speed a lot, consume plenty of disk space and use a large sum of bandwidth. None of these are something you want to happen on your site. In this case, the first image optimization task is to resize the large images to the proper dimension before uploading them to your website.
To resize the images, you can do it before uploading the image to website. This might be boring but it’s recommended in most case. Another benefit is that resizing images manually will also save the storage of your disk since no big images will be uploaded to your server.
However, if you want to use WordPress plugins to handle it, there is one called WP Smush plugin. This tool could do automatic image optimization whenever the new images are uploaded to the media library. Also, you can decide which kinds of images can be optimized and resized.
Pay Attention to the Image Format
In addition to the size and dimension, the format also plays a vital role in the image utilization. Here, we’d like to list the commonly used ones.
- PNG – This format ensures the lossless compression and the superb quality. However, the downside is that it results in the large size for the image files. In this case, this image format is suitable for some computer-generated pictures or the professional images.
- JPEG – This format has been used for more than 70% of the sites worldwide. Generally, if your images are of the large range of colors or gradients, you can choose it. However, this format is not good for the support of transparency.
- GIF – This kind of format is suitable for the animated images.
Frankly speaking, the proper image format can achieve the better display and the more effective showcase on your site.
Control WordPress Image Compression
WordPress is built with an image compression feature. When JPEG files are uploaded to your WordPress sites, they will be compressed automatically even if you don’t tell WordPress to do so. Once WordPress compressed JPEG images to 90% of their quality, but in WordPress v4.5, the percentage decreases to 82%.
The default image compression is good for improving the website performance and guaranteeing a better user experience without bringing a large visual difference of the quality. However, if you run a photography site which displays high quality images, or want to change the default image compression settings to something else you want, you can do it easily.
Even you could use WordPress plugin (for example Imsanity) to deal with this, We don’t recommend plugin in this case since it’s really simple. You could open functions.php of your theme, and add below line to the file, then its all done.
Consider the Utilization of Lazy Loading
If your website is a photo gallery one or is of rich images, you’d better enable the lazy loading for these graphical items. Actually, this is a great resource-saving technique. When it is enabled, your images can only be loaded when people scroll down to them. For instance, if one of your blog posts contains 10 images at all, these images will not be loaded when people load this webpage. Instead, they will be loaded and viewed only when your readers scroll down to reach them.
By activating this feature, you can save your bandwidth and improve the image loading time to a large degree.
Specify the Alt Attribute for All the Images
We have to tell you the truth that the search engines cannot specify what an image is going to talk about. In this case, you have to make use of the “alt” attribute to transfer the main idea of the image into the plain text that the searching robots can understand.
In fact, we have found that many people simply leave this field blank. Surely, you can choose to do so. However, for the sake of SEO improvement, we highly recommend you to enter some keywords into this special attribute along with the proper image description.
Choose the Image Caption
This point is always neglected by most webmasters. It is true that the image caption is not necessary in most cases. However, if your image is a screenshot for the topic-specific tutorial, you need to enter the caption so as to help people understand the main idea easily. Also, the image caption can boost your SEO to some degree.
Make Sure that the Images Are Responsive
Now, most webmasters know the importance of the responsive design for a website. After all, this can make sure that their pages can be checked properly on all the devices. However, the truth is that even if your website is responsive, it does not mean that all your images are of the same nature.
In fact, when you upload the images to your WordPress site, the system will resize them into different versions, including the Thumbnail, Full Size, Medium and many more. Here, you can leverage the Responsive Images plugin. This tool will detect what kind of device people are using to access your site and allows you to choose the image size in advance. This way, your images can be loaded with the proper version and size you have selected previously.
Prevent Image Theft in WordPress
If you are a photographer and the image on your sites are fully owned by you, it will be headache if some one else steal your image and share here and there. So, to avoid it, you need to prevent image theft by the others.
It’s basic that you need to display a Copyright or get DMCA Badge, and from technical perspective, you could add a watermark on the images.
Surely, you can choose to add the watermark manually using some online tools like Photoshop and Fireworks. However, if you are looking for an easy and time-saving process, you can choose to use the Image Watermark plugin, with which you can start the automatic practice to watermark all the images uploaded to your WordPress Media Library. Even, this plugin gives you the freedom for bulk watermarking your previously uploaded photos. Besides, with Image Watermark plugin, you can Disallow the Right-Click on the image.
Start the Hotlinking Protection
To be frank, if someone are hotlinking your site, they do not only steal your images, but also steal your bandwidth. After all, instead of downloading from your site and uploading the images to their websites, they showcase your self-owned graphical content using your image URL directly. In this case, start the hotlinking protection is surely essential.
If your WordPress Hoster is a rich-featured one that offers the Hotlink Protection service, you can activate this service using your control panel easily. Also, you can enable the protection by adding the below codes into your .htaccess file.
Even, there are a lot of lightweight WordPress plugins available to help you achieve this purpose. Personally, we recommend you to try the HotLink Protection plugin.
Enhance Image Display with Lightbox
It is unavoidable that you need to insert some images into your blog posts. It is fine that you just use these graphical components to make the web content visually-appealing. However, if you showcase some how-to posts or tutorials, things can be different. Most of the images in these articles can be the screenshots. And you have to make sure that these screenshots are clear enough so that people can learn the details from them easily. To achieve this, the lightbox display is necessary. Here, we’d like to tell you how to add WordPress lightbox for image enhancement easily.
Frankly speaking, due to the limited width size in the post columns, your large images that have some details can hardly be showcased in a clear way. Especially, if you have the sidebar on each page, things can be even worse. To deal with this issue, you can give people the option to enlarge the images after clicking them via the lightbox feature.
The FooBox plugin can display the responsive images for your WordPress site with the built-in social sharing. With it, you can resize and showcase all your graphical components on all the screen sizes. And also, it allows the effortless backwards and forwards navigation for the easy browsing, along with the built-in progress bar.
Another way to achieve this is to use Adobe Lightroom.
With above technology, you could also add feature to your image, such as when clicking the image, image could be enlarged automatically.
Image Alt and Image Title
In WordPress, the attribute that defines the content of the image in HTML is called Image Alt text (also known as alternate text). It is an important factor for optimization of modern websites because it is used by search engines to understand the content and relevancy of an image. To be precise, major search engines, particularly Google, consider the image alt text to measure the relevancy of an image’s use on a webpage.
Just like alt text attribute adds the description of an image, the image title is an attribute that adds image tag to an image on WordPress. In simple words, the image title is an attribute that provides a title to the images uploaded on your WordPress site. This title is displayed to human readers when they hover the mouse pointer over an image.
Although the image alt text and the image title may sound similar, there are several differences between the two.
- Firstly, an image title adds a title to an image, whereas an alt text describes a particular image.
- Secondly, image title is not given as much importance as alt text by the search engines.
- Thirdly, image title is displayed to visitors when the mouse pointer is taken over the image, whereas an alt text is displayed when the image fails to load.
- Moreover, an image title is displayed as a pop-up over the image container box, whereas an alt text appears in the box to describe the image that has failed to load.
How to Fix WordPress HTTP Error on Image Uploads
There are many commonly-seen WordPress errors which have caused much trouble for beginners, and the WordPress HTTP error on image uploads is among the most annoying ones. When this error happens, you just cannot upload images or any other kind of media files.
The causes for this error vary. So it is easy to find a fix that works for others having the same problem, but it could be rather hard to get one that works for you. This is where the difficulty lies in.
Considering this situation, we have detailed several possible solutions that you can try if you are stuck with the error. Hopefully, there is at least one method working for your blog. Remember to be careful when trying as some of the solutions require modification of important files.
Solution 1: Change the File Permissions of the Uploads Folder
One of the most common causes of the error is the incorrect file permissions. If the file permissions are changed accidentally, the uploads folder might not be writable or readable, which leads to image upload problems.
To correct the file permissions, you have to connect to your server with an FTP client or a web-based file manager. Note that the details below are based on the File Manager in cPanel.
First of all, find the uploads folder with the path /wp-content/uploads/. Right-click on the folder name and choose “Change Permissions”.
On the pop-up window, change the permissions to “744” and then click on the button saying “Change Permissions”. You can also try “755” later if “744” does not fix your problem.
Now upload some new images to your blog to see whether the HTTP error has disappeared.
Solution 2: Disable the Flash Uploader
The built-in Flash based file uploader is easy-to-use, but it has been found to cause some problems with certain WordPress installs. Therefore, one of the first methods to try is to disable this uploader if you have ever met troubles when using it, and then try the browser uploader.
This has worked for a large number of bloggers. You can simply switch to the browser uploader by following the link given on the upload screen or disabling the Flash uploader completely.
Solution 3: Exclude Flash Uploader from Access Protection
If you are using htpasswd (or password protected directory) with .htaccess, your web server might be stopping the /wp-admin/async-upload.php file from executing properly. In this case, you can add the following code snippet into your .htaccess file to make sure the Flash uploader is excluded from the authentication.
Note that the code above also excludes WordPress Cron and SXLRPC since they could not be handled correctly, either. If you do not want these rules, just remove them from the code.
Solution 4: Change the File Upload Path
To make images well-sorted, you may have defined custom paths for images and files to be uploaded, and this could also be the root of the HTTP error. To resolve this issue, you need to get the media settings back to the default so that images are all uploaded to the /wp-content/uploads/ folder instead of sub-folders.
The settings can be changed by going to “Settings” > “Media” in the admin area of your blog. Make sure there is no organization options are selected in the “Uploading Files” section. This is one of simplest while most effective solutions.
Solution 5: Change the PHP Version
If all of the methods above do not work, you can still try switching the PHP version you are using to a newer one, for example, changing from PHP 4.x to 5.x or from PHP 5.0 to 5.1. This has also fixed the HTTP error for many people. Most web hosts allow you to change the PHP version in your control panel.
Solution 6: Disable the Plugins on Your WordPress Site
Plugins are helpful, while they usually bring troubles, too. You can deactivate the plugins on your blog, and then re-check the image uploads. If the error is gone, then it should be caused by a plugin. At this time, you need to spend more time testing each plugin until finding the one that causes problem.
If the plugin giving rise to trouble is important and you do not want to delete it, you should seek help from the plugin author as soon as possible. The author might be able to offer you a solution.
Solution 7: Contact Your Hosting Provider
It is possible that the error is caused by some server configurations made by your hosting provider. For instance, they may have applied some new security measures which accidentally stopped your image uploader from working, or they have recently run an upgrade which changed the file permissions of your uploads folder. No matter which the case is, asking the support team for help does no harm.
The result could be happier if you are dealing with a good WordPress hosting provider which is kind enough to investigate the problem for you and then offer you a solution even if the fault is not theirs.