Website Image Optimization Checklist: 10 Steps to Faster Pages

First, resize each image to the largest size it is actually shown at; a 4000 pixel photo in a 800 pixel slot wastes more than 90 percent of its data. Second, choose the right format: WebP or AVIF for photos, SVG for logos, PNG for lossless graphics. Third, compress to a quality of about 75 to 85 and check at full zoom.

Use the srcset and sizes attributes so a phone downloads a 600 pixel version while a large monitor downloads a 1600 pixel one. Without them every visitor pays for the largest file.

Always put width and height on your img tags so the browser reserves space before the file arrives, which prevents the page from jumping around as it loads. Add loading="lazy" to images below the first screen so they are fetched only when needed.

The largest image visible at the top of the page is usually the Largest Contentful Paint element. Load it eagerly, and consider fetchpriority="high" on it. Lazy loading it makes the page feel slower.

Serve images with long cache headers, such as a year, and give files a content hash in their name so you can safely replace them. A content delivery network places copies close to the visitor and often converts formats automatically.

Run your page through PageSpeed Insights or Lighthouse before and after. Look at the LCP time and the list of oversize or unoptimized images, which tells you exactly which files to fix first. Repeat when you add new pages.