How to Optimize Images for the Web
Reduce file sizes, speed up your site, and keep images looking sharp.
Why Image Size Matters
Images typically account for 50-70% of a web page's total weight. A single unoptimized photo from a modern phone can be 5-10MB. Load a few of those on a page and you are looking at 30+ seconds of load time on a mobile connection. Users leave after three seconds. Search engines penalize slow pages. Image optimization is not optional — it is one of the highest-impact performance improvements you can make.
Google's Core Web Vitals directly measure loading performance. Largest Contentful Paint (LCP) — often triggered by a hero image — should occur within 2.5 seconds. Oversized images are the most common cause of poor LCP scores, which directly affect your search rankings.
JPEG vs PNG vs WebP
Each format has a purpose. JPEG is best for photographs and complex images with many colours. It uses lossy compression, meaning it discards some data to achieve smaller files. At quality level 80-85%, most people cannot see the difference from the original, but the file might be 70% smaller.
PNG is for images that need transparency or have sharp edges with few colours — logos, icons, screenshots with text. PNG uses lossless compression, so nothing is lost, but files are larger than JPEG for photographic content. Never save a photograph as PNG unless you need transparency.
WebP is the modern choice that handles both use cases. It provides 25-35% smaller files than JPEG at equivalent quality and supports transparency like PNG. Browser support is now universal (97%+ globally). If you can use WebP, you should. It is simply better than JPEG and PNG in almost every scenario.
Compression Levels: Finding the Sweet Spot
For JPEG and WebP, quality level 75-85% offers the best balance between file size and visual quality. Below 70%, you start seeing noticeable artifacts — blurring, banding, and blockiness, especially around text and edges. Above 90%, file sizes increase rapidly with minimal visible improvement.
The key insight is that compression is not linear. Going from 100% to 85% quality might reduce file size by 60% with no visible change. Going from 85% to 70% might save another 30% but with noticeable degradation. Always start at 80% and adjust based on the specific image.
When to Resize vs When to Compress
Resizing and compression solve different problems. If your image is 4000x3000 pixels but displays at 800x600 on screen, you are sending 20x more pixels than needed. Resize first to match the display size (accounting for retina displays — typically 2x the CSS size). Then compress the resized image.
A common mistake is compressing a massive image without resizing it first. You might reduce a 10MB file to 3MB through compression alone, but resizing it to the correct dimensions first could get it under 200KB. Always resize to appropriate dimensions before applying compression.
Practical Tips for Common Scenarios
For blog post images, aim for 800-1200px wide and under 200KB. For hero/banner images, 1920px wide at 80% quality typically comes in under 300KB. For thumbnails, 400px wide and under 50KB. Product images on e-commerce sites should be 1000-1500px for zoom functionality.
Always strip EXIF metadata from images before uploading. Camera metadata (GPS coordinates, camera model, exposure settings) adds unnecessary bytes and can leak personal information like the location where a photo was taken.
Optimize Your Images Now
Use our free browser-based tools to compress and resize images instantly. Everything runs locally in your browser — your images are never uploaded to any server.