Playground

Squeeze an image.
Watch the bytes move.

Pick a photo or drop your own, then compare the result against the original and see every file Lens would write.

Runs in your browser · nothing uploaded

Pick an image

Or drop your own

Never uploaded. Encoded in this tab.

Format

Quality and size

Quality

Drag it and watch the bytes move.

Sizes

1600 · 1200 · 800 · 400 px wide

Naming

Key template

Prefix

Preview

Loading a sample...

Drag to compare, double-click to centre. Arrow keys nudge the divider; hold shift for bigger steps. Encoded by your browser, not by sharp, so the shape of the curve is the same but the exact bytes are not.

Result

Numbers appear here once the first encode finishes.

The call that produces this

await optimizer.optimize({
  source: './photo.jpg',
  formats: ['webp'],
  quality: 72,
  sizes: [{ width: 1600 }, { width: 1200 }, { width: 800 }, { width: 400 }],
});

The sizes are real. Your browser has an encoder built in, and this uses it. The bytes are measured, not estimated. It is not sharp, though, so treat the numbers as the right shape rather than the exact output of your server.

The keys are exact. Labels, storage keys and the srcset come from @lens-image/core/browser, the same functions the server calls.

Nothing leaves this tab. Images are decoded and encoded locally and thrown away when you close it.