shadcn.io is not affiliated with official shadcn/ui
Compress Optimize File Upload Block for React
A target-size solver: set a size in megabytes and six images show the quality each would need, the estimated result with before and after bars, a Cannot reach note for lossless PNG, and the total saved.
Installation
Overview
Work out how hard to compress a batch before you run a compressor, with this image optimisation panel for React with Base UI. It is the planner of Leanpix, for a shop catalogue. A "Compress each to under" Number Input sets the target in megabytes, and six typed images with real byte sizes are checked against a typed size-for-quality curve for their format. Each row shows the highest quality that gets it under the target, the estimated result and two bars, before and after on one scale; where quality does nothing, such as a lossless PNG, it says "Cannot reach: lossless PNG" instead. A total line shows before, after and what is saved. Add images lists your files by name and size and works them out the same way. The rows scroll inside a held region, so the panel never changes height, and on a phone each row keeps just the name and the result. For shops, galleries and any upload with a size budget.
FAQ
How is the quality worked out?
Each format has a typed curve: the share of today's size left at quality 100, 90 and so on down to 10. For a row the block tries the qualities from the best down and takes the first whose estimated size, the file's bytes times that share, fits under the target. A file already under the target is "Kept as it is".
When does it say Cannot reach?
For a lossless PNG, and for a GIF, quality changes nothing, so a file over the target stays as it is and the row says why. A JPG or WebP can also be stuck when even quality 10 would be too big; lower the target far enough and you will see it.
Are the results measured?
No. They are estimates from a typed curve, and the panel says so in its status line. Real results depend on the picture and the encoder, so run your compressor on a sample before you promise a size.
What does Add images do?
It lists the files you pick by name, real size and a format taken from the extension (JPG, PNG, WebP or GIF), up to twelve rows. Other files are refused with a line in the status. Contents are never read. Clear added puts the six typed images back.
What stays local in the demo, and how do I wire it up?
All of it. Queue compression only says how many images it would queue; nothing is compressed, saved or uploaded. In your app replace the curve with your encoder's real numbers, or measure a sample, and send each file with its solved quality to your compressor.