Compression Quality Slider

ProNew

A quality slider (JPEG or WebP) with the resulting file size and a before-and-after preview that follow it, a warning when the picture gets visibly worse, and the chosen file handed over when you are happy. Use this when people tune size against quality themselves.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

delay250

Guide and examples

When to use it

People prepare images for the web or email and want to see the trade-off.

Do not use it when: For automatic optimisation without choices, use the resize pattern or do it on the server.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`encode`	`(file, quality) => Promise<Blob>`	canvas JPEG	Replace for WebP, AVIF or a worker.
`delay`	`number`	`250`	Milliseconds after the slider stops before encoding.
`onDone`	`(file: File) => void`	-	The compressed file.

encodeAtQuality(file, quality, type?) is exported.

Accessibility

The slider is a native range input with a visible label that includes its value, and aria-valuetext ("80 percent"). Re-encoding waits until the slider stops, so a screen reader is not flooded.
Both images have alt text and a caption with the size in text; the result line (savings, no gain, low-quality warning, failure) is a polite status.
"Use this version" is disabled while encoding.

Testing

The pattern ships with a Testing Library test (image-compress-with-slider.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.