Web Image Optimization: A Practical Guide

Why image optimization matters

Page load speed directly affects bounce rates, conversion rates, and search rankings. Google's Core Web Vitals framework includes Largest Contentful Paint (LCP), which measures how quickly the largest visible element — often a hero image — loads on screen. An LCP score above 2.5 seconds is rated "poor" and can negatively affect search rankings.

Beyond search rankings, faster pages feel better to use. A 100ms improvement in load time has been shown to improve conversion rates by 1–2%. For high-traffic pages, the cumulative impact is significant.

Step 1: Choose the right format

Format selection is the single most impactful image optimization decision:

• WebP for most content: photos, product images, backgrounds. 25–35% smaller than equivalent JPEG with excellent browser support.
• AVIF for cutting-edge compression: even smaller than WebP, but encoding is slower and browser support, while growing, is not universal.
• PNG for UI elements, screenshots, and graphics that require transparency or pixel-perfect quality.
• SVG for logos, icons, and illustrations that need to scale to any size. SVG files are resolution-independent and can be very small for simple graphics.
• JPEG when WebP is not an option — still the most compatible lossy format for environments where WebP support cannot be guaranteed (email, older apps).

See our full comparison: PNG vs JPG vs WebP.

Step 2: Set appropriate dimensions

Serving an image that is larger than its display size wastes bandwidth. A 3000px wide photo displayed in a 600px container means the browser downloads roughly 25× more pixels than it needs to display.

Before serving any image on the web, resize it to the maximum size it will actually be displayed at, with a reasonable margin for high-DPI (Retina) screens. A common practice is to serve images at 2× the CSS display size for sharp rendering on high-DPI screens.

For example, if a product image is displayed in a 400px wide container, serve it at 800px wide. This covers Retina displays without serving unnecessarily large files.

Use ImageLab's Resize tool to quickly resize images to target dimensions before export.

Step 3: Apply the right compression

After resizing, compress the image to the lowest quality level that still looks good at the target display size. Guidelines for different content types:

See the full guide: Image Compression Explained.

Step 4: Use responsive images

The HTML srcset and sizes attributes allow the browser to download the most appropriate image for the current screen size and DPI. This prevents mobile visitors from downloading desktop-sized images.

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

In this example, the browser selects the right image size based on the viewport and pixel density — a mobile user on a standard screen gets the 400px image; a desktop user on a Retina screen gets the 1600px image.

Step 5: Lazy load below-the-fold images

The loading="lazy" attribute on an <img> tag tells the browser not to download the image until it is close to the viewport. This is built into all modern browsers and requires no JavaScript.

Always add loading="eager" (or omit the attribute) on the largest above-the-fold image — typically the hero image — to avoid delaying LCP. Applying lazy loading to images that are visible on page load will hurt your LCP score.

Step 6: Always specify width and height

Specifying width and height attributes on all <img> tags allows the browser to reserve the correct space before the image loads, preventing Cumulative Layout Shift (CLS). CLS is a Core Web Vitals metric that penalizes pages where content jumps around as it loads.

You do not need to use the exact display size — CSS controls the visual dimensions. The attributes just need to reflect the correct aspect ratio so the browser can calculate the appropriate height before the image is downloaded.

Step 7: Deliver from a CDN

A Content Delivery Network (CDN) caches your images at edge locations around the world, reducing latency for geographically distributed visitors. Most web platforms (Cloudflare, Vercel, Netlify, Fastly) provide CDN delivery automatically.

For images on an existing site, consider using an image CDN like Cloudflare Images, Imgix, or Cloudinary. These services can perform format conversion, resizing, and compression on-the-fly based on URL parameters, eliminating the need to pre-generate multiple variants of each image.

Audit your images with PageSpeed Insights

Google's free PageSpeed Insights tool analyzes any public URL and provides specific recommendations. The "Properly size images," "Serve images in next-gen formats," and "Efficiently encode images" audits directly address image optimization issues and estimate the potential savings for your site.

Run the audit, identify the largest opportunities, and use the workflow in this guide to address them. Even improving the top two or three images on a page can produce a measurable LCP improvement.

Optimize in your browser with ImageLab

ImageLab provides the key tools you need to implement this workflow entirely in your browser — no software to install, no server uploads:

• Convert — switch between PNG, JPG, and WebP
• Compress — reduce file size with a quality slider and live preview
• Resize — set exact pixel dimensions or crop to the right aspect ratio
• Batch processing — apply any operation to dozens of images at once
• Strip metadata — remove EXIF data before publishing