January 19, 2022

How to Resize and Compress Large Images in Bulk (and Optimize Them)

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. 
Image recommendations from Lighthouse (extract) – Source: PSI
  • 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. 

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: 

Format vs file size - Source: Selesti.com
Format vs file size – Source: Selesti.com

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.
  1. Go to File > New Batch Job 
Creating the Batch Job - Source: How.to YouTube Channel
Creating the Batch Job – Source: How to YouTube Channel

2. Upload all the pictures you want to compress in Bulk and select the most suitable format according to your needs:

Saving the Batch Job - Source: How.to YouTube Channel
Saving the Batch Job – Source: How to YouTube Channel

3. Define the new quality (70 is a good number to keep a good quality)

Compressing and reducing images (quality at 70)
Compressing and reducing images (quality at 70)
  • Preview (on Mac) – to resize your images in bulk (but it does not compress them).
  1. Open all the images using Preview 
  2. Select them all 
  3. Go to Tools > Size and select new image dimensions
Preview Software
Preview Software

Job done! The resulting size is smaller. 

  • Mass Image Compressor a point-and-shoot batch image compressor and converter tool for website optimization.
Mass Image Compressor Settings
Mass Image Compressor Settings
  • 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.
Batch image manipulation – Source: The Windows Club
  • Photoshop – to resize and compress your PNG and JPEG images (it affects the quality and is relatively expensive).
    1. Open Adobe Photoshop, select File > Scripts > Image Processor
    2. Click Select Folder so you can choose the folder where the images are located
    3. Adjust the settings to reduce the size 
    4. Choose a setting between 1 and 12 in the Quality field (I suggest not going below 6).
    5. 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: 

Bulk Optimization Feature - Source: Imagify
Bulk Optimization Feature – Source: Imagify

After activating the Imagify plugin, simply choose your level of compression and click on the “IMAGIF’EM ALL” button.  

“Aggressive” level of compression and the bulk optimization button - Imagify
“Aggressive” level of compression and the bulk optimization button – Imagify

That’s the type of savings you can get while using the bulk optimization feature of Imagify: almost 87%!

Saving almost 87% of my file size with Imagify

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.:

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)

  1. 9 images served in the JPEG format
  2. Images are not optimized 
My test site

Metrics on MobileWithout Imagify
Largest Contentful Paint (LCP)3.6 s (in orange)
Page Size1.4 MB
HTTP Requests28 (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:

Image issues - PSI audit
Image issues – PSI 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: 

Space occupied by images (no Imagify) - Source: WebPage Test
Space occupied by images (no Imagify) – Source: WebPage Test

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:

Large images being automatically optimized in my library – Source: 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 #1205 KB88 KB62%
Image #2203 KB127 KB
60%
Image #396 KB73 KB32%
Image #4200 KB94 KB49%
Image #5122 KB74 KB68%
Image #6185 KB95 KB48%
Image #7123 KB75 KB68%
Image #8220 KB110 KB50%
Image #9279 KB148 KB46%

Our performance metrics are also in better shape:

Metrics on mobileWithout ImagifyWith Imagify
Largest Contentful Paint (LCP)3.6 s (In orange)1.6 (In green)
Page Size1.4 MB847 KB
HTTP Requests28 (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:

Image passed audits with Imagify
Image passed audits with Imagify

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).
Reduced file size with Imagify- Source: WebPage Test
Reduced file size with Imagify- Source: WebPage Test

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!

Imagify, decrease the size of your images, increase the speed of your website: try it for free
Comments 0
Add Comment

Ready to optimize
your image?
Sign up for free in few seconds