Looking for an efficient way to convert your images to WebP and…
Do you want to know how to resize and compress large images in bulk, and without losing quality? You’re on the right page. Let’s see how you can save time while optimizing your photos and increasing the performance of your website.
Image compression is the process of reducing the weight of an image by decreasing its size without compromising the quality too much. In this article, you will learn why it’s crucial to resize and compress images and how to do it easily without losing quality.
Let’s dive in!
Why Compress Large Images to Smaller Size
One of the biggest trends in web design right now is to have large and beautiful images on your website. But when it comes to web performance, these large images are often the main culprit for slowing down your site. If implemented incorrectly, these images are likely to have a large size file resulting in higher HTTP requests for your browser.
Here are a few benefits you can get when you compress large photos:
- Compressed images will increase speed, resulting in an optimal user experience, according to Google. Google PageSpeed Insights recommends properly sizing images (especially for mobile), deferring offscreen images (by applying lazy loading), and using a next-gen format like WebP if you want to improve load time.
- By resizing and compressing the images, you can reduce the page size and increase the performance metrics defined by Google, including the Core Web Vitals. Optimizing your images also means a reduction in the time the visitors have to wait before interacting with your website (Time To Interactive metric) and an improved perceived speed (First Contentful Paint and Largest Contentful Paint metrics).
- Smaller image file sizes use less bandwidth – your networks and browsers will certainly appreciate this! Optimizing images can often yield some of the largest byte savings and performance improvements for your website: the fewer bytes a browser has to download, the less competition on bandwidth – meaning a faster loading time.
- HTTP requests for large HD images can also negatively affect performance and that’s why you should make fewer HTTP requests to speed up your WordPress site.
Compressing images are necessary to boost performance but on the other hand, you don’t want blurry images for your website, right? The goal is to achieve a result that balances quality and optimization like in our example below:
No compression JPEG – 400 KB | Compression (quality unchanged) JPEG – 170 KB |
That takes us to the next part: how do you reduce image size without losing and sacrificing quality?
How To Resize and Compress Images in Bulk (PNG and JPEG)
The two primary things to consider are the type of compression you want to use (lossy vs lossless) and the file format (PNG, JPEG, PDFs, etc.). You can see below how formats can affect the image size:
In order to get the most out of your PNG and JPEG images, there are many tools available. Some will help you do all this work on behalf of yourself (e.g: a WordPress plugin) while others can let you perform your own optimizations (e.g: Photoshop).
Here’s our list of favorite tools you can use to highly compress JPEG or PNG images in bulk. We have classified them into two categories:
Let’s start with the first category.
Category #1 – Image Optimization Web Tools and Software to Optimize Large PNG and JPEG Images in Bulk
Here’s our shortlist of software and online tools you can use to resize and compress multiple large images:
- Affinity Photo to batch compress your PNG and JPEG images.
- Go to File > New Batch Job
2. Upload all the pictures you want to compress in Bulk and select the most suitable format according to your needs:
3. Define the new quality (70 is a good number to keep a good quality)
- Preview (on Mac) – to resize your images in bulk (but it does not compress them).
- Open all the images using Preview
- Select them all
- Go to Tools > Size and select new image dimensions
Job done! The resulting size is smaller.
- Mass Image Compressor – a point-and-shoot batch image compressor and converter tool for website optimization.
- Gimp – the free popular image editor for Mac and Windows. GIMP comes with a so-called batch mode that allows you to do image processing of PNG, JPEG, and other formats like GIF or PDF. You will need to download and install a free extension called “Batch Image Manipulation Plugin (BIMP). The steps are then really straightforward.
- Photoshop – to resize and compress your PNG and JPEG images (it affects the quality and is relatively expensive).
- Open Adobe Photoshop, select File > Scripts > Image Processor
- Click Select Folder so you can choose the folder where the images are located
- Adjust the settings to reduce the size
- Choose a setting between 1 and 12 in the Quality field (I suggest not going below 6).
- Click “Run Action”
Note: Photoshop can be a steep learning curve so if you are interested, we have listed 10 alternatives to Photoshop for image optimization.
If you want to save time, there is no need to deal with all formatting and compression by hand. Luckily, some plugins automatically do some of this work for you! That takes us to the second category: the WordPress plugins.
Category #2 – WordPress Plugins to Resize and Compress Large PNG and JPEG Images in Bulk
You can use one of the WordPress plugins below to compress large images in bulk, namely:
- Imagify (our free plugin)
- Optimole
- Compress JPEG & PNG (Tiny PNG)
- EWWW
- ShortPixel
- reSmush.it
Want to know which WordPress plugins are best for your project? We did the heavy lifting for you and compared the best image compression plugins (using a real-case scenario). |
They all offer bulk optimization, and most of them also convert your images to the WebP format as Google recommends. For our case study, we will use Imagify and highlight the steps you need to follow to optimize your large images.
How To Compress Large Images Without Losing Quality With Imagify
With Imagify, you can resize and compress in bulk without ever leaving WordPress. Let’s take a look at Imagify’s dashboard so you can get the look-and-feel of the Bulk Optimization feature from the Media > Bulk Optimization menu:
After activating the Imagify plugin, simply click on the “IMAGIF’EM ALL” button. Imagify will automatically optimize your images thanks to Smart Compression.
Let’s now conduct a “before and after” showcase so you can see why you should optimize your images with Imagify.
Compressing Large Images in Bulk: A Showcase
I’ll run two scenarios of bulk optimization for my images on mobile.:
- Scenario 1 – Performance Results With JPEG Images (no Imagify)
- Scenario 2 – Bulk Image Optimization Results With WebP Images and Aggressive Optimization Mode (With Imagify)
Here are the tools and metrics I’ll take into account:
Tools:
Google PageSpeed Insights and WebPageTest
Metrics:
- File Size of each photo
- Largest Contentful Paint
- Page Size
- HTTP Requests
- Load Time
Scenario 1 – Performance Results With JPEG Images (no Imagify)
- 9 images served in the JPEG format
- Images are not optimized
Metrics on Mobile | Without Imagify |
Largest Contentful Paint (LCP) | 3.6 s (in orange) |
Page Size | 1.4 MB |
HTTP Requests | 28 (60% of the requests are from the images) |
Load Time | 3.7 s Bytes (Images takes up to 82% of space) |
Here are the image optimization flags I got after running the PageSpeed Insights audit:
Below there is the content breakdown of my page. Images are responsible for making 60% of the requests and 81.5% of the total bytes:
Scenario 2 – Bulk Image Optimization Results With WebP Images and Aggressive Optimization Mode (With Imagify)
- The same 9 images converted to the WebP format with Imagify
- Bulk optimized images with Imagify
Let’s bulk optimize our images and convert them to WebP using Imagify.
Right after a couple of clicks, Imagify saved, on average, 55% of our file size:
File size (before Imagify) | File size (before Imagify)% of savings | |
Image #1 | 205 KB | 88 KB62% |
Image #2 | 203 KB | 127 KB 60% |
Image #3 | 96 KB | 73 KB32% |
Image #4 | 200 KB | 94 KB49% |
Image #5 | 122 KB | 74 KB68% |
Image #6 | 185 KB | 95 KB48% |
Image #7 | 123 KB | 75 KB68% |
Image #8 | 220 KB | 110 KB50% |
Image #9 | 279 KB | 148 KB46% |
Our performance metrics are also in better shape:
Metrics on mobile | Without Imagify | With Imagify |
Largest Contentful Paint (LCP) | 3.6 s (In orange) | 1.6 (In green) |
Page Size | 1.4 MB | 847 KB |
HTTP Requests | 28 (60% of the requests are from the images) | 16 (43% of the requests are from the images) |
Load Time | 3.7 s Bytes (Images takes up to 82% of space) | 2.1 s Bytes (Images takes up to 26% of space) |
Imagify also solved the performance issues flagged by PageSpeed Insights:
We can see only positive results thanks to the bulk optimization feature of Imagify:
- All my images are compressed: they have a smaller size and we did not compromise quality.
- My Core Web Vital (LCP) was in orange with a 3.6 s score, but with Imagify it moved to the green zone with 1.6 s.
- The loading time of my page went down from 3.7 s to 2.1 s.
- Only 43% of the requests are now coming from images (it was 60% without Imagify).
- Images occupy 26.5% of the whole bytes content (against 82% before).
Wrapping Up
Imagify plugin allowed us to quickly resize and compress large images in bulk directly from the WordPress dashboard. It took us two clicks to optimize all our images automatically, and it saved on average 60% of our file size! In addition, Imagify can convert your WordPress images to WebP, the next-gen format recommended by Google.
Don’t let slow site performance cost you conversions. Start bulk optimizing your images with Imagify for free today!
Ive used a imagify a few times, very good plugin