png type images become larger after resizing, handle png image

[hisuzhiyong]

Currently on AWS, for scenarios such as avatars and thumbnails, the integration of CloudFront + Lambda@Edge + Sharp library is often used to achieve custom image cropping functionality, which is also one of the methods we commonly recommend.
https://awslabs.github.io/aws-cloudfront-extensions/en/extension-repository/resize-image/

Recently, after testing, it was found that when images in PNG format are resized using Sharp, the image file size increases. With large images, if resized into smaller images, this issue is not noticeable, but it is still much larger than the conversion results of JPEG, WebP, and other formats. On the other hand, with smaller PNG images, when resized to a smaller dimension, the file size actually increases, which has caused confusion among customers.

Use Case

For customers using CDNs, the difference in image sizes under a massive amount of requests can greatly affect user experience as well as the cost of the customer's CDN.
In order to provide a better customer experience and address this important issue that may not be easily discovered, I have raised this issue hoping it can be helpful.

Proposed Solution

It is unrealistic to ask customers not to use PNG images. This situation can be improved by adding PNG parameter processing.

This is my code to handle png images:
if (imageFormat == "png") {
Sharp(data.Body)
.resize(width, height, {
fit: FIT_TYPE,
})
// To avoid image become larger, add png configs
// docs: https://sharp.pixelplumbing.com/api-output#png
.png({
palette: true,
// compressionLevel: 9,
quality: 80,
colors: 256,
})
.toBuffer()
}
} else {
Sharp(data.Body)
.resize(width, height, {
fit: FIT_TYPE,
})
.toBuffer()
}
}

Other

Test environment:

1. For me, Due to the lack of CDN environment, I save the image locally.
2. AWS SDK ":" ^ 2.1674.0 "," Sharp ":" ^ 0.33.4 "; Nodejs: v21
3. other user's question:
   3.1 https://sharp.pixelplumbing.com/api-output#png
   3.2 PNG image larger after processing (was: How to optimize image?) lovell/sharp#1110
   3.3 https://stackoverflow.com/questions/65106726/node-sharp-resizing-thumbnails-produces-much-larger-images-than-expected
4. For my customer, they use CloudFront+Lambda@edge+Sharp, they has a test of big image resize to small one, but get a larger image. But I don't record the test result.

test001.png, test003.png (300x300), converted to 300x300, become larger
test002.png (600x480), resize to 300x300, become larger.
newyork.png (200x200), bigpic007.png (1920x1080), using png config will get a small result than origin config.

ls -lsh images|grep newyork
168 -rw-r--r-- 1 user001 staff 80K Sep 3 02:38 newyork.png
472 -rw-r--r-- 1 user001 staff 235K Sep 3 02:40 newyork_v1_300x300.png
40 -rw-r--r-- 1 user001 staff 18K Sep 3 02:40 newyork_v1_80x80.png
152 -rw-r--r-- 1 user001 staff 73K Sep 3 02:39 newyork_v2_300x300.png
24 -rw-r--r-- 1 user001 staff 11K Sep 3 02:39 newyork_v2_80x80.png

ls -lsh images |grep test001
240 -rw-r--r-- 1 user001 staff 119K Sep 3 09:49 test001.png
392 -rw-r--r-- 1 user001 staff 156K Sep 3 09:55 test001_v1_300x300.png
104 -rw-r--r-- 1 user001 staff 51K Sep 3 09:55 test001_v2_300x300.png

ls -lsh images |grep test003
200 -rw-r--r-- 1 user001 staff 98K Sep 3 10:47 test003.png
264 -rw-r--r-- 1 user001 staff 130K Sep 3 10:47 test003_v1_300x300.png
80 -rw-r--r-- 1 user001 staff 40K Sep 3 10:47 test003_v2_300x300.png

ls -lsh images |grep test002
1104 -rw-r--r-- 1 user001 staff 550K Sep 3 10:11 test002.png
488 -rw-r--r-- 1 user001 staff 242K Sep 3 10:14 test002_v1_300x300.png
112 -rw-r--r-- 1 user001 staff 55K Sep 3 10:52 test002_v2_300x300.png

ls -lsh images|grep bigpic007
5432 -rw-r--r--@ 1 user001 staff 2.6M Aug 15 09:25 bigpic007.png
248 -rw-r--r-- 1 user001 staff 120K Sep 3 00:43 bigpic007_v1_300x300.png
72 -rw-r--r-- 1 user001 staff 35K Sep 3 01:18 bigpic007_v2_300x300.png

• 👋 I may be able to implement this feature request

---

This is a 🚀 Feature Request