All Topics Learning Paths
Getting Started SEO On-Page Advanced SEO Content Strategy Technical Deep Dives Industry Guides Visual Guides Using the Platform Issue Reference Troubleshooting & FAQ Glossary Off-Page SEO CMS Guides AI & SEO
In this section: On-Page SEO Overview Title Tags Meta Descriptions Headings Structure Content Optimization Image Optimization URL Structure Technical SEO Basics
SEO On-Page
Image Optimization

Image Optimization

Images play a crucial role in user engagement and SEO. Properly optimized images improve page load times, accessibility, and can drive traffic through image search.

Why Image Optimization Matters

Page Speed

Images often account for most of a page's weight

Image Search

Drive additional traffic from Google Images

Accessibility

Alt text helps visually impaired users

Context

Images help search engines understand content

Alt Text (Alternative Text)

Alt text describes an image's content for screen readers and search engines. It appears if the image fails to load.

<img src="coffee-beans.jpg" alt="Fresh organic coffee beans in a wooden bowl">
Good Alt Text
  • Describes the image content accurately
  • "Golden retriever playing fetch in a park"
  • "Chart showing website traffic growth from 2020-2024"
  • "Red Nike running shoes, side view"
Bad Alt Text
  • Empty alt text on meaningful images
  • "image" or "photo"
  • "IMG_1234.jpg"
  • "keyword keyword keyword keyword"

Image Dimensions

Always specify width and height attributes to prevent layout shift:

<img src="photo.jpg" alt="..." width="800" height="600">
Specifying dimensions helps browsers reserve space before the image loads, preventing Cumulative Layout Shift (CLS) - a Core Web Vital metric.

Modern Image Formats

Next-generation formats provide better compression without quality loss:

Format Best For Support
WebP Photos and graphics, 25-35% smaller than JPEG Excellent
AVIF Photos, 50% smaller than JPEG Growing
SVG Icons, logos, simple graphics Excellent

Lazy Loading

Lazy loading defers loading of images until they're needed:

<img src="photo.jpg" alt="..." loading="lazy">
  • Benefits: Faster initial page load, reduced bandwidth
  • When to use: Images below the fold (not visible on initial load)
  • When not to use: Hero images, above-the-fold content

Responsive Images

Serve different image sizes based on device screen:

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

Image Optimization Checklist

  • Add descriptive alt text to all meaningful images
  • Specify width and height attributes
  • Use WebP or AVIF for photos
  • Compress images before uploading
  • Use lazy loading for below-fold images
  • Use descriptive file names (e.g., blue-widget.jpg not IMG001.jpg)

External Resources

Previous
Content Optimization
Next
URL Structure