PixalTools LogoPixalTools
arrow_backBack to Blog
Web PerformanceFebruary 5, 2026· 11 min read

How to Optimize Images for Websites: A Complete Guide

Images make up roughly 50% of the average web page's total size. Properly optimizing them is the single most impactful thing you can do for website performance. This guide covers everything from choosing the right format to implementing responsive images.

Why Image Optimization Matters

Before diving into techniques, let us understand why this matters so much for your website:

  • Page speed impacts SEO: Google has used page speed as a ranking factor since 2010 and introduced Core Web Vitals as ranking signals in 2021. The Largest Contentful Paint (LCP) metric — which measures how quickly the largest visible element loads — is often an image.
  • Users leave slow sites: Research from Google shows that 53% of mobile users abandon sites that take more than 3 seconds to load. Each additional second of load time can decrease conversions by 7-12%.
  • Bandwidth costs money: For high-traffic sites, unoptimized images can add hundreds of dollars to monthly hosting and CDN costs.
  • Accessibility matters: Users on slower connections — common in developing regions and rural areas — are disproportionately affected by bloated images.

Step 1: Choose the Right Format

Selecting the correct image format is the first and most impactful decision. Here is a practical decision tree:

  • Photograph or complex image? → Use WebP (lossy mode). Fall back to JPEG if legacy browser support is critical.
  • Graphic, logo, or screenshot? → Use WebP (lossless mode) or PNG.
  • Need transparency? → Use WebP or PNG (JPEG does not support transparency).
  • Simple animation? → Use WebP animated instead of GIF (50-80% smaller files).
  • Icon or simple graphic? → Consider SVG for infinitely scalable vector graphics.

WebP has universal browser support as of 2024 and consistently produces smaller files than both JPEG and PNG. It should be your default format for web images.

Step 2: Resize to Display Dimensions

This is the most commonly overlooked optimization. A 4000×3000 pixel image from a camera, displayed at 800×600 in a web page, wastes 80% of its pixels. The browser downloads the full-size image and then throws away most of the data during rendering.

Calculate Optimal Dimensions

For each image on your page, determine the maximum CSS width it will be displayed at. Then multiply by 2 to account for high-DPI (Retina) displays:

  • Image displayed at 400px CSS width → export at 800px width
  • Full-width hero banner on 1440px layout → export at 2880px width
  • Thumbnail at 200px → export at 400px width

Common sizes for responsive websites:

  • Thumbnails: 300-400px
  • Blog content images: 800-1200px
  • Hero/banner images: 1600-2400px
  • Full-screen backgrounds: 1920-2560px

Step 3: Compress Aggressively (But Smartly)

After choosing the right format and dimensions, compression reduces file size further by removing data the human eye cannot easily perceive. The key is finding the quality threshold where the image still looks good but the file size is significantly reduced.

Recommended Quality Settings

  • Hero images and featured content: 80-85% quality. These are visually prominent and benefit from higher quality.
  • Blog content and inline images: 75-80% quality. Good balance of quality and file size.
  • Thumbnails and gallery previews: 65-75% quality. Small display size hides compression artifacts.
  • Background images and decorative elements: 60-70% quality. Often blurred or obscured by text overlays.

At 75% quality, a typical photograph will be 60-70% smaller than at 100% quality, with minimal visible difference. Always compare visually — some images tolerate more compression than others. Images with gradual tones (sky, skin, water) compress better than images with fine detail (text, foliage, fabric textures).

Step 4: Implement Responsive Images

Responsive images serve different image sizes to different devices, ensuring mobile users do not download desktop-sized images. HTML provides two powerful attributes for this:

The srcset Attribute

The srcset attribute provides the browser with a list of image variants at different widths. The browser automatically selects the most appropriate one based on the viewport width and device pixel ratio:

<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w,
          hero-800.webp 800w,
          hero-1200.webp 1200w,
          hero-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Hero image description"
  width="800"
  height="600"
  loading="lazy"
/>

This tells the browser: "At viewport widths up to 768px, this image takes up 100% of the viewport width. Above 768px, it takes up 50%." The browser then calculates which image from the srcset is the best fit and downloads only that one.

The picture Element

For format fallbacks (serving WebP to modern browsers and JPEG to older ones), use the <picture> element:

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero image" width="800" height="600" />
</picture>

Step 5: Lazy Load Below-the-Fold Images

Lazy loading defers the loading of images that are not visible in the viewport until the user scrolls to them. This reduces initial page load time and saves bandwidth for images that may never be viewed.

Modern browsers support native lazy loading with a simple attribute:

<img src="photo.webp" loading="lazy" alt="Description" />

Important: Do NOT lazy load the largest image above the fold (the LCP element). This image should load as quickly as possible. Only apply loading="lazy" to images below the initial viewport.

Step 6: Specify Width and Height

Always include width and height attributes on <img> elements. This allows the browser to reserve the correct space before the image loads, preventing Cumulative Layout Shift (CLS) — one of Google's Core Web Vitals metrics.

<img src="photo.webp" width="800" height="600" alt="Description" />

Use CSS aspect-ratio or max-width: 100%; height: auto; to make the image responsive while maintaining proportions.

Step 7: Use a CDN

A Content Delivery Network (CDN) serves your images from servers geographically close to each user. This reduces latency and improves load times, especially for international audiences. Platforms like Vercel, Netlify, and Cloudflare Pages include built-in CDN with automatic optimization for static assets.

Step 8: Consider Progressive Loading

Progressive JPEG images load as a blurry full-size preview first, then progressively sharpen as more data arrives. This gives users an immediate visual impression instead of seeing the image load line by line from top to bottom.

For modern frameworks, consider using a Low Quality Image Placeholder (LQIP) — a tiny, blurred version of the image (under 1 KB) that displays immediately while the full image loads. Next.js, Gatsby, and other frameworks have built-in support for this technique.

Image Optimization Checklist

Use this checklist for every image on your site:

  1. Is this image necessary? Can it be replaced with CSS or SVG?
  2. Is it in WebP format (or AVIF with WebP/JPEG fallback)?
  3. Is it resized to the maximum display dimensions (× 2 for retina)?
  4. Is it compressed at the appropriate quality level (typically 75-85%)?
  5. Does it have width and height attributes?
  6. Is it lazy-loaded if below the fold?
  7. Does it have descriptive alt text for accessibility and SEO?
  8. Is it served from a CDN?
  9. Does the LCP image have preload hints?

Optimize Your Images Now

Start optimizing right away with PixalTools' free tools — compress images, resize them, or convert to WebP — all locally in your browser with no uploads needed.