How To Optimize Images On WordPress For Boosting Your Page Speed

If you’re looking to provide a great user experience to your website visitors, one of the things you’ll need to do is optimize your images, so it doesn’t consume more bandwidth and in turn reduce the page speed.

In fact, images often account for most of the download bytes on a web page, and if you’re using high resolution images it significantly increases the number of pixels and bytes, which can drastically slowdown your page speed. However, it’s totally possible to reduce the image size without losing its quality.

In this post, let’s take a look at a few image optimization methods for your WordPress website. I’ll also list some of the most useful WordPress plugins that help you optimize your images.

Lazy load

If you’re using too many images on your web pages, undoubtedly, they’ll increase loading time significantly. You can always make sure that you don’t use unnecessary images, which is indeed an obvious way to reduce the loading time.

While having many images on your page would increase the loading time, they are often irreplaceable because they provide critical information and visual interest for users. And from an SEO perspective, it can help build backlinks and bring in more organic traffic to your website.

With that said, how would you improve the page speed despite using too many images on your web page? One of the best ways is by using lazy loading images.

Lazy load is a tactic of loading images only when it is visible to your visitors, which ensures not all of the images are loaded at first. This can save significant bandwidth for both you and your visitor.

As a WordPress blogger, all you need to do is to install the Lazy load plugin to your website. This plugin uses jQuery.sonar to load an image only when it’s visible to your visitors. Best of all, it doesn’t require additional configuration and it will work by just installing and activating once.

If you wanted to lazy load your images, below are a few tips to improve the user experience of your website.

• Set a threshold value: While loading images only when they are visible might be a great tactic when it comes to saving bandwidth and boosting page speed, this can create a bit of annoyance for your visitors who usually scroll down to the bottom of the page, as they’ll need to wait a little for loading each image completely. By setting a threshold value of, say, 300, you can load them 300 px before they appear on the viewport.
• Use a default placeholder image: When visitors scroll down too quickly, chances are they’ll see gray blocks in place of images. In order to avoid displaying it, you can substitute it with a placeholder image that blends well with your current theme until the original ones load.

Use the correct image format

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

Having the knowledge of what image format you should be using for your website is critical, especially if you’re customizing or renovating your site. Each format has its own pros and cons and there is no ‘one size fits all’ solution.

Below are a few tips for using the right image formats on your website.

• GIF: GIF images are widely used for low quality images with just a few colors because they are limited to 256 colors. Using GIF images can be a good choice for creating clip art, bullets and charts. While loading it starts out blurry, and when it’s finished downloading it becomes focused and crisp, so your visitors don’t need to wait till the logo is fully downloaded. It shouldn’t be used for complex images with drop shadows.
• JPEG/JPG: These are suitable for complex images with many color variations or if it contains photographic images. It supports 16.7 million colors. By making it responsive, you can have flexible images without heavy loading time.
• PNG: PNG format is best suited for transparent images. One of the biggest differences between a PNG and a JPEG is that a PNG doesn’t lose its information while editing the image.

Make effective use of browser cache

When your visitor first visits your website, various resources of your site like images, CSS and JS files are stored temporarily in their hard drive, so the next time they visit the page, the browser makes it easier to load those files without having to send another HTTP request.

In fact, you can instruct browsers about how the resources on your website should be dealt with and keep your browser files longer than usual. This strategy will ultimately reduce the loading time for your visitors even when they’re returning after a long period.

All you need to do is to add the below code snippet to your .htaccess file.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType text/css “access plus 1 month”
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
ExpiresByType image/x-icon “access plus 1 year”
ExpiresDefault “access plus 2 days”
</IfModule>
## EXPIRES CACHING ##

Code credits

What the above code does is, it instructs the browsers to set different expiration dates for your website files.

Compress images

Many website owners commit a mistake of uploading high resolution images without compressing it even if they require a low resolution.

As high resolution images will have larger file size, it is always better to compress the images while uploading if they’re unnecessarily large.

The question is what WordPress image compression is and how it can reduce the size without affecting the quality.

Image compression is the process of decreasing the images sizes dramatically by algorithmically removing image info that a human eye can’t perceive.

Though image compression is a sure-fire method to reduce the image size, when it comes to compressing JPEG files, sometimes it loses its actual contents of the images during the process, which is the only downside of this approach. So you’ll have to check the post-compression results carefully.

If you’re on WordPress, you can find lots of image optimization plugins that can do wonders to your image intensive WordPress sites. If you are not interested in using a plugin, sites like Compressor.io will do the job for you.

Use CSS instead of images

Clipping images from a Photoshop design might be an easy task, but did you know that replacing images with CSS has many different advantages- like boosting page speed and better performance, etc.?

CSS lets you easily create images such as rounded rectangles, gradients, drop shadows and transparent images. When you’re creating images using CSS, make sure the images are compatible on every popular browser.

If you’re on WordPress, below are the default image CSS classes, which may come handy while writing your next blog post.

• .aligncenter
• .alignleft
• .alignright
• .alignnone

For adding custom CSS to your WordPress theme, you can use either one of the below plugins.

• Custom CSS from Jetpack: If you’re using Jetpack on your WordPress website, you can install the custom CSS module.
• Simple Custom CSS: Simple custom CSS is another lightweight plugin that lets you easily customize your WordPress website without the need to create a child theme.

Author bio: Shahzad Saeed is specialized in blogging and content marketing for startups and small businesses. You can hire him for your next writing project.