Why image file size matters more than you think
Images are the largest assets on most web pages, often accounting for 50-70% of total page weight. A slow-loading page loses visitors before they see your content — Google’s research shows that 53% of mobile users abandon a page that takes more than 3 seconds to load.
Beyond user experience, page speed is a direct ranking factor in Google Search. Core Web Vitals — particularly Largest Contentful Paint (LCP), which measures how quickly the main image loads — directly influence where your pages rank. Getting images right is one of the highest-impact optimizations available to most sites.
Start with Image Compressor to reduce file sizes instantly in your browser.
The difference between lossy and lossless compression
Lossless compression removes redundant data without discarding any pixels. The decompressed image is bit-for-bit identical to the original. PNG uses lossless compression. This is the right choice for screenshots, logos, icons, and diagrams where every pixel matters.
Lossy compression permanently discards some image data, producing a smaller file with a small quality reduction. JPEG is lossy. The “quality” setting in most tools controls how aggressively data is discarded — quality 85 is usually indistinguishable from the original; quality 60 shows visible artifacts.
For photographs and marketing images, lossy compression at quality 75-85 produces the best balance of file size and visual quality.
Choosing the right image format
The format you choose has as much impact on file size as the compression settings.
JPEG — Best for photographs, complex scenes with gradients and many colors. Lossy by default. A properly compressed JPEG photo will be significantly smaller than the same image as PNG.
PNG — Best for images with transparency, flat colors, sharp edges, and text. Lossless. Use PNG when pixel accuracy matters more than file size.
WebP — Google’s modern format. Supports both lossy and lossless modes. Typically 25-35% smaller than JPEG at equivalent visual quality. Supported in all modern browsers. Converting existing JPEGs and PNGs to WebP is one of the most effective quick wins for web performance.
AVIF — Next-generation format with even better compression than WebP. Browser support is growing but not yet universal. Worth adopting for images served to modern browsers.
Convert between formats instantly with Image Format Converter.
The right workflow order
Getting the smallest possible file size requires doing operations in the right order:
-
Resize first — Reduce the pixel dimensions to the maximum size the image will be displayed at. A 4000px-wide photo displayed in an 800px-wide column wastes 80% of its pixels. Removing them before compression means there’s less data to compress.
-
Convert to WebP — If the target environment supports it, convert to WebP after resizing.
-
Compress — Apply lossy compression (for photos) or lossless optimization (for graphics).
This order matters because compressing a large image and then resizing it produces a larger file than resizing first and then compressing. The compression algorithm works on fewer pixels when you resize first.
Resize with Image Resizer, then compress the result.
Specific targets by use case
Hero images — Maximum 200KB. Aim for 100-150KB at 1200-1600px wide. Most visitors will never see the difference between a 150KB and 600KB hero image, but they’ll notice the difference in load time.
Product images — Maximum 100-150KB per image. If you’re showing multiple product images per page, smaller is critical.
Blog post images — Maximum 100KB for inline images, 200KB for feature images.
Thumbnails — Maximum 30-50KB. These are small dimensions anyway, so they should compress aggressively.
What doesn’t work
Scaling down in CSS/HTML only — Using width: 100%; max-width: 800px in CSS doesn’t reduce the file size. The browser downloads the full original image and then scales it visually. You need to resize the actual file.
Re-saving a JPEG at 100% quality — Re-saving an already-compressed JPEG adds another generation of lossy compression without reducing quality settings. If you have an original, always compress from the original.
Compressing an already-heavily-compressed file — Running a file that’s already at 70% quality through compression again at 70% quality produces artifacts without meaningful size reduction. If the file is already small, you’ve reached diminishing returns.
Check your results by comparing the before and after file sizes, and inspect at 100% zoom before publishing to verify no visible artifacts appeared.