Image Optimization for the Web: A Practical Guide

Open any slow website and 8 times out of 10 the culprit is images: a 6 MB phone photo dropped straight into an article, a half-megabyte PNG logo, a 4000-pixel background on a 400-pixel screen. Images typically account for 50-70% of total page weight — which makes them the first place to optimize.

Rule #1: dimensions before everything

The most common mistake is not the format but the size. If an image displays in an 800-pixel column, a 4000-pixel file is 25 times more data than needed (width × height — both scale). Before any compression, resize to the actual display size, at most double for retina screens. Going from 4000 to 1600 pixels wide often means going from 5 MB to 400 KB — before any other step.

Rule #2: the right format for the right job

• WebP — today''s standard for photos and graphics on the web. On average 25-35% smaller than a JPEG of equal visual quality, and it supports transparency. All modern browsers support it.
• AVIF — the successor, another ~20% smaller than WebP, but slower to encode. An excellent choice if your tooling can produce it.
• JPEG — still a solid choice for photos; at quality 75-82 the difference from the original is invisible to the naked eye.
• PNG — only for screenshots and sharp-edged graphics. For photos it is a disaster: the same image can be 10x larger than in WebP.
• SVG — for logos and icons: infinitely sharp at any size, often under 5 KB.

Rule #3: let a tool do the work

On WordPress, a plugin like Converter for Media, ShortPixel, or Imagify automatically converts existing and future images to WebP/AVIF. For manual work, Squoosh (Google''s free in-browser tool) shows a live before/after comparison as you drag the quality slider. Realistic outcome: a 40-image gallery drops from 60 MB to 4-6 MB.

Rule #4: lazy-load everything below the fold

Images the visitor cannot see yet do not need to load yet. Adding loading="lazy" is enough — WordPress does it automatically since version 5.5. Just make sure your main above-the-fold image does NOT have lazy loading, because it is part of the LCP metric Google measures.

Where hosting enters the picture

Even perfectly optimized images need to be delivered fast. A CDN makes the biggest difference here: images are served from the server nearest each visitor instead of traveling from your host every time. Our SEO hosting includes a free global CDN on all plans, so galleries fly for international visitors too. The combination of correct dimensions, WebP, and a CDN typically cuts 2-4 seconds from an image-heavy page — seconds that show up directly in Google rankings and conversions.