Search

How to Optimize Images to Speed Up Page Load in WordPress

Listen to this article

Images are important components in any website or blog. In fact, they are a great way to keep the reader interested. Images are not just used to make a post attractive, but are also used to convey information through infographics (such as workflow or statistical information, etc).

[space]

Accept what needs to be done: Why is it important to optimize images?

Adding many images affects the size of your webpage or blog post, which means, the more the number of images, or the larger the size of the images, the more the page loading time.

Why Optimize Images

Not always can we reduce the number of images, sometimes they just have to be there. What we can do, is reduce the image size and delete unimportant image metadata, to reduce page load time. This process is known as image optimization. Faster page loading will give way to

  • better user experience

  • reduced bounce rate

  • improved search engine rankings (search engines penalize pages with higher load times)

Do note however, there may not be instant measurable results. But, over time you will have noticed a difference.

[space]

Just go ahead and do the needful: How to optimize the images?

Image optimization is reducing the image size, by stripping the image of unwanted data and metadata and reducing details through compression.

How to Optimize Images

Points to consider while creating an image:

  • Delete/crop unwanted content, like white spaces. Instead use CSS to create a padding around the image

  • Use the appropriate file format when saving your images. Generally, the norm is to use JPG for photographic images or images with many colors, and PNG for logos or for partially transparent images. SVG is used for vector graphics.

  • Using Image Sprites. An image sprite is a collection of images, put in a single image. Using CSS only a part of the image can be shown. Using image sprites will reduce the number of server requests to load images, thus reducing page load time.

  • If possible, keep the colors you use to a minimum

Let a plugin handle compression:

There are several plugins available that readily compress images. My pick of the lot is the EWWW Image Optimizer. The EWWW Image Optimizer ensures automatic and lossless optimization of your images, resulting in smaller file size, while maintaining quality. The main features of the plugin are:

  1. Automatically compress the image at the time of uploadEWWW Plugin

  2. Bulk compress all images in Media Library

  3. Lists the current image size for the image along with % compressed

  4. Option to individually compress images

  5. File conversion options (from JPG to PNG and vice versa)

  6. Maintains copy of original image (optional), which you can restore back if you are not happy with the compression

[space]

Still not happy? There’s always Lazy Loading

Lazy loading is the concept of postponing the loading of objects (which are not in the viewport of the user), till the user scrolls and views them. Thus, in case of images, the loading of the images will be delayed till the user views them, resulting in faster page loads. I recommend exploring the BJ Lazy Load Plugin, which provides this feature.

[space]

Was this article helpful? Or did you know these points already and wanted to add more? In any case, I would love to hear your views about Optimizing web Images. Be sure to leave your comments, in the comment section below.

Praveen Chauhan

Praveen Chauhan

One Response

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads

    WordPress Tips & Tricks
    Ketan Vyawahare

    How to Make Responsive Tables using CSS without Tag Read More »