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.
Create Photo Gallery in WordPress
When it comes to showcasing the pictures in a professional looking with the grid-like gallery, most of your might start searching for the gallery plugin like Envira Gallery and NextGen Gallery. In fact, the truth is that you do not need to do so, but can leverage the power of the default WordPress gallery feature that many people do not know. Check the below steps of how to use this special function.
Step 1 – Create a Special Webpage for the Photo Gallery
The first thing you need to do is to create a new webpage for the display of your photo gallery. You can name it as “Photo Gallery” or anything you like. After that, you need to click the Add Media button the editing page.
Next, WordPress will open the media uploader that contains 4 options of Insert Media, Create Gallery, Featured Image and Insert from URL. Here, you need to choose the Create Gallery link.
Now, you can add your preferred images into this gallery by uploading from your local desktop or by choosing from your media library. Then, you simply need to click the Create a New Gallery button. Note that in the bottom of the screen, you can know how many images you have selected and can clear them in one click of button.
Step 2 – Edit Your Photo Gallery
The next step is to edit your photo gallery to have it displayed in the way you like. Here, you need to do 5 things as listed as below.
- Decide the Display Order – Here, you can reverse the display order totally or order these images randomly. Even, you can drag and drop them in any order you want.
- Link To – There are two options, Media File and Attachment Page. This option determines the action that takes place when a user clicks on the photo thumbnail. If you choose “Media File”, the user will be taken to a page which who the full size photo. However, if you choose “Attachment Page”, the user will be linked to a page that integrates with your site theme and allows your visitors to comment on the photo.
- Columns – There are 10 options from 1 to 9 which represents that how many columns of thumbnail photos displayed on the page. The photos are shown from left to the right in a given row.
- Size – You should choose the image size among the options of Thumbnail, Medium, Large and Full Size.
- Image Caption – If you want to present the detailed information about your images, you can caption these images in the below of each one.
As everything is configured properly, you can click the Inset Gallery button. Then, the media uploader will be closed and there is a line of gallery code appeared inside your editing page.
Step 3 – Check Your Photo Gallery and Make Some Modifications
Now, you can click the Preview button to check how this gallery looks. If you are not satisfied with the overall display, you can click the Add Media again to edit the gallery until you are happy with the way it appears.
Then, you can publish this webpage and add it to your navigation bar from the Menu settings of WordPress admin.
Customize the Display of Photo Gallery
If you are tired of the grid looking, you can customize the display of your photo gallery and showcase these images in the carousel or the masonry manner. If you are not good at the CSS coding stuff, you need a WordPress plugin to help you achieve this. Here, we suggest you to try the Simple Photo Gallery plugin.
After installing this gallery plugin, you firstly need to configure its settings from the newly-added Photo Gallery tab. In this page, there are two things for you to decide.
- Sort the order of the gallery by image ID, date and name.
- Choose the webpage to display the gallery. You can create one on your own or pick the default Galleries page created by this plugin automatically.
Now, you can click the Create New Gallery button to add the photo gallery. To begin with, you should give this gallery a name and decide the template among 3 options.
- Template 1 – This template displays your gallery in a grid manner and each image is showcased with the thumbnail size of 150×150.
- Template 2 – This template also displays a gird-like gallery, but the image is coming with the true portrait proportions.
- Template 3 – This option results in the photo gallery with the masonry style.
If you haven’t decided the display order previously, you also need to determine the sort order for the photos. Besides, we highly recommend you to check the box that enables the preview function, so that you can modify your gallery timely.
If you want to protect the intellectual property of your images, you can add the watermark on each of them. Here, you can decide the watermark text, text opacity, text placement, font size and the max dimension size for the preview.
If you upload a large number of images for your gallery, it is recommended to turn on the pagination function and to decide the exact images to be displayed for each webpage.
Now, you can upload your preferred images and click the Save Gallery button.
Create a Masonry Photo Gallery
To get the masonry style, you simply need to choose the Template 3 for your gallery, and enter the shortcode of [wppg_photo_gallery id=”1″] to the gallery webpage. Note that the id parameter refers to the ID number of your gallery. You can find the number from the Existing Galleries section. The final results look like the below sample.
Create a Slider for Photo Gallery with Carousel
If you are looking to create a slider for your gallery, the required shortcode is [wppg_photo_slider id=”1″]. Even, you can add the carousel for the slider with the parameter of show_carousel=”1”.
Create the Albums to Display Multiple Galleries
If you have more than one gallery and want to categorize them for display, you can use the album function offered by this plugin.
Here, you firstly need to create multiple galleries to showcase your images with different niches. Then, click the Create New Album button.
In the next page, you are required to enter the album name, choose a special thumbnail image to represent this album, sort the order for each gallery and select from the available galleries you have created previously.
After clicking the Save Album button, you now need to create a new webpage to showcase this album, and add it to your website navigation. Note that this page needs to include the shortcode of [wppg_photo_albums_home].
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.