Image Optimization

Why Image Optimization Matters

Images affect two critical SEO factors: page speed and visibility in Google Images. Pages with optimized images load 3-4 seconds faster than those with unoptimized images (HTTP Archive, 2024). Since images account for an average of 42% of total page weight on the web, image optimization is one of the fastest ways to improve Core Web Vitals.

Beyond speed, Google Images is the second-largest search engine in the world. Properly optimized images can rank in image search and appear in the main search results through image packs, driving additional organic traffic.

Alt Text: The Most Important Image SEO Element

Alt text (alternative text) is an HTML attribute that describes the content and purpose of an image. It serves three functions: telling search engines what the image shows, providing context when images fail to load, and enabling screen readers to describe images to visually impaired users.

<!-- Good alt text -->
<img src="title-tag-serp-example.webp"
     alt="Google search result showing a title tag highlighted in blue" />

<!-- Bad alt text -->
<img src="image1.jpg" alt="image" />

<!-- Keyword-stuffed alt text -->
<img src="seo.jpg" alt="SEO title tags SEO tips SEO guide SEO best practices" />

Google's John Mueller confirmed that alt text is the primary signal Google uses to understand image content (Google Search Central, 2024). Write alt text that is:

• Descriptive: Explain what the image shows, not what you want it to rank for
• Concise: 125 characters or fewer (screen readers may cut off longer text)
• Natural: Include keywords only when they accurately describe the image
• Specific: "Bar chart comparing organic traffic growth from 2023 to 2025" beats "traffic chart"

WebAIM's accessibility report found that 55.4% of all images on the web have missing or inadequate alt text (WebAIM, 2024). This represents both an accessibility failure and a missed SEO opportunity.

File Names Matter

Rename image files with descriptive, keyword-relevant names before uploading. Google uses file names as a contextual signal for image content (Google Search Central, 2024).

• Good: google-search-console-dashboard.webp
• Bad: IMG_20260324_001.jpg
• Bad: screenshot.png

Use hyphens to separate words (same rule as URLs). Keep file names concise and descriptive.

Image Formats: WebP, AVIF, PNG, and JPG

Choosing the right image format can reduce file sizes by 25-50% without visible quality loss:

• WebP: The recommended format for most web images. 25-34% smaller than JPG at equivalent quality (Google, 2024). Supported by 97% of browsers globally.
• AVIF: Next-generation format, 20% smaller than WebP. Browser support at 92% and growing (Can I Use, 2025). Best for photographs and complex images.
• PNG: Use for images requiring transparency (logos, icons, screenshots with text). Larger file sizes but lossless quality.
• JPG: Acceptable fallback for photographs. Use only when WebP or AVIF are not an option.
• SVG: Vector format for icons, logos, and simple illustrations. Infinitely scalable with tiny file sizes.

HTTP Archive data shows that sites using WebP instead of JPG for hero images see a median improvement of 0.8 seconds in Largest Contentful Paint (HTTP Archive, 2024).

Compression and File Size

Uncompressed images are the most common cause of slow page loads. Target these file size guidelines:

• Hero images: Under 200KB
• In-content images: Under 100KB
• Thumbnails: Under 30KB
• Icons: Under 10KB (or use SVG)

Tools like Squoosh (by Google), TinyPNG, and ImageOptim can compress images by 50-80% without perceptible quality loss. Google PageSpeed Insights reports that 72% of pages could save at least 1 second of load time by properly compressing images (Google, 2024).

Lazy Loading

Lazy loading defers the loading of images that are not visible in the viewport until the user scrolls to them. This reduces initial page load time and conserves bandwidth.

<!-- Native lazy loading (recommended) -->
<img src="chart.webp" alt="SEO traffic growth chart" loading="lazy" />

<!-- Do NOT lazy load above-the-fold images -->
<img src="hero.webp" alt="On-page SEO guide header" loading="eager" />

Native lazy loading via the loading="lazy" attribute is supported by 95% of browsers (Can I Use, 2025). Never lazy load images above the fold, as this delays your Largest Contentful Paint (LCP) score.

Responsive Images

Serving a 2000px-wide image to a 375px-wide mobile screen wastes bandwidth and slows page loads. Use responsive images to serve the right size for each device:

<img
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="hero-800.webp"
  alt="On-page SEO process diagram"
/>

Always specify width and height attributes on images to prevent layout shift (Cumulative Layout Shift, a Core Web Vital). Pages with properly sized images have 25% less layout shift on average (Web Almanac, 2024).

Image Sitemaps

If your images are loaded dynamically (via JavaScript or lazy loading), Google may not discover them through regular crawling. An image sitemap ensures all images are indexed. Google recommends including images in your existing XML sitemap rather than creating a separate one (Google Search Central, 2024).