How to optimize images for the web without losing quality

Images are typically the largest files on any webpage. Unoptimized images slow down your site, hurt your search rankings, and frustrate visitors. Here's a practical approach to getting images right for the web.

Why image optimization matters

Google uses page speed as a ranking factor, and images are usually the biggest contributor to slow load times. A single uncompressed photo from a modern smartphone can be 5–10MB. The same photo, properly optimized for web, should be under 200KB — a reduction of 95% with barely any visible difference.

Beyond SEO, faster pages mean better user experience. Studies consistently show that pages loading in under 2 seconds have significantly lower bounce rates than slower pages.

Step 1: Choose the right format

Format choice is the most impactful decision you can make. As a general rule:

• Photos and hero images → WebP (with JPG fallback for older browsers)
• Logos, icons, illustrations → SVG if possible, otherwise PNG
• Background textures, decorative images → WebP or compressed JPG
• Screenshots and UI mockups → PNG

Step 2: Resize to the right dimensions

There's no point serving a 4000×3000px image when it's displayed at 800×600px on screen. The browser has to download all those extra pixels and then scale them down — wasting bandwidth and time.

Before uploading any image to your website, resize it to the maximum size it will be displayed at. For most blog post images, 1200px wide is more than enough. For thumbnails and cards, 400–600px is often sufficient.

Step 3: Compress without losing quality

After resizing, compress the image to reduce file size further. The key is finding the right balance between quality and file size. For most web images:

• JPG quality 70–80% is the sweet spot — small file, good quality
• WebP quality 75–85% gives similar quality at smaller size
• PNG compression is lossless so quality stays perfect, but files remain larger

A practical workflow for web images

1. Start with the original high-quality source file
2. Resize to the maximum display size (e.g. 1200px wide for blog posts)
3. Convert to WebP if your website supports it
4. Compress with quality set to 75–80%
5. Check the file size — aim for under 200KB for most images, under 100KB for thumbnails
6. Upload and test your page speed

What file size should you target?

• Hero / banner images: under 300KB
• Blog post inline images: under 150KB
• Thumbnails and card images: under 80KB
• Icons and small UI elements: under 20KB

The impact of image weight on Core Web Vitals

Google's Core Web Vitals are performance metrics that directly influence search rankings, and images are their biggest single lever. Two metrics are especially affected by how you handle images:

Largest Contentful Paint (LCP) measures how quickly the largest visible element on the page loads. In most cases that element is a hero image or banner photo. Google's threshold for a "good" LCP score is under 2.5 seconds. A 5 MB hero image on a typical mobile connection will blow past that limit; the same image compressed and converted to WebP at 180 KB will comfortably pass it.

Cumulative Layout Shift (CLS) measures visual stability. When images load without predefined dimensions, the surrounding content shifts as images appear — an experience Google penalizes in rankings. The fix is simple: always include width and height attributes on your <img> tags so the browser can reserve the correct space before the image loads, regardless of how fast or slow the connection is.

To put real numbers on it: a 5 MB hero image resized and converted to WebP at 80% quality becomes approximately 180 KB — a 96% reduction. On a 10 Mbps mobile connection, that's the difference between a 4-second image load and a 0.14-second one. Image optimization is the single highest-impact change most websites can make to their Core Web Vitals scores.

Lazy loading: defer what the user can't see yet

HTML5's loading="lazy" attribute tells the browser to skip loading an image until it is about to enter the viewport. This means your page's initial load only fetches images that are actually visible — everything else waits until the user scrolls near it. Adding lazy loading to below-the-fold images is a one-attribute change with no visual downside:

One critical exception: do not use loading="lazy" on hero images or any content visible on first load. Those images need to start downloading immediately — deferring them would hurt your LCP score. Apply lazy loading to images in the article body, product grids, related-posts sections, and footers. Browser support is universal across all modern browsers (Chrome, Firefox, Safari, Edge) with no JavaScript or polyfills required.

Set the right dimensions before you compress

One of the most common image optimization mistakes is uploading a large image and relying on CSS to make it appear smaller on the page. For example, setting max-width: 700px in CSS controls how the image is displayed — but the browser still downloads every pixel of the original file and then scales it down in memory. A 4000 × 3000 px image displayed at 700 × 525 px wastes roughly 97% of its pixels.

Always resize your image to the actual display size — or at most 2× the display size to account for retina and HiDPI screens — before uploading. For a blog post image displayed at 700 px wide, serve an image that is 1400 px wide. For a product thumbnail at 300 px, serve a 600 px image. Never let CSS do the work that image resizing should have done before upload.

A real-world example: a 5 MB smartphone photo resized to 1400 px wide, then converted to WebP at 80% quality, becomes approximately 180 KB — a 96% reduction with no perceptible quality loss at any screen size the image will realistically be displayed at. That is the impact of combining resize and compress together.