How to Optimize Images for Speed and SEO

Images are often the heaviest elements on a webpage. If you don't optimize them, they can dramatically slow down your site, hurt your Core Web Vitals, and damage your SEO. The good news: you can fix this without sacrificing quality. Here's how.

Why Image Optimization Matters

Search engines care about user experience. A slow site leads to higher bounce rates and lower rankings. Google's Core Web Vitals—especially Largest Contentful Paint (LCP)—directly measure loading performance. Large, unoptimized images are a common cause of poor LCP.

Optimizing images reduces file size, improves load times, and saves bandwidth. It's one of the highest-impact, lowest-effort improvements you can make.

Choose the Right File Format

Not all image formats are equal:

Recommendation: Use JPEG for photos, PNG for simple graphics with transparency, and WebP or AVIF as next-gen alternatives. Serve WebP or AVIF to browsers that support them using <picture> tags or your CDN.

Compress Images Without Losing Quality

Image compression reduces file size by removing unnecessary data. Two types:

Tools for compression:

Aim for a balance: reduce file size by 50-80% while keeping visual quality acceptable.

Resize Images to the Correct Dimensions

Serving a 4000px-wide image when your content area is only 800px is wasteful. Resize images to the maximum display size they'll ever need. For responsive designs, create multiple versions (e.g., 480px, 768px, 1200px) and use srcset in HTML so browsers load the appropriate size.

Example:

<img src="image-800.jpg" 
     srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" 
     sizes="(max-width: 600px) 100vw, 800px" 
     alt="Description">

Use Lazy Loading

Lazy loading defers loading of off-screen images until the user scrolls near them. This reduces initial page weight and speeds up LCP.

Add the loading="lazy" attribute to your <img> tags. It's supported by all modern browsers. For critical above-the-fold images, do not lazy load them—they need to load immediately.

Optimize Image Delivery

Add Descriptive Alt Text

Alt text improves accessibility and helps search engines understand image content. Write concise, descriptive alt text that includes relevant keywords naturally. Avoid keyword stuffing. If an image is purely decorative, use alt="" to let screen readers ignore it.

Audit Your Current Images

Start by identifying your largest, slowest-loading images. Use tools like:

Then, systematically optimize each image using the steps above. Prioritize images that appear above the fold and those on your most visited pages.

Conclusion

Image optimization is a quick win for both speed and SEO. By choosing the right format, compressing, resizing, lazy loading, and using a CDN, you can dramatically improve your Core Web Vitals and user experience. Start with your most impactful images and work through the rest.

Want to see how your site's images are performing? Run a free audit to get a prioritized list of fixes.

More guides · Compare audit tools · Run a free website audit