Image Optimization

A Practical Guide to Faster, Smarter Websites

OptimizationAccessibilityWebsite

Author: Steven Hsu
Published: 23/03/2026
Updated: 23/03/2026

Image optimization is the process of delivering high-quality visuals at the smallest possible file size, without compromising user experience. It directly impacts page speed, SEO, accessibility, and conversion rates—making it one of the highest-leverage optimizations you can implement.

Why Image Optimization Matters

Images are often the largest assets on a page (like, seriously...)

Media content — WebP format are ideal for websites as it offers significant advantages in resolution and file sizes over older JPEG and PNG format.

Poorly optimized images lead to:

Slower load times
Lower search rankings
Higher bounce rates
Increased bandwidth costs

Optimized images improve:

Core Web Vitals (especially LCP)
Mobile performance
Crawl efficiency
Overall UX and conversions

Core Principles

1. Use the Right File Format

Choose formats based on use case, not habit:

WebP → best default (good compression, wide support)
AVIF → smaller files, better compression, slower encoding
JPEG → fallback for photos
PNG → only when transparency is required
SVG → vector graphics, icons, logos (resolution-independent)

WebP vs AVIF

In general: AVIF provides better compression than WebP, resulting in smaller file sizes for the same image quality.

But: At the time of writing, WebP enjoys broader browser support than AVIF, with compatibility across major browsers like Google Chrome, Firefox, Edge, and Opera. Safari also added support for WebP in its latest version.

Rule: Default to WebP, use AVIF when performance matters and pipeline supports it.

2. Resize Images Properly

Never serve oversized images.

If container is 800px wide, don’t serve 3000px images
Generate multiple sizes (responsive variants)

Example:

3. Compress Aggressively (But Smartly)

Compression reduces file size without noticeable quality loss.

Lossy compression (preferred for photos)
Aim for ~60–80% quality range
Avoid “visually perfect”—opt for “perceptually identical”

4. Implement Lazy Loading

Load images only when needed:

Benefits:

Improves initial load speed
Reduces unused data transfer

5. Use Proper Image Dimensions

Always define width and heigh

Benefits:

Prevents layout shifts (CLS)
Improves rendering stability

6. Optimize for Core Web Vitals

For critical images (e.g., hero/LCP):

Use preload or priority loading
Avoid lazy loading above-the-fold images
Ensure fast delivery via CDN

7. Serve via CDN

A CDN reduces latency by serving images closer to users.

Faster global delivery
Automatic caching
Often includes on-the-fly optimization

8. Use Descriptive File Names & Alt Text

SEO and accessibility matter:

✔️maldives-beach-sunset.webp
✖️IMG_1234.webp
Use meaningful alt attributes

9. Automate Everything

Manual optimization doesn’t scale. Work Smart by using built-in features:

Build pipelines (Sharp, Squoosh, ImageMagick)
CMS automation (e.g., Next/Image optimization)
CDN transformations (Cloudflare, Imgix)

Common Mistakes

Uploading raw images from design tools (huge files)
Using PNGs for photos
Missing srcset and responsive handling
Lazy loading everything (including LCP images)
Ignoring mobile sizes
Not defining dimensions (causes CLS issues)

A Practical Workflow

Upload original image
Generate multiple sizes (e.g., 400 / 800 / 1200 / 1600)
Convert to WebP (and AVIF if needed)
Compress to optimal quality
Serve via CDN
Implement srcset + sizes
Add alt, width, height
Lazy load non-critical images

Final Thought

Image optimization is not about making images smaller—it’s about delivering the right image, at the right size, at the right time.

Do this well, and you’ll see immediate gains in performance, SEO, and user experience—all without changing your content.