What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Master Image Optimization in WordPress

How to Master Image Optimization in WordPress

Frankly speaking, image optimization is one of the most essential tasks you need to do to better improve the quality of your posts and your whole site. At present, most of you have already realized the benefits brought by these great graphical components. For instance, it can serve as the visual attraction for the CTA, convey your thoughts vividly, diverse your web contents and many more. However, the bad news is that the wrong usage of images can be a disaster for your site. In the following, we have introduced a simple guide of how to master image optimization in WordPress.

Note that this guidance includes the common errors you might make when using the images on your posts, along with the effective troubleshooting.

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.

Luckily, this is the easy task to finish due to the existence of multiple online image resizers.

Personally, we recommend you to utilize the WP Smush plugin, which can achieve the image resize and optimization easily. Also, this plugin works out for boosting your SEO and improve the website performance.

With it, you can start the 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.

Smush Settings

Also, you can choose to resize the images automatically that are larger than the exact width and height you have set already.

Resize Original Images

Now, you can start the bulk optimization for your images by clicking the Run button. And this plugin will give you a report of the total savings after the optimization.

Bulk Smush

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.

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.

Here, we think you can try the plugin of BJ Lazy Load. With it, you can enable the lazy loading function to your images directly from the plugin settings page.

BJ Lazy Load

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.

Image Caption

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.

Or, you can check this post for the further guidance.

Responsive Images


Susan Rose is a freelance writer who has a deep knowledge about WordPress. She loves everything related to website building since the freshman year at Christopher Newport University, and loves to share her experience with people all over all the world. In the daily life, Susan loves detective novels as it can train her logical thinking and creativity.