Table of Contents
Last update on
Images are a crucial element of every website: they make posts and pages more interesting and appealing to read, but they can quickly become a burden for your page speed. Google is always wary and ready to judge your moves when it comes to web performance, and you don’t want to disappoint it, right?
That’s why we’re here to provide you with all the insights about image optimization for WordPress!
You’re going to learn everything about how to resize and compress your images, maintain their quality and how to choose the best free online image optimizers. We’ll dig even deeper recommending a very useful WordPress image optimization plugin, Imagify, and how you can benefit from the jquery lazy load script.
Ready to start the ball rolling? Let’s go!
Dealing with Large Images: What You Need to Know
Recent data from Google show that the average weight of web pages is increasing every year: they found that 79% of analyzed pages were over 1MB, 53% over 2MB and 23% over 4MB.
This data is also backed up by our experience with WP Rocket customers: among the hundreds of websites our support team sees and works on every month, one of the most common problems are related to heavy pages, which sometimes come packed with high-resolution pictures, photo widgets, and hefty image sliders.
Image optimization is one of the fundamental steps of WPO (Web Performance Optimization): you can’t skip it, so better be ready to learn how to make the most of it! Optimizing images is also a key point for improving the Largest Contentful Paint score, one of the Core Web Vitals metrics.
The good news is that mastering the art of optimizing images for the web can be a real game-changer for your web performance.
How to Reduce Image File Size?
Before starting to reduce the size of an image file, you should have a clear understanding of how images dimensions (height and width) are measured, and how this determines their file size.
Dimensions and file size are strictly related.
The article about how to reduce image file size explains what image resizing is and how to determine the right size of your images, depending on the page you have to upload them to.
We’ll also give handy tips about image file formats (jpeg, png, gif) and which are the most popular resizing tools.
At the end of this article, you’ll learn how to make your images lighter and reduce their burden on your pages.
How to Compress Images for the Web?
Once you get a grip on reducing image size by adapting the file dimensions, you should focus on the next step to decrease the weight of the file: this can be achieved by image compression.
Compressing an image for the web implies some basic knowledge of the different image formats but also of the tools you should use to identify the real size of your files.
There are many tools that will optimize your images: some of them you can download on your PC, like Gimp Save for Web, while others can be directly used online like PicMonkey, Kraken, or Optimizilla, to name a few.
The article When Less iI (Really) More: How to Compress Your Images and Reduce Their File Size, will walk you through the secrets of image compression.
After reading it, you’ll be able to determine the ”right weight” of your images, and you’ll have a complete overview of the tools you can use to compress and reduce image file size.
How to Compress Images Online?
Using professional image optimization tools like Photoshop or Gimp is indeed a very effective way to manage your images and prepare them for the web: but the learning curve of these tools can sometimes be overwhelming.
Most of the time, leaning towards an online image optimization tool is the best and most affordable choice.
You can find out the tips and tricks to easily compress your images through free and premium online image compression tools in our dedicated article.
You’ll learn which are the most popular and effective optimizers (like Kraken, Smush or Imagify), and which are their most exciting features: you’ll gain all the necessary knowledge to find your way through the jungle of the available tools on the web!
When a Plugin Makes Your Life Easier
The cons of most online image optimization tools is that you don’t have full control of your images after they’re optimized. After you download your optimized images, you’ll have to manually sort them on your personal folders.
Moreover, some online tools don’t make clear enough how your images are stored on their servers and for how long: not so cool!
More natural will be to optimize and store your images right inside the Media files of your WordPress site, right?
The good news is that there are plugins that allow you to do so!
The WordPress repository spoils us for choice with image optimization plugins that you can download and activate on your website: image optimization will become an automatic task, and make your life a lot easier 🙂
Lighter Images for a Faster Website with Imagify
Opting for a WordPress plugin instead of an online image optimization tool will save you a lot of time. Once installed, a good optimization plugin usually works autonomously, avoiding manual tweaks. Your images should be optimized upon upload and be always ready for when you decide to add them in a post or a page.
One of the most recent and complete image optimization plugins for WordPress is Imagify: it’s developed by WP Media, the same company behind WP Rocket. So, if you already know and love our caching solution, you won’t be surprised by the same simplicity and usability we also poured into Imagify.
With this tool, all your jpg, png and gif files will always be in perfect shape and ready to be uploaded on your pages!
The article Imagify, the Definitive WordPress Plugin to Compress Your Images will dive into the core features of the plugin, and explains why installing it on your website is the best choice to keep your images files healthy and slim!
Using a Script to Improve the Loading of Images
Compressing and resizing your images are crucial actions to take before uploading your files on your site.
But what happens after optimized images are uploaded? Is there still a margin of improvement in terms of performance?
How can you gain a little more speed and make your pages load faster, even when they have to host several images?
Finding a technique that can save even a few extra milliseconds of waiting for your users, could be key: remember that, when we browse between websites, we all tend to be impatient and almost never perceive the real loading time of the site we’re visiting.
The answer, in this case, is one: apply a lazy load script to your images.
The Lazy-Loading Script
The answer is the lazy-loading script. This is a beneficial technique that defers the loading of images, considered as non-critical resources and leaves them ”off-screen” until the user needs them. If users don’t scroll the page, images placed at the bottom won’t be loaded.
You can see lazy-loading in action on several popular blogs or websites; let’s take for example Unsplash.com: when you scroll their collection of pictures, you’ll see the placeholders getting replaced by the high-res original photo.
In the article Lazy Images for a Faster Website: Why You Should Use Lazy Loading we’ll explain in detail how the lazy loading works and how you can make the most of it.
Applying the Lazy-Loading Through WP Rocket
The lazy-load script can be added programmatically: there are several possible techniques to achieve that if you can tweak with the code. Google Guides for developers, for example, give a good overview of the different methods.
But since you’re using WordPress, a plugin will come to the rescue, allowing you to lazy-load your images without touching the code.
The WordPress repository contains several lazy-loading plugins, and again you’ll have plenty of choices.
However, if you’re already using WP Rocket, we have good news for you: our cache plugin includes the LazyLoad feature, which, once enabled, applies the lazy-loading behavior to your images!
Optimized Images With WP Media Plugins
Since its beginning, WP Media has developed plugins for WordPress following three basic principles: simplicity, usability, and speed.
Our plugins are easy to use, have a clean design and don’t require complex configuration processes: WP Rocket, our premium cache plugin for WordPress, was the first to be launched, and since then has gained thousands of users around the world.
Its caching system has boosted speed for millions of pages on the Internet, and its lazy load script is helping image-rich web pages to load straightforwardly.
You can also find a free stand-alone Lazy Load plugin, which is based on the same script used by WP Rocket.
We launched Imagify in 2016, with the aim to make the Internet a lighter place: Imagify is wholly devoted to image optimization, and it’s been recognized as one of the best optimization tools for images. You can use its web application, download it as a free plugin for WordPress or buy extra quota if you need to optimize many MBs of images.
With our products, we’re striving to make the web a more sustainable place, with faster web pages thanks to caching and optimized images: learn more about WP Rocket and Imagify!
