How to adjust and compress large images in batches (and optimize them)

Do you want to know how to adjust and compress large images in batches without losing quality? You are on the right page. Let’s see how to save time while optimizing photos and improving website performance.

Image compression is the process of reducing the weight of the image by reducing the size of the image without affecting the quality too much. In this article, you will understand why adjusting the size of the image and the compression image is very important, and how to complete it easily without losing the quality.

Let’s sneak in!

Why do you need to compress large images into smaller sizes

One of the biggest trends of web design currently has large and beautiful images on your website. But when it comes to network performance, these large images are usually the culprit to slow down the speed of the website. If the implementation is incorrect, these images may contain larger files, resulting in higher HTTP requests for the browser.

The following are some benefits that can be obtained when compressed photos:

] According to Google,

compressed images will increase speed

    , thereby bringing the best user experience. Google PageSpeed \u200b\u200bInsights recommends correcting the image size (especially for mobile devices) and delayed screen images (delay loading through application). If you want to shorten the load time, use webp and other formats.

  • Picture recommendation (excerpt) from lighthouse (Excerpt) – Source: PSI
  • Pass the pass Adjust the image size and compressed image,

You can reduce the page size and improve the performance indicators defined by Google

    , including Core Web Vitals. Optimizing your image also means reducing the time (interactive time index) that visitors must wait before interacting with your website and improve the speed of perception (first content drawing and maximum content drawing indicators).

Small image file size uses less bandwidth -your network and browser will definitely like this! Optimized images can usually bring the largest byte savings and performance improvements to your website:

The less bytes that the browser must , the less bandwidth competition -this means that the loading time is faster.

HTTP requests for large high -definition images also have a negative impact on performance. This is why you should reduce HTTP requests to speed up the speed of WordPress website.

Compressed image is necessary to improve performance, but on the other hand, you don’t want the image of the website to blur, right? The goal is to achieve the result of balance quality and optimization, as shown in the following example:

No compression

jpeg – 400 kb

(unchanged)

123]

Compression jpeg – 170 kb

This will bring us to the next part: how to not lose and sacrifice quality Reduce the image size?

How to adjust and compress images in batches (PNG and JPEG) 格式与文件大小 - 来源:Selesti.com The two main matters to be considered are the compression types (damage and non -damage) and file formats you want to use (PNG, JPEG , PDF, etc.). You can see how the format affects the image size:

Format and file size -Source: Selesti.com

In order to make full use of your PNG and JPEG images, there are many available tools. Some will help you complete all these tasks on behalf of yourself (such as: WordPress plug -in), and others can allow you to perform your own optimization (such as: Photoshop). This is our favorite tool list that can be used to compress JPEG or PNG images in batches. We divided them into two categories:

Category#1 -Image optimization web tools and and Software, used to optimize large PNG and JPEG images in batches

Category#2 -WordPress plug -in for batch adjustments and compress large PNG and JPEG images

Let us start from the first category.

Category #1 -Image optimization web tools and software, for batch optimization of large -scalePNG and JPEG images

    This is a candidate list that we can use to adjust and reduce multiple large images and online tools:

  • Affinity photo [ [ 123]
  • Batch compress your PNG and JPEG images.

  1. Turn to File \u0026 GT; New batch processing operation
创建批处理作业 - 来源:How.to YouTube 频道 [123 ] Create batch process -Source: How to use YouTube channel

2. Upload all pictures that need to be compressed in batches, choose the most suitable format as needed:

保存批处理作业 - 来源:How.to YouTube 频道

]

Save batch processing operation -Source: How to use YouTube channel 3. Define new quality (70 is a good number to maintain good quality for good quality )

压缩和缩小图像(质量为 70)
  • Compressed and narrowed images (Quality is 70)

Preview

    (on MAC) – Batch adjustment image size (

  1. but will not compress them
  2. ) Essence

  3. Use preview to open all images
  4. All select

Turn to tool \u0026 gt; size and select the new image size [ 123] 预览软件

Preview Software

    The task is completed! As a result, the size is smaller.

  • Mass Image Compressor

The fool -type image compressor and converter tool for website optimization.

海量图像压缩器设置
Massive image compressor settings
  • gimp – [ 123] Free popular image editors suitable for Mac and Windows. GIMP has a so -called batch processing mode that allows you to graph in PNG, JPEG and other formats (such as GIF or PDF)Image processing. You need to and install a free extension called \”Batch Image Processing Plugin (BIMP)\”. These steps are very simple.
Batch image processing-Source: Windows Club
    Photoshop

  • -The adjustment and compression PNG and JPEG images (it affects quality and is relatively expensive). Open Adob \u200b\u200bE Photoshop, select
      file \u0026 gt; script \u0026 gt; image processor

    1. Click
    2. Select the folder of the image

    3. adjustment settings to reduce the size
    4. Select the settings between 1 to 12 in the \”Quality\” field (I recommend not to be less than 6).

    5. Click \”Operation\”

    Note: Photoshop may be a steep learning curve, so if you are interested, we list the 10 of Photoshop 10 Optimization of image image optimization.

If you want to save time, you don’t need to handle all formats and compression manually. Fortunately, Some plugins will automatically complete some of them for you!

This brings us to the second category: WordPress plug -in.

Category#2 -WordPress plug -in for batch adjustment and compressing large PNG and JPEG images

