Image Optimization
What is image optimization and how does it affect page speed and rankings?
What is image optimization?
Image optimization is the process of delivering images at the correct size, format, and compression level while providing proper HTML attributes (alt text, width, height, lazy loading). Unoptimized images are the number one cause of slow page loads on the web, directly impacting Core Web Vitals scores that Google uses as a ranking signal.
Image optimization is the process of delivering images at the correct size, format, and compression level while providing proper HTML attributes such as alt text, width, height, and lazy loading. Unoptimized images are the leading cause of slow page loads and directly impact Core Web Vitals scores used as a Google ranking signal.
Why does image optimization matter?
Images typically account for 50-70% of a page's total weight. Serving oversized or uncompressed images dramatically increases Largest Contentful Paint (LCP) times, which is a Core Web Vitals metric that directly affects search rankings. Missing width and height attributes cause layout shifts (high CLS), and missing alt text hurts both accessibility and image search visibility.
Images account for an average of 42% of a typical web page's total weight, making them the largest contributor to page load times.
Pages that load within 2.5 seconds see a 25% higher conversion rate compared to pages loading in 5 seconds or more.
How to fix it
- Serve images in modern formats (WebP or AVIF) with JPEG/PNG fallbacks using the <picture> element or content negotiation.
- Always specify width and height attributes on <img> elements to prevent Cumulative Layout Shift (CLS) as images load.
- Add loading="lazy" to images below the fold so they load only when the user scrolls near them, improving initial page load time.
- Compress images to reduce file size without visible quality loss. Target under 200KB for hero images and under 100KB for standard content images.
- Use responsive images with srcset and sizes attributes to serve appropriately sized images for different viewport widths.
Bad seed, good seed.
<img src="hero-photo.png">
<!-- No alt, no dimensions, no lazy loading, uncompressed PNG, will cause CLS and slow LCP --><img
src="hero-photo.webp"
alt="Developer reviewing accessibility audit results on a dashboard"
width="1200"
height="630"
loading="lazy"
decoding="async"
>Frequently asked questions
What image format is best for SEO?
WebP offers the best balance of quality and compression for most use cases. AVIF provides even better compression but has less browser support. Use the <picture> element to serve modern formats with JPEG/PNG fallbacks.
Does image file size affect SEO?
Yes, indirectly. Large images slow down page load, increasing Largest Contentful Paint (LCP), which is a Core Web Vitals metric Google uses as a ranking factor.
Why do I need width and height attributes on images?
Width and height attributes let the browser reserve space for the image before it loads, preventing layout shifts (CLS). Without them, the page content jumps around as images load, hurting user experience and Core Web Vitals.
Related guides
Image Alt Text
Alt text (the HTML alt attribute) is a short text description of an image that screen readers announce to visually impaired users. It also d...
Read more → SEOTitle Tags
The title tag is the HTML <title> element that defines the page's title in the browser tab and, most importantly, as the clickable headline...
Read more → SEOCanonical Tags
A canonical tag (rel="canonical") is an HTML element placed in the <head> of a page that tells search engines which URL is the preferred or...
Read more →Analyze your site's SEO health
Find and fix these issues automatically with eiSEO.
50 pages free · No credit card · Results in under 2 minutes