How to Optimize Images for the Web — The Pragmatist's Guide

Images Are Probably Your Website's Biggest Problem

On the median webpage in 2026, images account for roughly 50% of total page weight. A single unoptimized hero image can be larger than your entire CSS and JavaScript combined. And unlike code, images are downloaded on every single page load — they can't be cached-and-forgotten like a framework bundle.

The good news: image optimization is the single highest-ROI performance improvement you can make. 10 minutes of work can shave seconds off load times.

Step 1: Pick the Right Format

This decision alone can cut file sizes by 30-70%:

Content Type	Best Format	Why
Photographs	WebP (or AVIF)	30% smaller than JPG at same quality
Screenshots	PNG or WebP	Sharp text, flat colors compress well
Logos/icons	SVG	Vector = infinitely scalable, tiny files
Transparent images	WebP or PNG	Both support alpha transparency
Animations	WebP or MP4	Both crush GIF on size and quality
Simple graphics	SVG	Vector graphics are resolution-independent

The shortcut: If you're unsure, use WebP for everything raster. It handles photos, screenshots, and transparency well, and is supported by every browser in 2026.

Convert your images to WebP using MyPDF's image converter — batch mode handles entire folders.

Step 2: Resize Before Compressing

This is the step most people skip, and it's the one that matters most.

If your page displays an image at 800px wide, but the source image is 4000px wide, you're sending 25x more pixels than needed. The browser downloads all 4000px, then throws away 80% of the data to display it at 800px.

Rule of thumb: Serve images at 2x the display size for Retina screens, no more. Display size 400px → serve 800px. Display size 800px → serve 1600px. MyPDF's Resize tool handles batch resizing to specific dimensions or percentages.

Step 3: Compress Intelligently

JPG/WebP Compression

Quality settings are not linear. The difference between quality 100 and 90 is massive in file size but invisible to the eye. The difference between 90 and 80 saves another big chunk with barely noticeable quality loss. Below 70, you start seeing artifacts.

Quality	File Size (vs uncompressed)	Visible Loss
100	100% (pointless)	None
90	~40%	None
80	~25%	Imperceptible
70	~18%	Slight on zoom
50	~12%	Noticeable

The sweet spot for web: Quality 75-85, depending on the image. Product photos deserve 85. Blog post images are fine at 75.

Use MyPDF's Image Compressor for automatic optimization at the right quality level.

PNG Compression

PNG is lossless by default, but PNGs can vary wildly in size depending on compression settings. A poorly saved PNG can be 3x larger than an optimized one with identical visual content.

Tools like pngquant convert 24-bit PNG to 8-bit with alpha (lossy, but visually near-identical for most web images) and can reduce sizes by 60-80%.

Step 4: Implement Responsive Images

Don't serve the same image to a phone and a 4K monitor. Use the srcset attribute:

<img
  src="photo-800.webp"
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  alt="Product photo"
  loading="lazy"
>

This tells the browser to download only the size it needs. Mobile users on cellular data get the 400px version. Desktop users on fiber get the 1600px version.

Step 5: Lazy Load Below-the-Fold Images

Images below the fold (not visible on initial page load) should load only when the user scrolls near them:

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

One attribute. Zero JavaScript. Works in all modern browsers. This alone can cut initial page load by 40-60% on image-heavy pages.

The Checklist

Before publishing any page with images:

1. Are all photos in WebP format? (Not JPG)
2. Are images resized to no more than 2x display size?
3. Are they compressed at quality 75-85?
4. Do images below the fold have loading="lazy"?
5. Do decorative images have empty alt text (alt="")?
6. Are logos and icons in SVG where possible?

Hit all six, and your images are probably in the top 10% of web performance.

How Much Difference Does It Make?

A real-world example: a typical e-commerce product page with 12 images.

Optimization Level	Total Image Weight	Load Time (3G)
Unoptimized JPGs	8.2 MB	18 seconds
Resized JPGs	3.1 MB	7 seconds
Resized WebP	2.0 MB	4.5 seconds
+ Lazy loading	0.6 MB initial	1.8 seconds

That's a 93% reduction in initial load, from 18 seconds to under 2.

Related Tools

• Compress Image — Optimize image file sizes
• Resize Image — Resize for web dimensions
• Convert Image — Convert to WebP or AVIF
• Batch Convert Images — Process entire image folders