Image SEO sits at the intersection of performance optimization and search visibility. Images are typically the largest assets on a page — improperly sized or formatted images are a leading cause of poor Largest Contentful Paint scores. At the same time, images are independently searchable through Google Images, which generates meaningful traffic for visual-intent queries. Optimizing images addresses both dimensions simultaneously.
File Format Selection
Choosing the right image format is the highest-leverage image optimization decision:
WebP: Google’s open format, supported by all modern browsers. Compresses 25–35% better than JPEG at comparable quality for photographs. Smaller file sizes, same visual quality. Default choice for photographic content.
AVIF: Even more efficient than WebP (30–40% smaller than WebP at comparable quality). Browser support is strong but not universal — use with WebP fallback via <picture>. Best for high-quality photography where compression matters most.
JPEG: Still appropriate for photographic images when legacy browser support is needed. Use progressive JPEGs for better perceived load performance on slow connections.
PNG: Use only for images requiring transparency or exact colors (logos, icons, screenshots with text). PNGs are larger than WebP/JPEG for photographs.
SVG: Vector format for logos, icons, and illustrations. Infinitely scalable with no quality loss. Smallest file size for line art and simple graphics. Inline SVG can be styled via CSS.
Serving modern formats with fallback:
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/hero.jpg" alt="Description of image" width="1200" height="800">
</picture>
This serves AVIF to browsers that support it, WebP to browsers that support WebP, and falls back to JPEG for older browsers — with no visual difference and maximum compression benefit.
Image Dimensions and Responsive Images
Serving images at the correct size for the display context is critical for performance:
Always specify width and height attributes: This allows browsers to reserve layout space before the image loads, preventing Cumulative Layout Shift (CLS). The aspect ratio is preserved even if CSS changes the display size.
Use srcset for responsive images: The srcset attribute tells the browser which image sizes are available, letting it choose the appropriate size based on the viewport and device pixel ratio:
<img
src="/image-800.webp"
srcset="/image-400.webp 400w, /image-800.webp 800w, /image-1600.webp 1600w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="Description"
width="800"
height="600"
>
A mobile user with a 375px screen receives the 400px image rather than the 1600px image — 4x fewer bytes downloaded.
Alt Text for SEO and Accessibility
Alt text serves two purposes: accessibility (screen readers announce it) and SEO (Google uses it to understand image content).
Alt text best practices:
- Describe what the image shows, specifically and accurately
- Include relevant keywords naturally — don’t keyword-stuff alt text
- Keep it under 125 characters (screen reader limits)
- Don’t start with “Image of” or “Photo of” — it’s redundant
- For decorative images (purely visual embellishment, no informational content), use
alt=""
Examples:
Bad: alt="seo"
Bad: alt="image of seo tools dashboard showing keywords"
Good: alt="SEO tools dashboard displaying keyword rankings for organic search"
For Google Images, descriptive alt text directly determines whether the image ranks for relevant queries. Google also uses context — surrounding text, page title, and page content — to supplement alt text for image understanding.
Image Lazy Loading
The loading="lazy" attribute defers loading of images until they’re near the viewport, reducing initial page weight:
<img src="/blog-thumbnail.webp" alt="Blog post thumbnail" loading="lazy" width="400" height="300">
Critical exception: Never apply lazy loading to the LCP (Largest Contentful Paint) image — typically the hero image or above-the-fold featured image. Lazy loading the LCP image delays it from loading, which increases LCP time and hurts Core Web Vitals.
Rule: lazy load all images except the one or two that appear above the fold on initial load.
Image Sitemaps
A standard XML sitemap lists page URLs. An image sitemap extends this to include image metadata, helping Google discover images embedded on pages:
<url>
<loc>https://example.com/blog/technical-seo-guide/</loc>
<image:image>
<image:loc>https://example.com/images/technical-seo-diagram.webp</image:loc>
<image:title>Technical SEO Architecture Diagram</image:title>
<image:caption>Diagram showing the relationship between crawling, indexing, and ranking</image:caption>
</image:image>
</url>
Submit image sitemaps through Google Search Console. This is most valuable for sites with many important images that might not be discoverable through Googlebot’s standard HTML crawl (JavaScript-rendered image galleries, dynamically loaded images).
ImageObject Structured Data
For articles, recipes, products, or any page with a primary image, adding ImageObject schema explicitly to the page’s JSON-LD gives Google structured information about the image:
{
"@type": "ImageObject",
"contentUrl": "https://example.com/images/hero.webp",
"description": "Diagram of a technical SEO crawl workflow",
"name": "Technical SEO Crawl Workflow",
"width": 1200,
"height": 800
}
This is often nested within Article, Product, or Recipe schema rather than standalone.
Google Images Optimization
Google Images receives significant search volume for visual-intent queries — product photos, infographics, diagrams, recipes, and how-to content.
Signals that influence Google Images ranking:
- Page context: The page the image is on must be relevant to the image’s topic
- Alt text: Primary text signal for image content
- Filename: Descriptive filenames (
crawl-budget-diagram.webp) provide additional signal vs.IMG_20260516.webp - Surrounding text: Content near the image on the page
- Page quality: High-quality page signals translate to better image search visibility
- Image freshness: Recently added images for trending queries can rank quickly in Google Images
For sites where Google Images traffic is valuable (e-commerce, food, travel, design), audit top-traffic images in Google Search Console under the “Search type: Image” filter to understand what’s already working and what queries could be targeted.
CDN and Image Delivery
Image delivery speed affects LCP directly. Recommendations:
- Serve images from a CDN with edge nodes close to users
- Enable HTTP/2 or HTTP/3 for multiplexed image requests
- Set appropriate cache headers for images (long TTL for static images, shorter for updated images)
- Use a CDN that supports on-the-fly image optimization (resize/format conversion at the CDN edge) to simplify serving format-appropriate images
Image CDN services (Cloudflare Images, Imgix, Cloudinary) handle format conversion, resizing, and delivery optimization automatically, abstracting the <picture> element complexity.