Image Optimization for the Web: Formats, Sizes and CDNs

Images are usually the heaviest part of a page. Getting them right is the quickest performance win.

Choose a modern format

• WebP is widely supported and typically 25 to 35 percent smaller than JPEG.
• AVIF is smaller still, with slightly less support and slower encoding.
• Use SVG for logos and icons, and PNG only when you truly need lossless detail.

Resize to the display size

Do not ship a 4000 px photo into a 400 px slot. Serve several widths and let the browser pick with srcset and sizes. Frameworks like Next.js do this for you with the Image component.

Compress before upload

Resize and compress in the browser before uploading, for example to WebP at a sensible maximum width. It saves storage, bandwidth and upload time, and keeps files under a target such as 100 KB.

Use a CDN with transformations

Services like Cloudinary can convert and resize on the fly using URL parameters:

https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/photo.jpg

f_auto picks the best format per browser and q_auto balances quality and size.

Lazy load below the fold

Add loading="lazy" to images that are not visible at first. Do the opposite for your main hero image: load it with priority since it drives LCP.

Prevent layout shift

Always include width and height, or an aspect ratio, so the browser reserves space before the image arrives.

Write useful alt text

Describe the image for people who cannot see it. Good alt text also helps image search.

Takeaway

Right format, right size, compressed, lazy loaded and delivered from a CDN. Your pages will feel instant.