Web Image Optimization Guide: Formats, Compression & Best Practices

Images account for 50% of average webpage weight. Learn how to reduce image file sizes by up to 70% while maintaining visual quality, improving page speed, and boosting SEO rankings.

Why Image Optimization Matters

53%

of mobile users abandon sites that take over 3 seconds to load

50%

of page weight is typically images

conversion rate drop per second of load time

Impact on Core Web Vitals

LCP (Largest Contentful Paint): Hero images often determine this metric
CLS (Cumulative Layout Shift): Unsized images cause layout shifts
Page weight: Directly affects bandwidth and load time

Choosing the Right Format

Format	Best For	Transparency	Compression
JPEG	Photos, complex images	No	Lossy
PNG	Graphics, logos, screenshots	Yes (alpha)	Lossless
WebP	Everything (modern browsers)	Yes (alpha)	Both
AVIF	High compression needs	Yes (alpha)	Lossy
SVG	Icons, logos, illustrations	Yes	Vector (scalable)

Format Selection Flowchart

Is it a photo or complex image?
├── YES → Use WebP (fallback: JPEG)
└── NO → Is it an icon or simple graphic?
├── YES → Use SVG
└── NO → Does it need transparency?
├── YES → Use WebP (fallback: PNG)
└── NO → Use WebP (fallback: JPEG)

WebP: The Modern Default

WebP should be your go-to format for most images:

25-35% smaller than JPEG at equivalent quality
26% smaller than PNG with transparency
97% browser support (all modern browsers)

Lossy vs Lossless Compression

Lossy Compression

Permanently removes image data to reduce file size.

70-90% file size reduction
Quality loss (often imperceptible)
Best for photos
Cannot recover original quality

Lossless Compression

Reduces file size without losing any data.

10-50% file size reduction
No quality loss
Best for graphics, text
Original quality preserved

Quality Settings Guide

JPEG Quality Recommendations:
├── 85-90: High quality (portfolios, hero images)
├── 75-85: Good quality (most website images)
├── 60-75: Medium quality (thumbnails, backgrounds)
└── 40-60: Low quality (placeholders)
WebP Quality Recommendations:
├── 80-90: High quality
├── 70-80: Good quality (recommended default)
└── 50-70: Medium quality

Responsive Images

Serve appropriately sized images for each device to avoid sending oversized files to mobile users.

Using srcset and sizes

<img
src="image-800.jpg"
srcset="
image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w,
image-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
800px"
alt="Responsive image example"
>

Art Direction with Picture

<picture>
<!-- AVIF for modern browsers -->
<source type="image/avif" srcset="image.avif">
<!-- WebP fallback -->
<source type="image/webp" srcset="image.webp">
<!-- JPEG fallback -->
<img src="image.jpg" alt="Description">
</picture>

Common Breakpoints

320px: Small phones
640px: Large phones
1024px: Tablets
1920px: Desktop
2560px: Large/Retina displays

Lazy Loading

Defer loading of off-screen images until users scroll near them.

Native Lazy Loading

<img src="image.jpg" loading="lazy" alt="Description">

Important: Don't lazy load above-the-fold images (LCP candidates).

Best Practices

Always set width and height to prevent layout shift
Use loading="eager" for critical above-fold images
Consider using blur-up placeholders for better UX

<!-- Proper image with dimensions -->
<img
src="photo.jpg"
width="800"
height="600"
loading="lazy"
decoding="async"
alt="Photo description"
>

Optimization Tools

Online Tools

JPG to WebP Converter - Convert photos to WebP
PNG to WebP Converter - Convert graphics to WebP
SVG to PNG Converter - Rasterize vectors

Command-Line Tools

# ImageMagick - Resize and compress
convert input.jpg -resize 1200x -quality 80 output.jpg
# cwebp - Convert to WebP
cwebp -q 80 input.png -o output.webp
# SVGO - Optimize SVG
svgo input.svg -o output.svg
# Sharp (Node.js) - Batch processing
sharp input.jpg --resize 800 --webp --out output.webp

Build Tool Plugins

Webpack: image-minimizer-webpack-plugin
Vite: vite-plugin-image-optimizer
Next.js: Built-in next/image component
Gatsby: gatsby-plugin-image

Image Optimization Checklist

Before Publishing

Images resized to maximum display size

Using WebP with JPEG/PNG fallbacks

Compression applied (quality 70-85)

Width and height attributes set

Alt text added for accessibility

Lazy loading for below-fold images

Responsive srcset for key images

EXIF data removed for privacy

Related Tools

Image Converters

EXIF Viewer & Remover

Frequently Asked Questions

Use WebP as your primary format—it's 25-35% smaller than JPEG with the same quality and has 97% browser support. Use JPEG as a fallback for older browsers. For graphics with transparency, use WebP or PNG. For icons and logos, use SVG. For maximum compression on modern browsers, consider AVIF.

For most website images, quality 75-85 provides the best balance of file size and visual quality. Use 85-90 for hero images and portfolios where quality matters most. Below 70, compression artifacts become noticeable. Always compare visual quality at your chosen setting before publishing.

Properly optimized images are typically 60-80% smaller than originals. Converting to WebP saves 25-35% over JPEG. Resizing to actual display dimensions often saves 50%+. Combining format conversion, compression, and resizing can reduce a 5MB photo to under 100KB while maintaining visual quality.

Lazy loading defers loading off-screen images until users scroll near them. Use native lazy loading (loading="lazy") for images below the fold. Don't lazy load above-the-fold images—they affect Largest Contentful Paint. Always set width and height attributes to prevent layout shift.

Use the srcset attribute to provide multiple image sizes, and sizes to tell browsers which to use. The browser automatically selects the appropriate size based on viewport width and device pixel ratio. This prevents mobile users from downloading desktop-sized images.

Lossy compression permanently removes image data, achieving 70-90% size reduction with some quality loss (often imperceptible). Lossless compression preserves all data with 10-50% size reduction. Use lossy for photos, lossless for graphics with text or sharp edges where artifacts are more visible.

AVIF offers the best compression (50% smaller than WebP) but has slower encoding, limited tool support, and only 90% browser coverage. Use AVIF with WebP/JPEG fallbacks via the

Provide 2x resolution images for Retina displays using srcset with pixel density descriptors (1x, 2x). A 400px displayed image needs an 800px source for Retina. The file size increase is offset by using WebP and appropriate compression. Don't serve 2x images to non-Retina displays.

Layout shift occurs when images load without reserved space. Always include width and height attributes in your img tags—browsers use them to calculate aspect ratio before loading. Use CSS aspect-ratio for responsive images. This reserves space and prevents content from jumping.

Use SVGO to remove unnecessary metadata, comments, and empty elements. Simplify paths, remove hidden layers, and minimize decimal precision. Inline small SVGs to save HTTP requests. For complex illustrations, ensure the optimized SVG is actually smaller than a well-compressed PNG.