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.
Key statistics
Images account for an average of 42% of a typical web page's total weight, making them the largest contributor to page load times.
Source: HTTP Archive
Pages that load within 2.5 seconds see a 25% higher conversion rate compared to pages loading in 5 seconds or more.
Source: Google Web Vitals
How to fix it
-
1
Serve images in modern formats (WebP or AVIF) with JPEG/PNG fallbacks using the <picture> element or content negotiation.
-
2
Always specify width and height attributes on <img> elements to prevent Cumulative Layout Shift (CLS) as images load.
-
3
Add loading="lazy" to images below the fold so they load only when the user scrolls near them, improving initial page load time.
-
4
Compress images to reduce file size without visible quality loss. Target under 200KB for hero images and under 100KB for standard content images.
-
5
Use responsive images with srcset and sizes attributes to serve appropriately sized images for different viewport widths.
Code example
<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
Related topics
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 displays when an image fails to load and is used by search engines to understand image content. Every non-decorative image on a page must have meaningful alt text that conveys the image's purpose or information.
Title 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 in search engine results pages (SERPs). It is widely considered the single most important on-page SEO element because it directly tells search engines and users what the page is about.
Canonical 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 "canonical" version of that page. When the same content is accessible at multiple URLs (due to query parameters, www/non-www variations, HTTP/HTTPS, or syndication), the canonical tag consolidates all ranking signals to a single URL.
Analyze your site's SEO health
eiSEO automatically detects and helps you fix issues like this across your entire site.