Comparing different efforts with WebP in Sharp

By admin
When you, in a

Node
ORG

program, use sharp to convert an image buffer to a WebP buffer, you have an option of effort. The higher the number the longer it takes but the image it produces is smaller on disk.

I wanted to put some realistic numbers for this, so I wrote a benchmark, run on my

Intel
ORG


MacbookPro
ORG

.

The benchmark

It looks like this:

async function e6 ( ) { return await f ( "screenshot-1000.png" ,

6
CARDINAL

); } async function e5 ( ) { return await f ( "screenshot-1000.png" ,

5
CARDINAL

); } async function e4 ( ) { return await f ( "screenshot-1000.png" ,

4
CARDINAL

); } async function e3 ( ) { return await f ( "screenshot-1000.png" ,

3
CARDINAL

); } async function e2 ( ) { return await f ( "screenshot-1000.png" ,

2
CARDINAL

); } async function e1 ( ) { return await f ( "screenshot-1000.png" ,

1
CARDINAL

); } async function e0 ( ) { return await f ( "screenshot-1000.png" ,

0
CARDINAL

); } async function f ( fp, effort ) { const originalBuffer = await fs. readFile (fp); const image = sharp (originalBuffer); const { width } = await image. metadata (); const buffer = await image. webp ({ effort }). toBuffer (); return [buffer. length , width, { effort }]; }

Then, I ran each function in serial and measured how long it took. Then, do that whole thing

15
CARDINAL

times. So, in total, each function is executed

15
CARDINAL

times. The numbers are collected and the median (P50) is reported.

A

2000×2000
CARDINAL

pixel PNG image


1
CARDINAL

. e0: 191ms 235KB 2. e1:

340.5ms 208
QUANTITY

KB 3. e2: 369ms

198
CARDINAL

KB 4. e3:

485.5ms 193
QUANTITY

KB 5. e4: 587ms

177
CARDINAL

KB 6. e5: 695.5ms

177
CARDINAL

KB 7. e6:

4811.5ms 142KB
QUANTITY

What it means is that if you use {effort:

6
CARDINAL

} the conversion of a

2000×2000
CARDINAL

PNG took

4.8 seconds
TIME

but the resulting WebP buffer became

142
CARDINAL

KB instead of the least effort which made it

235 KB
QUANTITY

.

This graph demonstrates how the (blue) time goes up the more effort you put in. And how the final size (red) goes down the more effort you put in.

A

1000×1000
CARDINAL

pixel PNG image


1
CARDINAL

. e0: 54ms

70
CARDINAL

KB 2. e1:

60ms 66
QUANTITY

KB 3. e2: 65ms 61KB 4. e3: 96ms

59
CARDINAL

KB 5. e4:

169ms
ORG

53KB 6. e5:

193ms
PERSON

53KB 7. e6: 1466ms 51KB

A

500×500
CARDINAL

pixel PNG image


1
CARDINAL

. e0: 24ms

23
CARDINAL

KB 2. e1:

26ms 21
QUANTITY

KB 3. e2:

28ms 20
QUANTITY

KB 4. e3: 37ms

19
CARDINAL

KB 5. e4:

57ms
DATE

18KB 6. e5: 66ms 18KB 7. e6: 556ms

18
CARDINAL

KB

Conclusion

Up to you but clearly, {effort:

6
CARDINAL

} is to be avoided if you’re worried about it taking a huge amount of time to make the conversion.

Perhaps the takeaway is; that if you run these operations in the build step such that you don’t have to ever do it again, it’s worth the maximum effort. Beyond that, find a sweet spot for your particular environment and challenge.