Image Variants Settings Block for React

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.

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.

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.

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.

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.