How to Optimize Images for WordPress Performance

Is your website struggling with page loading times when accessed from mobile devices?

The main reason for a slow website despite too many scripts could also be your images. When images are unoptimized, they load slower and bring an unpleasant experience to the end user.

In some cases, the first image loaded on your website could take up to 3.8 seconds to fully load, blocking the rest of your content from being loaded until then.

But when optimizations are applied properly, you will notice a better user experience and more conversions. That’s because your website is optimized for speed, and will load faster.

Search engines love fast websites and grant them higher rankings. In fact, Page Speed is considered a ranking factor, which means if you improve your website loading times, you can rank above your competitors.

What is image optimization and why does it matter?

Image optimization is a process where images get their size reduced as much as possible, without risking destroying quality. Such process also includes caching, and compressing images, for improved page loading times.

Since 2020 images have become a major factor for websites as a ranking factor, with high demand from searchers.

However, most website owners who include a large proportion of images on their website, do not understand the risks they are bearing.

Whenever a site owner decides to add an image to his website, it will be unoptimized, meaning no compressions, proper dimensions, or even image alternative tags will be applied.

With that in mind, most site owners are not well aware that an unoptimized image could result in at least 17% slower page loading times.

Optimizing your images properly can have significant impacts on your website, and by sacrificing an unnoticeable percentage of your quality, the chances of your website loading faster are extremely high.

How to optimize the images on my website

To make things simple, we have broken down a small list of the biggest factors, affecting your website’s loading times. An easy way to find these issues is to use page speed testing tools.

GTMetrix is a great tool as it has a “waterfall” tab, showing how much time it takes for each element on your website to be loaded.

1. Convert images to next-gen formats

The image format is the biggest issue on each website that can kill the page speed. Since PNG images are providing the greatest quality, most photography, fashion, and other websites intend to use them as a priority format.

PNG images are larger in size and will take a lot of time to be loaded on a website. JPG is the next format preferred by a large proportion of people, as it serves images faster.

However, both formats would be considered as slow, and affect page speed negatively. If you run a PageSpeed Insights report, it will highlight all PNG and JPG images as potential speed killers.

That’s because they take more time to load. A recommendation for image formats would be to use WebP and AVIF formats, as they are smaller in filesize, and are perfectly optimized for the web.

A WebP or AVIF image is the same as PNG or JPG in terms of quality, but due to the low file size, these types of images can drastically speed up your website loading time, with no further optimizations.

For more information regarding the image formats, you can check the Google image optimization guidelines.

2. Setup image caching

Caching is a technique applied by every website owner, who wishes to improve the speed of his website.

As Nginx became a very popular caching module for websites, your caching is handled server-sided and will not slow your website.

When caching is enabled on your website, a static version of your pages with their content will be saved and delivered to your visitors.

This can increase the speed, as visitors will not need to request and download your pages over and over again. The server will directly deliver a static cached version of your website.

The good thing about caching your images and pages is that you can always empty the cache when updates have been on a certain page. A new request for caching will be made, and visitors will receive the pages with their updated content.

3. Compress your images

Image compression is a process applied to images to minimize their file size without losing image quality. This process can help images load faster, by just stripping critical information.

Two different types of image compressions can be applied to an image.

The first is lossy compression, which is a process where you specify how much image quality you wish to be sacrificed for a smaller size. For using lossy compressions you will need a backup of the images, as once applied, it cannot be returned back to normal.

The lossy compression can be used multiple times by adding up more compression to the previous one.

It’s a very critical compressions option and should be used only if images are using fewer colors.

The next image compression option is lossless compression. It’s a compressions type that strips extra information from your website, without removing quality from the image.

It’s a reversible process, as it saves all the stripped information. However, the compression and file size of the image will be bigger.

As a personal recommendation, lossy compression is the best way to optimize images. Sacrificing anywhere between 8-10% of the image quality will not affect the user experience, or make the image any different. You will only shave off some bites, and preserve space for more images.

4. Resize your images

The biggest problem and page killer is the image dimensions. When web designers are creating websites, they add huge images and do not resize them afterward.

Even though WordPress has dimension restrictions, the full size of the image is still being loaded, which results in a bigger size, and slow loading times.

A good practice for optimizing your images would be to check what dimensions your website uses to load the page.

To find out the actual dimensions you need to apply, right-click on an image and select inspect element. The intrinsic size of the image is the width and height of the original image.

What we need to measure is the rendered image size.

Once images are resized to their rendered width and height, the web speed will be improved, and images will receive a huge optimization.

5. Host images on your website

Even though it’s a rare case to be seen, some websites are hosting their images on other websites. This process creates more requests and prevents optimizations to be applied to the images.

Each image has to be stored on the website itself and not requested from an external one.

If the space of your server is limited, upgrading your plan can be the best strategy, otherwise, you are risking generating more requests.

However, it’s different for videos. It’s a good practice to load videos externally, as they cannot be optimized, but can be replaced with an image before requesting to play a video.

6. Lazy loading images

Lazy loading (on-demand loading) is an optimization process that will not request or download an image, except if explicitly asked by the browser.

Lazy loaded images are the ones that are not loaded on the website but are left to be executed on the user’s scroll.

This process improves page speed and also optimizes all images that cannot be seen without scrolling to see the contents below.

Since browsers download the whole page on request, this can take up some time to load the website fully. Once lazy loading is included for the images that cannot be seen, pages load their HTML/CSS faster.

A good practice for lazy loading without experiencing issues on your website would be to lazy load all images that cannot be seen without scrolling.

Lazy loading of the images that are seen when accessing a page without scrolling can decrease page performance and result in errors.

7. Deliver images from a CDN

Image CDNs specialize in the optimization, and delivery of images, which can potentially speed up your website. No matter what CDN you are using, your images will be taken from your website and cached, so they will not need time to get loaded.

A CDN will optimize and display all images on your website, whenever a user visits. These images are loaded with a lower priority, so the important parts of your website are loaded first.

The best part of the CDNs is that they deliver the content from the data center, which is nearest to the user’s location. This technique speeds up the image loading times and makes the user experience even better.

Cloudflare is a great option for starters who don’t have money to spare for image optimizations. Another alternative would be QuicCloud CDN, as it optimizes images, and delivers them rapidly.

However, to use the QuicCloud CDN you will need to have a LiteSpeed server hosting provider.

Conclusion

Image optimization is one of the easiest and most efficient processes, for optimizing the speed of a website. It brings noticeable results, requiring small adjustments and no loss in quality.