🖼️ Keep Images Light: Match The Dimensions

Every image has weight. Bigger weight means slower pages, worse metrics, and frustrated users. The classic anti-pattern: a 48×48 avatar slot receives a 1224×1224 PNG “just in case”. Multiply that by thousands of views — and your homepage crawls.

Start with aspect ratio

🔢 Lock the target size. If the UI renders 48×48, prepare assets exactly for that slot. Document sizes in the design system.
🧭 Keep proportions. Stretching squares into rectangles smears pixels and creates artifacts.
📱 Allow a 2× reserve. 48×48 becomes 96×96 — enough for retina screens without overkill.

Where bloated assets hurt

📦 Product cards. A 160×160 thumbnail should not load the original 2048×2048 master.
📰 Feeds and lists. Twenty items mean twenty redundant megabytes if you overshoot.
🛰️ Hero sections. Large banners deserve high-res images, but tailor them: 1440×600 plus a mobile cut, not a 10000×4000 monster.

Practices that save bandwidth

Generate responsive sets. Use srcset and sizes so the browser chooses the right file.
Compress smartly. WebP or AVIF with balanced quality deliver sharp visuals at a fraction of the size.
Document conventions. In design docs or storybook note: “icons — 24×24 / 48×48, max 2×”, “cards — 320×200, ceiling 640×400”.
Guard the repo. CI scripts or linters can reject assets above agreed thresholds.

When exceptions make sense

Sometimes you need huge files: hero galleries, retina screenshots for marketing, printable materials. Provide dedicated exports for those channels, but keep a web-friendly variant as default and link the original only when business truly needs it.

Takeaway

Right-sized images strike the balance between clarity and speed. Respect aspect ratios, keep the reserve to 2×, and never drop oversized originals into tiny slots. Your interface stays nimble, and Core Web Vitals stay green.