How to Optimize Images for Your Website: A Complete Guide

Why Image Optimization Matters

According to HTTP Archive data, images account for around 50% of the average webpage's total byte size. On image-heavy pages — e-commerce product listings, photography portfolios, blog posts with many visuals — that share is even higher.

Every extra kilobyte adds to page load time. Load time affects three things that directly matter to your business:

• Search rankings. Page speed is a confirmed Google ranking signal. Core Web Vitals — a set of speed and visual stability metrics — directly impact your position in search results. Large, unoptimized images are one of the most common causes of failing Core Web Vitals scores.
• Bounce rate. Research consistently shows that pages taking longer than 3 seconds to load see significant increases in bounce rate. Mobile users on slower connections are even less patient. Slower pages mean fewer engaged visitors.
• Conversion rate. For e-commerce sites, page speed has a direct relationship with conversion. Amazon and Google have both published data showing that every 100ms of added latency reduces conversion. Images are often the fastest path to meaningful speed improvements.

Step 1: Choose the Right Format

Format selection is the most impactful single decision in image optimization. The wrong format can make your files 2–5× larger than they need to be.

Use WebP for almost everything on the web. WebP produces files 25–35% smaller than equivalent JPG at the same visual quality, and it supports transparency like PNG. All modern browsers support WebP. If your site serves visitors using only modern browsers (which is the vast majority of web traffic in 2026), WebP should be your default for all web images.

Use JPG for photographs when WebP isn't an option. JPG is universally supported and produces good results for photographic content. Use 75–85% quality for web images — this range produces dramatic file size reductions with minimal visible quality loss.

Use PNG only for images that need transparency or pixel-perfect accuracy. PNG uses lossless compression, which is ideal for logos, icons, and screenshots — but produces very large files for photographs. Never use PNG for photos.

Avoid GIF for everything except short animations. For animated content, consider using short MP4 video with autoplay and muted attributes instead — MP4 files are dramatically smaller than equivalent GIF animations.

Step 2: Resize to Display Dimensions

The second most impactful optimization is resizing. There is no benefit to serving a 4000×3000px image when it will be displayed at 800×600px — you're forcing the user's browser to download 25× more pixel data than it can show.

Before compressing, resize each image to its intended display size (or at most 2× the display size for Retina screens). This alone can reduce file sizes by 80–90% for photos taken on modern smartphones.

The key question is: what size will this image actually be displayed at? Check your CSS or your CMS's image handling. Common display widths for web images:

• Full-width hero images: 1440–1920px wide
• Blog post images: 700–900px wide
• Product thumbnails: 300–600px wide
• Profile / avatar images: 100–300px wide

Step 3: Compress After Resizing

Once your image is the right format and dimensions, compress it. The goal is to find the lowest quality setting at which the image still looks acceptable at its intended display size.

Recommended starting points by use case:

Always compare the before and after visually at the display size where the image will appear — not zoomed in. Compression artifacts that look severe when zoomed in are often completely invisible at normal viewing size.

Step 4: Use Descriptive File Names and Alt Text

Optimizing images for SEO isn't just about file size — it's also about helping search engines understand what your images show.

Use descriptive file names. Instead of IMG_4872.jpg, use red-ceramic-coffee-mug.webp. Google reads file names as a signal about image content. Descriptive, hyphenated names help your images appear in Google Image Search for relevant queries.

Always write alt text. The alt attribute on an <img> tag describes the image for screen readers and for search engines that can't perfectly interpret image content. Good alt text is descriptive and specific: alt="Red ceramic coffee mug on white marble surface" is better than alt="mug" or alt="".

Use title attributes sparingly. The title attribute creates a tooltip on hover. It is not a substitute for alt text and is often ignored by screen readers. Only use it when there is genuinely useful additional information to convey.

Step 5: Implement Lazy Loading

Lazy loading defers the loading of images that are below the fold (outside the current viewport) until the user scrolls close to them. This dramatically reduces the amount of data loaded on initial page render, improving both page speed metrics and perceived performance.

In modern HTML, lazy loading is a single attribute:

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

The loading="lazy" attribute is supported by all modern browsers and requires no JavaScript. Add it to every image that is not in the initial viewport — typically everything except the hero image or the first image visible on page load. For the first image (which affects Largest Contentful Paint, a Core Web Vitals metric), use loading="eager" or omit the attribute entirely.

Step 6: Serve Responsive Images

A user on a mobile phone with a 390px-wide screen doesn't need the same 1440px-wide image as a user on a 27-inch monitor. Responsive images let you serve appropriately sized images based on the user's screen width.

The srcset attribute lets you provide multiple image versions at different sizes, and the browser automatically downloads the most appropriate one:

<img
  src="photo-800.webp"
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Description">

This tells the browser: here are three versions of the image at 400px, 800px, and 1600px wide. On screens up to 600px wide, the image fills 100% of the viewport; on wider screens, it's 800px wide. The browser picks the smallest version that is sharp enough for the current screen.

Step 7: Use Caching Headers

Images rarely change. Once a user has downloaded your logo or hero image, they shouldn't need to download it again on their next visit — it should load instantly from their browser cache.

Set long cache lifetimes for images using HTTP headers. On most web servers or CDNs, you can configure images to be cached for 1 year. When you do need to update an image, change the file name (or add a version parameter to the URL) so browsers treat it as a new resource.

Image Optimization Checklist

• Use WebP format for all web images; fall back to JPG for photos and PNG for transparent graphics
• Resize images to their intended display dimensions before uploading
• Compress with 75–85% quality for photographs; use lossless for logos and icons
• Use descriptive, hyphenated file names (no spaces, no generic names like IMG_001)
• Write meaningful alt text for every image
• Add loading="lazy" to all images except the first visible image on the page
• Implement srcset to serve appropriately sized images to different screen widths
• Set long cache headers for static image assets
• Test with Google PageSpeed Insights after optimizing to verify improvement