@@ -100,14 +100,14 @@ You can clone this repo and run the following command to taste the example below
100100
101101| Optimization | <div style = { { width: ' 80px' }} >Raw</div > | <div style = { { width: ' 80px' }} >Optimized</div > | Raw Size | Optimized Size |
102102| ------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------------------------- | -------- | -------------- |
103- | ` losslessCompressPng() ` <br />** Lossless** | ![ un-optimized.png] ( ../public/ img/un-optimized.png ) | ![ optimized-lossless.png] ( ../public /img/optimized-lossless.png ) | ` 1.2M ` | ` 876K ` |
104- | ` pngQuantize({ maxQuality: 75 }) ` <br />** Lossy** | ![ un-optimized.png] ( ../public/ img/un-optimized.png ) | ![ optimized-lossy.png] ( ../public /img/optimized-lossy.png ) | ` 1.2M ` | ` 228K ` |
105- | ` compressJpeg() ` <br />** Lossless** | ![ un-optimized.jpg] ( ../public/ img/un-optimized.jpg ) | ![ optimized-lossless.jpg] ( ../public /img/optimized-lossless.jpg ) | ` 192K ` | ` 184K ` |
106- | ` compressJpeg(75) ` <br />** Lossy** | ![ un-optimized.jpg] ( ../public/ img/un-optimized.jpg ) | ![ optimized-lossy.jpg] ( ../public /img/optimized-lossy.jpg ) | ` 192K ` | ` 104K ` |
107- | ` new Transformer(PNG).webpLossless() ` <br />** Lossless** | ![ un-optimized.png] ( ../public/ img/un-optimized.png ) | ![ optimized-lossless.webp] ( ../public /img/optimized-lossless.webp ) | ` 1.2M ` | ` 676K ` |
108- | ` new Transformer(PNG).webp(75) ` <br />** Lossy** | ![ un-optimized.png] ( ../public/ img/un-optimized.png ) | ![ optimized-lossy-png.webp] ( ../public /img/optimized-lossy-png.webp ) | ` 1.2M ` | ` 84K ` |
109- | ` Transformer(PNG).avif({ quality: 100 }) ` <br />** Lossless** | ![ un-optimized.png] ( ../public/ img/un-optimized.png ) | ![ optimized-lossless-png.avif] ( ../public /img/optimized-lossless-png.avif ) | ` 1.2M ` | ` 584K ` |
110- | ` new Transformer(PNG).avif({ quality: 75, chromaSubsampling: ChromaSubsampling.Yuv420 }) ` <br />** Lossy** | ![ un-optimized.png] ( ../public/ img/un-optimized.png ) | ![ optimized-lossy-png.avif] ( ../public /img/optimized-lossy-png.avif ) | ` 1.2M ` | ` 112K ` |
103+ | ` losslessCompressPng() ` <br />** Lossless** | ![ un-optimized.png] ( ./ img/un-optimized.png ) | ![ optimized-lossless.png] ( ./img/optimized-lossless.png ) | ` 1.2M ` | ` 876K ` |
104+ | ` pngQuantize({ maxQuality: 75 }) ` <br />** Lossy** | ![ un-optimized.png] ( ./ img/un-optimized.png ) | ![ optimized-lossy.png] ( ./img/optimized-lossy.png ) | ` 1.2M ` | ` 228K ` |
105+ | ` compressJpeg() ` <br />** Lossless** | ![ un-optimized.jpg] ( ./ img/un-optimized.jpg ) | ![ optimized-lossless.jpg] ( ./img/optimized-lossless.jpg ) | ` 192K ` | ` 184K ` |
106+ | ` compressJpeg(75) ` <br />** Lossy** | ![ un-optimized.jpg] ( ./ img/un-optimized.jpg ) | ![ optimized-lossy.jpg] ( ./img/optimized-lossy.jpg ) | ` 192K ` | ` 104K ` |
107+ | ` new Transformer(PNG).webpLossless() ` <br />** Lossless** | ![ un-optimized.png] ( ./ img/un-optimized.png ) | ![ optimized-lossless.webp] ( ./img/optimized-lossless.webp ) | ` 1.2M ` | ` 676K ` |
108+ | ` new Transformer(PNG).webp(75) ` <br />** Lossy** | ![ un-optimized.png] ( ./ img/un-optimized.png ) | ![ optimized-lossy-png.webp] ( ./img/optimized-lossy-png.webp ) | ` 1.2M ` | ` 84K ` |
109+ | ` Transformer(PNG).avif({ quality: 100 }) ` <br />** Lossless** | ![ un-optimized.png] ( ./ img/un-optimized.png ) | ![ optimized-lossless-png.avif] ( ./img/optimized-lossless-png.avif ) | ` 1.2M ` | ` 584K ` |
110+ | ` new Transformer(PNG).avif({ quality: 75, chromaSubsampling: ChromaSubsampling.Yuv420 }) ` <br />** Lossy** | ![ un-optimized.png] ( ./ img/un-optimized.png ) | ![ optimized-lossy-png.avif] ( ./img/optimized-lossy-png.avif ) | ` 1.2M ` | ` 112K ` |
111111
112112``` js filename="example.mjs"
113113import { readFileSync , writeFileSync } from ' fs'
0 commit comments