Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Image Optimization Dashboard Block for React Aria

Three format conversions (PNG to WebP, JPEG to AVIF, GIF to WebP) with images served and sizes before and after, a slider for the share served in the new format that recomputes the GB saved a month, and the five largest assets.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Price a format change before you make it, with this image optimization panel for React with React Aria. A hairline frame with a plus mark on each corner opens with a Slider, "Served in the new format", from 0 to 100%. Under it two figures give the images served a month and the gigabytes saved at the slider's value, and a table of three Pixelpress conversions shows images served, the average size before and after, the share saved and the GB saved. A second table lists the five largest assets, each with a drawn nine-square greyscale tile instead of a photo, its size, and what converting it would save. A polite line under the slider reads the result, such as "At 70%: 82 GB a month saved". It's built from Slider and Guides. For image CDNs and performance reviews.

FAQ

How do I fill it with my conversions?

Edit CONVERSIONS: the formats, the images served in a month (in thousands) and the mean size before and after in KB. The share saved is one minus after over before, and the GB saved at a share is images times the KB saved per image times the share. ASSETS lists files with a size, a format and nine tone steps for the tile.

What does the slider assume?

That the chosen share of every format's images is served in the new format, at that format's mean size, and the rest stays as it is. Moving it changes the totals, each row's saving and the sentence in the header; the percentages in the table are fixed by the averages.

What are the squares next to the assets?

Decoration, not previews. Each is nine small cells in five greyscale steps, set by a string of digits on the asset, and it is hidden from assistive technology; the file name and size carry the information.

What stays local, and how do I wire it for real?

Everything: the averages are typed and nothing is converted. To make it real, take counts and mean sizes from your CDN's logs by content type, and decide the rollout share server-side, for example by a negotiated Accept header.

How do I use the slider from the keyboard?

Focus the thumb and use the arrow keys for steps of 5%, Home for 0% and End for 100%. Its value is announced as a percent, and the result is read in the status line.

How does it look on a phone?

The bands stack; the conversions table drops its image counts and share, and the assets table drops its format column.

All 200 dashboard blocks