Large assets are still a common performance issue
Even well-designed pages can feel slow when hero images and thumbnails are oversized. Reducing file size before upload improves load time, reduces bandwidth usage, and creates a smoother experience on mobile connections.
Images are consistently the largest assets on most web pages. According to HTTP Archive data, images make up over 50% of the average page weight. A hero image that’s 3MB on a product page will delay Largest Contentful Paint — a Core Web Vitals metric that directly affects both user experience and search rankings. Compressing before upload, rather than relying on CDN optimization afterward, gives you control over the baseline.
Start with Image Compressor.
Understanding lossy vs. lossless compression
The choice between lossy and lossless compression determines how much quality you trade for file size.
Lossless compression removes redundant metadata and uses more efficient encoding without changing any pixel data. The file is smaller but visually identical. PNG files are typically compressed this way. This is the right choice for logos, icons, screenshots, and anything with sharp edges or flat color areas where pixel-perfect quality matters.
Lossy compression discards some image data permanently. JPEG uses this approach, and modern formats like WebP support both modes. The result is a much smaller file — often 60-80% smaller — with a quality reduction that’s invisible at typical compression levels. For photographs, marketing images, and product photos, lossy compression at a quality setting of 75-85 usually produces results that look identical to the original at a fraction of the size.
Choose format based on content type
Photographic images usually benefit from efficient lossy compression, while graphics with flat colors may perform better with modern formats. Converting format and resizing dimensions together often yields the biggest speed gains.
The practical guide:
- JPEG — best for photographs, gradients, and complex imagery. Well-supported everywhere.
- PNG — best for logos, UI screenshots, and images that need transparency. Use only when transparency or lossless quality is required.
- WebP — significantly smaller than JPEG and PNG at equivalent quality. Supported in all modern browsers. Consider converting existing JPEGs to WebP for production use.
- AVIF — newer format with even better compression than WebP. Browser support is growing but not yet universal.
Convert quickly using Image Format Converter.
Resize before you compress
Compression reduces file size within the current dimensions. If you’re uploading a 4000×3000 pixel photograph to be displayed at 800×600, you’re storing — and serving — over five times more pixel data than necessary.
Resize the image to the maximum dimensions it will be displayed at before compressing. This single step often reduces file size by 80% before compression even runs. The combination of resizing and then compressing produces the smallest possible file without any perceptible quality difference at the display size.
Use Image Resizer to set exact pixel dimensions before running compression.
A practical upload pipeline for teams
Before publishing, compress, resize to target breakpoints, then verify file names and alt text. This process helps content teams ship faster pages with fewer reworks and better baseline Core Web Vitals.
A repeatable workflow:
- Resize to the largest breakpoint the image will appear at (e.g., 1200px wide for a hero)
- Convert to WebP if the CMS and CDN support it
- Compress at quality 80-85 for photos, lossless for graphics
- Rename with descriptive keywords before uploading (helps image SEO)
- Add alt text at upload time, not as an afterthought
Teams that build this into their content publishing checklist consistently achieve better Core Web Vitals scores without requiring developer intervention on individual pages.
Checking results before you publish
After compressing, spot-check the result at full display size before uploading. Compression artifacts — visible blocky patterns or color banding — are easier to catch before a file is live than after.
A quick side-by-side at the actual display resolution tells you whether the quality setting is appropriate. If artifacts are visible, increase the quality setting slightly and recompress. If the image looks identical to the original, you have room to compress further.
For color-critical images like product photos, also check the image with Image Color Picker to verify that important brand colors haven’t shifted during conversion.