Squoosh — pick an image, compare codecs
[model draft]A dropzone with four one-click sample photos opens directly into a full-bleed before/after split comparator with twin floating codec cards showing real-time byte savings.
Step 1 of 3
Squoosh — start screen- component pattern · model draftThe first screen is one drop target: three overlapping pink blob shapes centered under the logo, an add-image icon, and "Drop OR Paste" with "Paste" underlined as a link. Steal a single oversized drop zone with paste offered as the second input, for a tool whose only first step is supplying a file.
- grid/layout · model draftBelow a wave-edged blue band, "Or try one of these:" leads to four circular sample-image thumbnails. Steal sample inputs placed directly under the upload target, so the tool can be tried by someone with no file at hand.
- texture/material · model draftThe ground is a pale grey-and-white checkerboard, the image editor's transparency convention, so the page reads as an empty image canvas; a "Ready to work offline" toast with "DISMISS" sits at the bottom edge. Steal the medium's own background convention as the app ground, and announce offline readiness in a dismissible toast.
Step 2 of 3
Squoosh — editor, before/after split- component pattern · model draftThe editor opens on a full-bleed split: original left, compressed right, one draggable divider. The comparison is the screen, not a preview inside a form.
- grid/layout · model draftEach half gets its own floating settings card in its own corner, so the two sides read as two jobs set against each other.
- copywriting · model draftThe result sits in the bottom corner as a number before any setting is touched: the size and a percentage saved. The first thing shown is what you get.
Step 3 of 3
Squoosh — codec switched to WebP- motion/interaction · model draftChanging the codec recompresses in place and the saving badge updates. There is no apply button; the preview is the confirmation.
- component pattern · model draftOptions grow with the codec. WebP adds lossless, effort and quality controls under the same header, and the rarely-touched ones stay folded under 'Advanced settings'.
Agents get the same order from get_reference: any screen's reply names the flow and every step in it.