How to Compress Images for the Web

By Piano Garden 편집팀 · Reviewed Piano Garden 도구 검수 · Published 2026-08-05 · Updated 2026-08-25

Camera and phone originals are almost always oversized for the web. Multi-megabyte files dropped into heroes, thumbnails, or article bodies delay first paint and waste mobile data. Compression starts with shipping only the pixels you actually show—not with chasing a prettier slider default.

Decide the on-screen width first. Many mobile article images look sharp at roughly 1000–1400px wide; even with retina density, about 1.5–2× the CSS width is usually enough. Extra resolution that never appears on screen only adds weight.

After resizing, tune the quality slider. Photos often look natural in the JPG/WebP 70–85 range; UI screenshots may need a bit higher. Avoid slamming the slider to the minimum—zoom edges, small text, and skin tones before you commit.

Set size budgets by role. Thumbnails often land around 50–150KB, in-article photos around 150–400KB, and heroes get a ceiling based on design and network. Dark scenes and heavy gradients show compression artifacts sooner, so leave headroom.

Treat logos, icons, and line art differently from photos. Sharp graphics prefer PNG or SVG; photos prefer WebP or JPG. If you need transparency, confirm the export still has an alpha channel in PNG or WebP.

Keep originals and web exports in separate folders. Overwriting masters makes print and re-edit work painful later. Include purpose and width in filenames (for example, product-hero-1200.webp) so CMS and CDN folders stay readable.

After upload, spot-check transfer size in the network panel or a Lighthouse run. Even if a CMS resizes on the fly, huge masters slow builds and uploads. Caching and lazy-loading help, but they do not replace a lean source file.

Two common mistakes: saving JPG at quality 100 (big files, little visual gain) and recompressing an already lossy file multiple times (blocky artifacts stack up). Prefer one export from a clean master whenever you can.

Checklist: pick display width, strip needless EXIF when appropriate, choose format, spot-check quality, hit the KB budget, archive the original, verify on the live page. That sequence clears most image-related slowdowns.

Piano Garden’s image compressor, JPG/WebP/PNG tools, and crop tool can handle resize-and-quality work in the browser. For sensitive photos, review the tool’s processing policy before you upload.