Image Compressor for Web Assets: Reduce Size Safely
5/28/20262 min readBy RM
imagescompressionperformanceweb
Large images are still the fastest way to blow up page weight. Before images land in your repo or CDN, compress (and often resize) them so LCP and bandwidth stay under control.
Use the Image Compressor to shrink files before they hit your repo or CDN.
Quick steps
- Upload the image (PNG, JPEG, or other supported format).
- Adjust quality or compression settings until preview looks acceptable.
- Download the compressed file and compare file size vs original.
Example
Input: 2.4 MB PNG screenshot
Output: ~640 KB PNG at a moderate quality setting, with minimal visible change on UI edges.
Rule of thumb: compress after you have the final dimensions. If the image is wider than your layout needs, Image Resizer first, then compress.
Format choices
| Asset type | Typical approach |
|---|---|
| UI screenshots, logos with transparency | PNG → compress; consider SVG for flat icons (SVG Optimizer) |
| Photos | JPEG or WebP at tuned quality |
| App / social banners | PNG to Banner for size, then compress |
Common mistakes
- Over-compressing. Text and sharp UI edges get mushy before photos do.
- Using PNG for photos. JPEG or WebP usually wins on size for photographic content.
- Ignoring dimensions. A 4000 px-wide hero scaled to 1200 px in CSS still downloads the full file unless you resize the asset.
Verification checklist
- View at 100% zoom. Check text edges and thin lines.
- Compare file size to your performance budget (e.g. hero under 200 KB).
- On transparent PNGs, check light and dark backgrounds.