Images account for 50–70% of a typical webpage's total byte weight. Optimizing them is the single highest-impact performance improvement most sites can make. A site with 5 MB of unoptimized images can be cut to under 800 KB with the right techniques — with zero visible quality difference to users. This guide gives you a practical, actionable framework for image optimization.
Why Image Optimization Matters for SEO and UX
Google's Core Web Vitals — specifically Largest Contentful Paint (LCP) — is directly affected by how quickly your largest above-the-fold image loads. A hero image that takes 4 seconds to load will result in a poor LCP score, hurting your Google Search ranking. On mobile, where connections are slower, the penalty is even larger.
Beyond SEO, users have little patience. Studies consistently show bounce rates increase by 32% when page load time goes from 1 to 3 seconds. Image optimization is the fastest way to close that gap without rewriting code.
Target File Sizes (General Guidelines)
These are practical targets for common image types on the web:
- Hero / banner image (full width): under 150 KB. If your hero image is over 500 KB, it's costing you LCP points.
- Blog post header / thumbnail: under 80 KB for card images, under 120 KB for post headers.
- Product images (e-commerce): 70–120 KB for card view, up to 200 KB for zoomed/detail view.
- Icon / logo: under 10 KB. Prefer SVG for logos — it's infinitely scalable and usually under 5 KB.
- Social media share image (OG image): under 150 KB at 1200×630px.
Format Priority: Which Format to Use When
- SVG for icons, logos, and simple illustrations. Vector-based, infinitely scalable, typically 1–10 KB, no compression artifacts.
- WebP for photographs and complex images. Achieves 25–34% smaller files than JPG at the same perceptual quality. Supports transparency. Use for all modern browser targets.
- JPG as fallback for photos. Use 75–85% quality setting in most tools. At 80% quality, JPG is visually indistinguishable from lossless while being 5–10× smaller than PNG.
- PNG only when you need lossless quality or when you have images with hard edges + transparency that WebP doesn't handle well (rare).
- AVIF — the next-gen format after WebP — offers even better compression (50% smaller than JPG) but has less browser support as of 2026. Consider it for progressive enhancement.
Responsive Images: Serve the Right Size
One of the biggest image optimization mistakes is serving a 1600px-wide image to a 375px-wide mobile screen. The browser downloads all 1600px of data even though it only needs 375px. The fix: use responsive images with the srcset attribute and the <picture> element.
<img
src="hero-800.jpg"
srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="Hero image description"
/>This tells the browser to download only the appropriately-sized image for the current viewport. On a 390px mobile screen, it downloads the 400px version — dramatically reducing bytes transferred.
Lazy Loading: Defer Off-Screen Images
Add loading="lazy" to all images that don't appear above the fold (first screen). This defers their download until the user scrolls near them, reducing initial page load time and bandwidth usage.
<img src="image.jpg" alt="Description" loading="lazy" />For your hero image (above the fold), use loading="eager" or omit the attribute — lazy loading the hero image can actually hurt LCP.
Compression Settings Reference
When using image editing tools or Toolskuy's image compressor, these settings are a reliable starting point:
- Photographic images (JPG/WebP): 75–85% quality — negligible visual difference vs. 100%, but 60–70% smaller files
- UI screenshots with text (PNG): Use lossless PNG compression. Text must remain perfectly sharp — lossy compression on screenshots creates blurry text.
- Icons and logos (WebP): Lossless WebP — smaller than PNG, same quality
- Thumbnails: More aggressive compression is acceptable — at small display sizes, artifacts aren't visible. 65–70% quality is fine for 200×200px thumbnails.
Image Dimensions: Don't Serve Larger Than Needed
Before compressing, resize your image to the largest size it will ever be displayed. A 4000×3000px photo from a camera will never be displayed at full resolution on a webpage — it should be resized to 1600px wide (max) before compression. Resizing + compressing together produces dramatically smaller files than compressing alone.
Before/After: A Real Optimization Example
Here's a realistic before-and-after for a blog post hero image (1200×630px landscape photo):
- Original (PNG exported from design tool): 3.8 MB
- After resizing to 1200px + saving as JPG at 82%: 185 KB
- After converting to WebP at 82%: 120 KB
That's a 97% reduction in file size with no visible quality difference to readers. Multiplied across 20 blog post images, that's 76 MB vs. 2.4 MB — a page load time difference of 5–10 seconds on a 4G connection.
Free Tools to Optimize Your Images
Compress images without quality loss using Toolskuy Image Compressor. Convert to WebP with WebP Converter. Resize to exact pixel dimensions with Image Resizer. All tools run in your browser — nothing is uploaded to a server.