Design isn’t just how it looks. It’s how it moves.
A page that stalls is a page that leaks attention. People don’t always think “this site is slow,” they just feel a tiny friction and drift away. The design can be beautiful, and the experience can still be disappointing if assets are too heavy.
The best designers treat performance like part of the aesthetic. Not as a separate engineering chore, but as part of the craft.
Speed is part of the design system
Attention leaks when pages stall
When an image loads late, it creates a gap in the story your page is telling. That gap is where attention falls out.
Fast-loading visuals keep momentum. Slow-loading visuals feel like an interruption. And interruptions are where people start scrolling without reading.
Visual quality failures that users notice first
People don’t notice “slightly better compression.” They notice obvious mistakes: blurry logos, crushed shadows, weird halos around objects, and gradients that turn stripy.
Performance work should preserve perceived quality. The goal is not “smaller at any cost.” The goal is “smaller without anyone noticing.”
Choose formats like a designer (not a robot)
Photos: compression-friendly choices
For photos, the most important rule is to start with the correct dimensions. A massive photo scaled down in CSS is still heavy.
Once sizing is right, choose a photo-friendly format and compress gently using an online tool like this one: . You’ll usually find a sweet spot where the file is dramatically smaller and still looks clean at normal viewing distance.
UI assets: sharpness and transparency rules
UI assets demand sharpness. That’s why logos, icons, and interface graphics often prefer formats that preserve clean edges.
If transparency is involved, test in context. Transparent overlays and soft shadows can reveal artifacts if you compress too aggressively.
Illustration and gradients: avoiding banding
Gradients are where bad compression shows up fast. Banding is the classic failure: smooth colour transitions turn into visible stripes.
If a design relies on gradients, treat those assets with care: slightly higher quality settings, or different format choices, can prevent the “cheap” look.
The “export clean” workflow
Start with correct dimensions and aspect ratios
This is the first and biggest win. Export at the size the design actually needs, not at whatever size the original file happens to be.
Pick an output format per asset type
The file type should match the asset’s job. Photos behave differently than logos. Transparent UI behaves differently than backgrounds. When you choose formats intentionally, compression becomes safer.
Compress with a visual QA pass
Compression should always include a quick check. Zoom in on the fussy parts: text, edges, shadows, and gradients. If those look clean, you’ve done it right. Tools like this one: https://documents.io/image-compressor can be a good place to start as they are online and you don’t need to download any software.
Performance-friendly presentation
Responsive images and multiple sizes
Serving the same large image to every device is a performance tax. Responsive images and multiple sizes let browsers pick the smallest version that still looks good.
Lazy loading and above-the-fold priorities
Not every asset needs to load immediately. Prioritise above-the-fold visuals and delay the rest. This is less about making the page “light” and more about making it feel instant.
When to keep a high-res source for zoom/detail
Some sites need zoom-level detail. Product photos, portfolio work, fine artwork. In those cases, you can keep high-res sources, but serve them strategically. Let the default experience be fast, and load heavy detail only when someone asks for it.
Quality control: what to check before publishing
Edge halos, ringing, and crushed blacks
These are the “cheapness” signals. Halos around objects, strange sharpening artifacts, and shadows that lose detail can make a design feel off even if the layout is perfect.
Text clarity over backgrounds
If text sits on images, your quality bar is higher. Compression artifacts behind text can reduce readability and make the whole page feel less polished.
Mobile checks for perceived sharpness
Mobile is where performance and quality meet. If it loads quickly and looks crisp on a phone, you’re doing it right.
FAQs
Is WebP always best?
Not always. WebP is great, but the “best” format depends on the asset type, the platform, and what you need to preserve. The best designers use the format that serves the design, not the one that wins a theoretical contest.
How do I compress without making it look cheap?
Start with correct sizing, compress gently, and always do a visual QA pass. If you can’t see the difference at normal viewing size, you’ve found the sweet spot.
