How to Optimize Images for Websites: Step-by-Step Guide

Images typically account for 50–65% of a web page's total byte size. A single unoptimized hero image can add 1–3 MB to a page that should load in under 1 MB total. The steps in this guide can reduce your total image weight by 50–80% without any visible quality loss — and in many cases, the optimized images will look sharper and cleaner.

Why Image Optimization Matters

Image optimization affects three business outcomes directly: page load speed, search rankings, and conversion rates. Google's Core Web Vitals — particularly Largest Contentful Paint (LCP) — are heavily influenced by image weight. Faster pages have higher conversion rates: Walmart found a 2% conversion improvement for every 1-second load time improvement. Every image optimization step in this guide contributes to all three outcomes.

Step 1: Choose the Right Format

Format selection is the highest-leverage decision in image optimization. The rule of thumb:

• WebP: Default choice for all web images — photos, graphics, screenshots with transparency
• SVG: Icons, logos, simple illustrations (vector art that needs to scale)
• AVIF: Maximum compression for high-traffic photo-heavy pages (with WebP fallback)
• PNG: Only when delivering to non-web contexts (print, email, document workflows)
• JPEG: Only as a fallback for browsers that don't support WebP

Step 2: Resize Before Uploading

Serving an image at a larger size than it's displayed at is pure waste. A photo that's 4000×3000 pixels displayed at 800×600 pixels means your browser downloads 25× more pixels than it needs. Always resize images to their maximum display dimensions before uploading.

Common maximum widths: hero images (1920px or 2× the column width for Retina), product images (800–1200px), blog article images (1200px), thumbnails (400px). For Retina displays (2× DPI), use 2× the CSS display width as your image width, then compress aggressively — a properly compressed 1600px WebP is smaller than a poorly compressed 800px JPEG.

Step 3: Compress Your Images

Compression is about finding the minimum file size at which quality degradation becomes invisible. For WebP photos, quality 80–85 is the sweet spot — a WebP at 80 looks virtually identical to JPEG at 92, at roughly half the file size. For lossless graphics (logos, UI), use lossless compression to avoid any quality loss.

• Photos: WebP quality 80–85 (or AVIF quality 60–70 for maximum compression)
• Product images with white backgrounds: WebP quality 75–80
• Screenshots and UI graphics: WebP lossless or PNG
• Illustrations: Test both lossy (75–85) and lossless and compare visually
• Icons and logos: SVG (vector) or WebP lossless

Step 4: Use Responsive Images

Responsive images let the browser choose the appropriate image size for the current viewport. A mobile phone at 375px wide doesn't need a 1920px image — and sending one wastes bandwidth and degrades performance on mobile, which is where most web traffic comes from.

Step 5: Implement Lazy Loading

Lazy loading defers the loading of below-the-fold images until they're about to enter the viewport. This reduces the initial page weight — only images visible without scrolling are loaded immediately. All other images load on demand as the user scrolls.

Modern HTML lazy loading is a single attribute: `loading='lazy'`. Add it to every `<img>` tag except your above-the-fold hero image (which should load immediately). Do not lazy-load your LCP element — that will make your LCP worse.

Step 6: Serve From a CDN

A Content Delivery Network (CDN) stores copies of your images on servers around the world. When a visitor in Tokyo requests your site hosted in London, they get the image from a Tokyo edge node instead — at a fraction of the latency. CDNs also typically handle image format negotiation automatically (serving WebP to supporting browsers and JPEG as fallback).

Image-specific CDN services like Cloudinary, Imgix, and ImageKit go further: they resize, reformat, and compress images on-the-fly based on the requesting device. This handles responsive images, format selection, and compression automatically without requiring manual processing.

Step 7: Add Alt Text and Dimensions

Two often-skipped attributes that matter significantly: `alt` and `width`/`height`. Alt text is essential for accessibility (screen readers) and image SEO (Google uses it to understand image content). Width and height attributes prevent Cumulative Layout Shift (CLS) — without them, the browser doesn't reserve space for the image and the page jumps when the image loads.

Image Optimization Tools

• AllConverter.tools Image Compressor — free, browser-based, no upload, WebP conversion
• AllConverter.tools Image Resizer — resize to exact dimensions in browser
• Squoosh (Google) — detailed quality control, side-by-side comparison
• Sharp (Node.js) — server-side batch processing for build pipelines
• ImageOptim (macOS) — lossless JPEG/PNG optimization for native apps