shadcn.io is not affiliated with official shadcn/ui
Image Variants Settings Block for Radix UI
An image variants settings panel with a table of three generated sizes, each with a width, a format and a quality slider, an estimated file size from a typed formula, greyscale sample tiles drawn at the three widths and two processing switches.
Installation
Overview
Choose the sizes a photo host makes from every upload and see what they cost, with this image variants settings panel for React with Radix UI. A table lists three sizes, Thumbnail, Card and Full. Each row has a width in a Number Input from 64 to 4,000 pixels, a format in a Native Select (WebP, AVIF or JPEG) and a quality in a Slider from 40 to 95, and ends in the file size that follows, worked out from the pixels, the bits per pixel of the format and the quality squared. Below, three greyscale sample tiles are drawn at the three widths and soften as the quality drops, and one sentence says what a Card weighs and what a thousand photos take in all three sizes. Two Switches strip the camera's own data and lazy-load images below the fold, each saying what it does at the moment. The action foot counts unsaved changes beside a Shine Button that saves them and an outline button that discards them. It's built from Number Input, Native Select, Slider, Switch, Button, Shine Button and Guides, with a CSS entrance only. On a phone the table becomes one card for each size. For a shop builder, a media library or any product that serves photos.
FAQ
How is the estimated size worked out, and can I change it?
The pixels are the width times a height of three quarters of it, the bits per pixel come from BITS at quality 80 (0.55 for AVIF, 0.8 for WebP, 1.1 for JPEG), and the quality scales that by its square over 80 squared. The result is divided by eight for bytes. It is a rule of thumb for a typical photo, not a measurement, and the words say "about". Replace bytesOf with a table you measured from your own images, or with a request to your image service.
What happens when a width is not a number or out of range?
The field turns invalid on blur and names the range under it in a slot that never changes the panel's height. The size, the tile and the sentence keep using the last valid width. Save refuses, says which size is wrong in the status line and puts focus in that field; Discard puts every field back to the saved width.
What are the sample tiles?
Three drawn greyscale pictures, not photos, each at about an eighth of its variant's width and cut off at the width of its cell. The tile softens with a blur that grows as the quality falls, so you can see the direction of the trade without a real image being processed.
What stays local, and how do I make it real?
Everything. No image is resized, Save keeps the settings in this page's state and says so, and the thousand-photo figure is arithmetic. To make it real, save the three variants with the shop, pass them to your resizer as presets, generate each size at upload or on first request, and strip metadata there, because a browser setting cannot remove it from a file already stored.
How does it work by keyboard and on a phone?
Each control is named with its size, for example Width in pixels, Card, and the slider reads its value as "Quality 80". On a phone the table keeps one DOM and each row becomes a card with its labels shown, the file size at the foot of it and the action foot pinned to the bottom of the screen.