How to Optimize WordPress Images and make your site FASTER

If you want to provide a great user experience to your visitor, you’ll need to ensure that your website loads faster, so it doesn’t frustrate them. In fact, the speed of your website can make or break your online business. You MUST optimize WordPress images to make your site faster - because images are usually the heaviest part of your content,

Walmart has found a 2% increase in their conversion rate whenever they improved the speed by 1 second.

And Amazon found an increase in revenue by 1% for every 100 milliseconds of improvement to their site speed. These statistics indicate that making your website fast is critical to your website. An easy way of making your website faster is by optimizing all the images on your WordPress website.

If you’ve not yet considered the speed of your WordPress website as a critical component of your business, you’ll have to think again and start taking measures to improve the speed of your WordPress website.

Recommend reading: How to get a fast WordPress website - a complete guide [25 actions]

There are many ways to make your website faster. Some of them are listed below.

• Avoid using too many WordPress plugins
• Use WordPress CDN services
• Optimize CSS delivery
• Optimize WordPress images

Images that have not been optimized for the web are typically large. These images will take longer to load. It’s important that you optimize your images by making them as small as possible. However, most times, the process of optimizing images for WordPress and your website is tedious or gets in the way of producing content.

In this post, we will explain different ways to optimize your WordPress images and thus make your site load faster.

Compress images or save them for the web

It is a no-brainer that size of your image can influence the loading time of your WordPress website. As high-resolution images will have a larger file size, it is always better to compress the images before uploading.

Now you might have a question: what is WordPress image compression and how can it reduce the size without affecting the quality?

Compression is the process of decreasing image size dramatically by algorithmically removing image information that a human eye can’t perceive. This is a very effective way of optimizing WordPress images.

Though image compression is a sure-fire method to reduce the image size, when it comes to compressing JPEG files, sometimes the process loses the actual contents of the images during the process. This is the only downside of this approach. Remember to check the post-compression results carefully, to make sure that you are happy with the results of compression.

WP Smush is a popular WordPress plugin that lets you easily reduce the image file size by scanning every image you upload and removing unnecessary data information. The free version of this plugin lets you compress images up to 1 MB in size whereas, with the pro version, you can compress images up to 32 MB.

You can download WP Smush here.

Please also note that this plugin lets you optimize all of the newly uploaded images to your WordPress website. If you want to compress the existing images, you can use the Bulk Smush.it link under the media library tab to optimize existing WordPress images.

Lazy loading: optimize WordPress images loading time

[UPDATE: WordPress 5.4 has lazy loading built into the core, so you only need to perform this action if your WordPress version is below this version]

We all know that "A picture is worth a thousand words".

But using too many pictures on a single page can make your website load slower.

One easy way to improve your loading time is by removing unnecessary images and keeping only that is absolutely necessary. However, not every wants to reduce the number of images being used on a web page, only to make the page load faster.

How can this issue be solved?

You might have noticed it already- websites that use a lot of images on each page solve this issue by making the image load only when it is visible to the user. This tactic not only reduces the page load time but it saves server bandwidth as well. This is called lazy loading. Because the image is "lazy", it only comes up when it is needed.

If you’re on WordPress, it is easier to make the image loads only when it is visible. All you need to do is that install a Lazy load plugin. Once again this is an excellent way to optimize WordPress images for improved speed.

You can download the Lazy load plugin here.

This plugin doesn’t need any additional configuration as it works out-of-the-box upon installation and activation.

Read More: Divi vs Elementor

Use the optimized and correct image format

JPEG, PNG and GIF are the most popular image formats.

Knowing the differences between each image format lets you use the right format on your website, which even helps you when it comes to image optimization.

What format is better for optimized WordPress website images and when should you use it? Below are a few tips:

• GIF: Use GIF when your image is too small and uses a relatively less number of colors. For example, GIF is good choice for clip arts, bullets and charts. On the other hand, complex images with enhancements like drop shadows couldn’t be displayed properly using GIF.
• JPEG/JPG: It is suitable for complex images with many color variations or if it contains photographic images.
• PNG: PNG format is best suited for transparent images.
• WebP: this is the best format these days, but creating these images requires server support on your website

Please note that these are just general recommendations. Like any rules, there are exceptions, and some of these rules are meant to be broken.

Make effective use of browser cache

When you upload images on a web page, make sure you upload them to a single directory. Uploading your images to a single directory on a web page will help the browser to easily load those images using browser cache during repeated visits.

It's fine if you are uploading images via the default WordPress image uploader. But for instance, if you're creating HTML landing pages on WordPress, chances are you won't be using the default WordPress image uploader. In these cases, instead of uploading the images of a web page to different directories, make sure you upload all of them into a single directory.

If you want to read more about browser caching and how to leverage it, check out our detailed article here: How to Leverage Browser Caching in WordPress With or Without a Plugin [5 ways]

Use the same image multiple times

Another way to use browser caching for reducing image bandwidth is by using the same images multiple times throughout the site.

For example, when you're using logos or menu items from a page, make sure you call the same images throughout the site, so users don't need to download them several times but once, and browsers can display the images from the browser cache.

While using a textured background, make sure you use smaller images repeatedly instead of using a single large image. This can also help to reduce the loading time.

By default, when you upload images using media uploader on WordPress dashboard, it goes into the folder depends upon when you upload it. That means, all of the images that are being uploaded in a month will be located in a single directory.

For example, if you upload an image in 2021 January, it will be located in this directory: wp-content/uploads/2021/01.

Let’s look at the benefits of uploading through the media uploader and then, we’ll tell you what you should consider when you’re not uploading to your media uploader to speed up your website.

Media uploader makes the image loading quicker: The loading will be quicker if the images are stored in the same folder while browsing a web page. When the images are being called repeatedly, the browser can easily retrieve them from the browser cache if they’re in a single folder.

Oftentimes however, WordPress bloggers won’t use the default media uploader, especially while working on a customized landing page. For the sake of easiness, they upload images in a separate directory.

In such cases make sure that you upload all of the images of that page in a single directory instead of uploading to multiple directories. This tactic can improve the loading time as the file caching will be easier during repeated visits.

Use CSS instead of images

Do you know you can improve the loading time by not using any image at all?

For example, it is totally possible to generate certain shapes by using simple CSS instead of images such as rounded rectangles, gradients, drop shadows, and transparent images. That being said, make sure that you keep an eye on browser compatibility check whenever you replace any image with CSS because not all the browsers are able to support these techniques.

About the Author

Author: Shahzad SaeedWebsite: http://shahzadsaeed.com/Email: This email address is being protected from spambots. You need JavaScript enabled to view it.

Shahzaad Saaed has been featured in a large number of authority websites, as a WordPress expert. He specializes in content marketing to help business grow their traffic.