You can use one of the following WordPress plug -in to compress large images in batches, namely:

  • ]

  • Imagination (our free plug -in)
  • Youpin
  • Compressed JPEG and PNG (small PNG)
  • Wanwei.com
  • Short pixel [123

]

Resmush.it

What WordPress plug -in is best for your project? We have completed a heavy work for you and compare the best image compression plug -in (using real cases).

They all provide batch optimization, and most of them also follow GooglE’s suggestion converts your image to a webp format. For our case studies, we will use Imagify and focus on the steps that need to be complied with optimizing large images.

How to use imagify to compress large images without loss of loss Use Imagify, you can adjust the size and compression in batches without leaving WordPress. Let’s take a look at Imagify’s instrument board so that you can get the appearance of batch optimization functions from

media \u0026 gt; batches

menu:

批量优化功能 - 来源:Imagify

] Batch optimization function-Source: Imagify

After activating the Imagify plug-in, just select the compression level of “激进”压缩级别和批量优化按钮 - Imagify and click \”123 123 ] Imagif \u0026#39; Em All \”\” \”.

The \”radical\” level of compression and batches of optimization buttons – Imagify This is what you are using The type savings that can be obtained when imagified batch optimization functions: almost 87%!

Use imagify to save nearly 87% of the file size

Now let us make a \”front and back\” Display so that you can understand why you should use imagify optimized images.

Batch compression large image: display

  • I will be on the mobile device for me Two batch optimization schemes run by images:
  • Scenario 1 -JPEG image performance results (without IMAGIFY)

Scenario 2 -Use webp image and active optimization mode (use Imagify))的批量图像优化结果

以下是我将考虑的工具和指标:

工具:

Google PageSpeed \u200b\u200bInsights 和WebPageTest[ 123]

Indicators:

  • The file size of each photo
  • The largest content paint
  • page size
  • http request

Load load Time

    Scenario 1 -The performance results of the image of JPEG image (without IMAGIFY)

  1. 9 images provided in JPEG format

Image is not optimized [123 123 ]

[ 123] 3.6 seconds (orange)

page size

1.4 MB

http request

Loading time

byte (image accounting for 82% of space)

Mobile indicators No imagination
Maximum coating (LCP)
28 (60% of the request comes from the image)
3.7 seconds

Here ]

Image problem -PSI review

The content segment of my page below. The image is responsible for issuing 60% requests and the total number of 81.5%:

图像问题 - PSI 审核
The space occupied by the picture (without iMagify) -source: webpage page page Test

Scenario 2 -Batch image optimization results using webp images and active optimization mode (using Imagify) Webp format

Use imagify batch optimization image 图片占用的空间(没有 Imagify) - 来源:网页测试 Let us optimize our images in batches and use imagIfy converts them to webp:

    Automatically optimize large images in my library -Source: Imagify

  • After a few clicks,

Imagify saves 55%of our file size:

[
[

[

[

123] File size (before imagify)

203 kb

127 kb

Picture#4

picture#5

122 kb

74 kb68%

185 kb

Picture#7

123 Kb

75 kb68%

Picture#8

110 kb50%

Picture#9

279 kb

148 kb46%

Our performance indicators also处于更好的状态

File size (before the Imagify) saved Picture#1 205 kb 88 kb62%
60%
Picture#3 96 kb 73 kb32%
200 kb 94 kb49%
123] Picture#6
95 kb48%
220 kb
]

[123 ] The indicator of the mobile terminal

No imagination Use imagination

Maximum coating (LCP)

1.6 (green)

(43% of the request comes from the image)

] Byte (image occupying 82% of space)

byte (image occupies up to 26% of the space)

[ 123]

图像通过了Imagify 审核

Due to the batch optimization function of imagify, we can only see positive results:

All my images have been compressed: their size is smaller, they are smaller, and they are smaller, and they are smaller, and they are smaller, and their size is smaller, and the size of them is smaller, and the size of them is smaller, and the size of them is smaller, and the size of them is smaller, and the size of them is smaller, and the size of them is smaller, and the size of them is smaller, and the size of them is smaller, and the size of them is smaller, and the size of them is smaller, and the size of them is smaller. We did not sacrifice the quality.

3.6 seconds (orange) [ 123] Page size 1.4 mb 847 kb
http request 28 (60% of the request comes from the image) 16
Load time 3.7 seconds 2.1 second
Imagify 还解决了PageSpeed \u200b\u200bInsights 标记的性能问题
[123 ]

My Core Web Vital (LCP) is orange, scored 3.6 seconds, but when using Imagify, it moves to the green area in 1.6 seconds.

My page loading time dropped from 3.7 seconds to 2.1 seconds. Only 43% of the request now comes from the image (60% when there is no imagify).

The picture accounts for 26.5%of the entire byte content (82%before). 图像通过了 Imagify 审核

Use imagify to reduce file size-Source: web test

Wrap [ 123]

    Imagify plug -in allows us to quickly adjust the size from the WordPress instrument board and compress large images in batches. We only need to click twice to automatically optimize all images, saving an average of 60% of the file size! In addition, Imagify can convert your WordPress image into a webp, which is Google recommendedThe next generation format.

  • Do not let the slow website performance affect your transformation.Start with ImagiFy batch optimization of your images for free!

Author:

Leave a Reply

Your email address will not be published. Required fields are marked *