Images are the heaviest component of the modern web. According to the HTTP Archive, images account for roughly 45% of the average web page's total weight. For an e-commerce site, that number can exceed 70%. Every kilobyte of unnecessary image data costs you: slower page loads, higher bounce rates, and lower search rankings. Google explicitly uses page speed as a ranking factor, and the metric that matters most for images is Largest Contentful Paint (LCP) — the time it takes for the main content element on the page (often a hero image) to become visible. Google considers an LCP under 2.5 seconds as "good." A single uncompressed 5 MB hero image can push LCP past 8 seconds on a mobile connection, which correlates with a 90%+ bounce probability.
Beyond LCP, heavy images degrade the other Core Web Vitals. Cumulative Layout Shift (CLS) gets worse when large images load without reserved dimensions and push content around. First Input Delay (FID) is indirectly affected because bandwidth consumed by images delays JavaScript execution. Compressing images before uploading them to your site is the single highest-ROI performance optimization available to any website owner. It requires no coding, no infrastructure changes, and the results are immediate.
Lossy compression reduces file size by permanently discarding visual information that the human eye is unlikely to notice. It is how JPG and WebP (in lossy mode) work. At 70-85% quality, the visual difference from the original is imperceptible to viewers, while file sizes shrink by 80-95%. For photographs, product images, and banner graphics destined for the web, lossy compression at these quality levels is the correct choice — the byte savings are enormous and the quality cost is invisible.
Lossless compression reduces file size by finding and eliminating statistical redundancy in the data without discarding any pixel information. The decompressed result is mathematically identical to the original. PNG files use lossless compression. This is the correct choice for logos, icons, screenshots, and any image containing text, sharp lines, or precise color values — content where even minor compression artifacts would be noticeable and damaging.
For most websites, the practical strategy is: lossy for photos, lossless for graphics. The format you choose also matters significantly. JPG and WebP handle lossy compression of photos extremely well. PNG handles lossless compression of graphics. If you are not sure which to use, our post on JPG vs PNG vs WebP walks through the decision in detail.
The two numbers that determine your image's file size are its pixel dimensions and its compression quality. Here is what to aim for:
| Image Type | Max Width | Quality | Target Size | Format |
|---|---|---|---|---|
| Hero / banner | 1920px | 75-80% | Under 150 KB | WebP |
| Blog / content image | 1200px | 75-80% | Under 80 KB | WebP |
| Product photo | 1200px | 80-85% | Under 100 KB | WebP or JPG |
| Thumbnail | 400px | 60-70% | Under 20 KB | WebP |
| Logo / icon | 200-400px | Lossless | Under 30 KB | PNG or SVG |
The quality sweet spot for lossy compression is 70-85%. Below 60%, compression artifacts (blockiness, color banding) become visible. Above 90%, file size increases rapidly with negligible visual improvement — you are paying bytes for data the human eye cannot resolve. For thumbnails and small images displayed at reduced sizes, quality as low as 50-60% is often perfectly acceptable because the downscaling masks the artifacts.
Here is a workflow you can follow for every image before it goes on your website. It takes about 30 seconds per image once you are used to it.
Step 1: Resize first. Most images come from cameras or stock photo sites at resolutions far beyond what a web page can display. A 6000x4000 pixel DSLR photo displayed at 1200 pixels wide wastes roughly 95% of its pixels. Use any image editor (even the built-in Photos app on your computer) to resize to the maximum display width before compression. If the image will be displayed at 800px wide on your site, export at 800px — not 8000px and scaled down by CSS.
Step 2: Choose your format. WebP for photos and hero images (with JPG fallback for the 3% of older browsers). PNG for logos, icons, and screenshots. JPEG for email attachments or universal compatibility. If you are unsure, our format comparison guide walks through every scenario.
Step 3: Compress. Upload the resized image to a free image compressor. Adjust the quality slider to match your target use: 80% for general content, 60-70% for thumbnails, lossless for logos. The tool compresses the image entirely in your browser — nothing is uploaded to any server — and gives you an instant download.
Step 4: Verify. Open the compressed image side by side with the original. Zoom in to 100%. If you cannot see a difference at normal viewing distance, the compression is good. If artifacts are visible, increase the quality setting by 5-10% and compress again. Always check on a high-resolution display — a laptop screen may hide artifacts that a 4K monitor reveals.
Step 5: Name and upload. Use descriptive, hyphenated filenames: dark-roast-coffee-beans-1200px.webp rather than IMG_4829.jpg. Search engines read filenames, and a descriptive filename is free SEO. Upload to your site and verify the page loads correctly.
If you manage a WordPress site, compress images before uploading them, even if you use a plugin. Plugins like Smush, ShortPixel, and Imagify are useful for bulk-optimizing existing media libraries, but they work best as a safety net for images that slip through — not as your primary compression step. Pre-compressing gives you control over the exact quality level and output format. Use this compressor before uploading, then let a plugin handle automatic WebP conversion and serving.
Shopify automatically compresses images on upload, but it is conservative — it will not push quality low enough to hit the file sizes listed in the table above. Pre-compress your product photos before uploading to Shopify. Target 1200x1200 pixels (square product photos display best on the platform) at 80% quality. Shopify also supports WebP natively for storefronts since 2021, so upload your images as JPEG at high quality and let Shopify serve the WebP version automatically.
For both platforms, store the original uncompressed files somewhere safe — a cloud storage folder, a backup drive, a design asset library. Once a JPG is compressed at 70% quality, that data is permanently gone, and there is no way to recover it. The compressed version lives on your website. The uncompressed original is your source of truth. Keep them separate.
Upload your images and compress them by up to 90%. Choose your quality level and download in JPG, PNG, or WebP. Free, instant, no upload to any server.
Open Image Compressor