Image SEO Optimization Checklist

1 Write Descriptive Alt Text for Every Image

Alt text is the most important image SEO signal. It tells search engines what the image shows and provides context for visually impaired users. Every content image must have descriptive alt text.

# Alt Text Best Practices:

GOOD alt text:
  alt="Team meeting in modern office with whiteboard"
  alt="Google Search Console performance report showing traffic growth"
  alt="Red Nike Air Max 90 running shoes side view"

BAD alt text:
  alt=""                          (empty - no context)
  alt="image1"                    (generic)
  alt="photo"                     (meaningless)
  alt="SEO optimization best practices tips guide"  (keyword stuffing)

# Alt text rules:
1. Describe what the image actually shows
2. Be specific and concise (5-15 words)
3. Include keywords where natural
4. Don't start with "image of" or "photo of"
5. Decorative images: use alt="" (empty)
6. Every content image must have alt text

2 Use Descriptive, Keyword-Relevant File Names

Image file names are a minor ranking signal. Rename generic files (IMG_001.jpg) to descriptive names (google-search-console-traffic-report.webp) before uploading.

# File Name Examples:

BAD:
  IMG_001.jpg
  DSC_20260801.png
  Screenshot 2026-08-01.png
  image1.webp

GOOD:
  google-search-console-traffic-report.webp
  red-nike-air-max-90-running-shoes.webp
  team-meeting-modern-office.webp
  technical-seo-audit-checklist.webp

# File name rules:
- Use hyphens to separate words
- Use lowercase only
- Include relevant keywords
- Be descriptive but concise
- Remove camera/screenshot prefixes

3 Convert Images to WebP Format

WebP offers 25-35% smaller file sizes than JPEG with comparable quality. All major browsers support it. Convert your images to WebP and use JPEG/PNG as fallbacks.

<!-- Picture element with WebP and fallback -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descriptive alt text"
       width="800" height="600" loading="lazy">
</picture>

# Conversion tools:
- Squoosh.app (Google, free, browser-based)
- ShortPixel (WordPress plugin)
- Imagify (WordPress plugin)
- Cloudinary (CDN with auto-format)
- cwebp command line tool

# Format selection guide:
- Photos: WebP (lossy) or AVIF
- Graphics with transparency: WebP (lossy)
- Icons/logos: SVG
- Screenshots: WebP (lossy)
- Animated: WebP (animated)

4 Implement Lazy Loading for Below-Fold Images

Lazy loading delays loading images until they are about to enter the viewport. This dramatically improves initial page load time and Largest Contentful Paint (LCP).

# Native lazy loading (recommended):
<img src="image.webp" alt="Description"
     width="800" height="600"
     loading="lazy">

# Eager loading for above-fold images:
<img src="hero-image.webp" alt="Description"
     width="1200" height="600"
     loading="eager"
     fetchpriority="high">

# Lazy loading rules:
- loading="lazy" for all below-fold images
- loading="eager" for above-fold images (hero, logo)
- Always set width/height to prevent layout shift
- Use fetchpriority="high" for LCP images
- Never lazy load the LCP element
- Test with Lighthouse to verify improvement

5 Compress Images Without Visible Quality Loss

Image compression reduces file size without significantly affecting visual quality. Aim for 80-85% quality for JPEGs and WebP : this typically cuts file size in half with minimal visible difference.

6 Set Explicit Width and Height Attributes

Width and height attributes tell the browser how much space to reserve for the image before it loads. This prevents Cumulative Layout Shift (CLS), a Core Web Vitals metric.

# Without width/height (causes CLS):
<img src="image.webp" alt="Description">
# Browser doesn't know size until image loads
# Content shifts when image appears

# With width/height (no CLS):
<img src="image.webp" alt="Description"
     width="800" height="600">
# Browser reserves space immediately
# No layout shift when image loads

# With CSS aspect-ratio (modern approach):
<img src="image.webp" alt="Description"
     width="800" height="600"
     style="aspect-ratio: 4/3; width: 100%; height: auto;">

7 Use Responsive Images with srcset

srcset serves different image sizes based on the user's device and screen resolution. Mobile users get smaller images, desktop users get larger ones. This saves bandwidth and improves load times.

8 Add Open Graph Image Meta Tags

Open Graph tags control how your page appears when shared on social media. The og:image tag specifies which image Facebook, LinkedIn, and other platforms display.

# Open Graph image tags:
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Description of the image">

# Twitter Card tags:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/twitter-image.jpg">

# Social image specifications:
- Facebook/LinkedIn: 1200 x 630 px
- Twitter: 1200 x 600 px (summary_large_image)
- Pinterest: 1000 x 1500 px
- File size: under 8MB
- Format: JPEG or PNG

9 Create and Submit an Image Sitemap

An image sitemap helps Google discover images that might not be found through normal crawling, including images loaded via JavaScript or embedded in video content.

10 Use figure/figcaption for Contextual Images

The HTML figure and figcaption elements provide semantic context for images. They tell search engines the image and its caption are related, providing additional context beyond alt text.

11 Avoid Embedding Text in Images

Text embedded in images (infographics, screenshots of text) cannot be read by search engines or screen readers. Use actual HTML text whenever possible, and provide text alternatives for infographics.

12 Add Image Title Attribute for Tooltips

The title attribute creates a tooltip when users hover over the image. While it has minimal SEO impact, it provides additional context and improves user experience.

13 Use AVIF as Progressive Enhancement

AVIF offers 50% better compression than JPEG, but browser support is slightly behind WebP. Use the picture element to serve AVIF to supported browsers with WebP fallback.

14 Implement ImageObject Schema for Key Images

ImageObject schema provides structured metadata about your images. Use it for hero images, product photos, and infographics to help search engines understand image context.

15 Remove EXIF Data to Reduce File Size

EXIF data (camera settings, GPS coordinates, date taken) can add 20-100KB to image files. Strip this data during compression to reduce file size without affecting visual quality.

16 Use SVG for Icons and Logos

SVG (Scalable Vector Graphics) is ideal for icons, logos, and simple graphics. SVGs are tiny in file size, scale to any resolution without quality loss, and can be styled with CSS.

17 Optimize Image Delivery with CDN

A Content Delivery Network (CDN) serves images from servers closest to the user, reducing latency. Many CDNs also offer automatic format conversion, compression, and resizing.

18 Test with Google PageSpeed Insights

Use PageSpeed Insights to identify image-related performance issues. It will flag oversized images, missing dimensions, and images that should use lazy loading.