Why Image Optimization Matters
Images typically account for 40-60% of a web page's total size, making them the single biggest opportunity for improving page speed. Unoptimized images slow down your site, hurt Core Web Vitals, and frustrate users. Beyond performance, properly optimized images can also rank in Google Images — a significant traffic source that many sites overlook.
Alt Text: The Foundation of Image SEO
Alt text (alternative text) is an HTML attribute that describes an image's content. It serves three critical functions:
- Accessibility — Screen readers read alt text aloud, allowing visually impaired users to understand image content.
- SEO signal — Search engines can't "see" images. Alt text tells them what an image depicts, contributing to page relevance.
- Fallback — If an image fails to load, the alt text is displayed in its place.
Writing Effective Alt Text
- Be descriptive and specific — "Golden retriever playing fetch in a park" is far better than "dog" or "image."
- Include keywords naturally — If relevant, incorporate your target keyword, but don't force it. "SEO audit dashboard showing site health score" is natural if the image actually shows that.
- Keep it concise — Aim for 125 characters or fewer. Screen readers may truncate longer alt text.
- Don't start with "image of" or "picture of" — Screen readers already announce it as an image.
- Leave decorative images empty — Purely decorative images (borders, spacers) should have empty alt attributes (
alt="") so screen readers skip them.
File Naming
Image file names are another SEO signal. Rename files before uploading:
- Bad:
IMG_20260315_001.jpg - Good:
blue-running-shoes-side-view.jpg
Use hyphens between words (not underscores) and keep names descriptive but concise.
Image Compression
Compression reduces file size without significant quality loss. Two types:
- Lossy compression — Removes some image data permanently. JPEG and WebP use lossy compression. Quality settings of 75-85% typically provide the best size-to-quality ratio.
- Lossless compression — Reduces file size without any quality loss. PNG uses lossless compression. Best for graphics, logos, and images with text.
Aim to keep most images under 200KB. Hero images can be larger but should rarely exceed 500KB.
Modern Image Formats
- WebP — Developed by Google, WebP provides 25-35% smaller files than JPEG at equivalent quality. Supported by all modern browsers.
- AVIF — Even better compression than WebP (up to 50% smaller than JPEG), but slower to encode and not yet supported by all browsers.
- JPEG — The standard for photographs. Still a solid choice when WebP isn't an option.
- PNG — Best for graphics, logos, and images requiring transparency.
- SVG — Vector format ideal for icons, logos, and simple illustrations. Infinitely scalable with tiny file sizes.
Use the <picture> element to serve modern formats with JPEG/PNG fallbacks:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" width="800" height="600">
</picture>Responsive Images
Don't serve a 2000px-wide image to a 400px-wide mobile screen. Use the srcset attribute to provide multiple sizes and let the browser choose the most appropriate one:
<img srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
src="image-800.jpg"
alt="Description">Lazy Loading
Lazy loading defers the loading of off-screen images until the user scrolls near them. This dramatically improves initial page load time.
Native lazy loading is now supported by all modern browsers:
<img src="image.jpg" alt="Description" loading="lazy" width="800" height="600">Don't lazy-load above-the-fold images (like your hero image) — those should load immediately.
Preventing Layout Shifts
Always include width and height attributes on images to prevent Cumulative Layout Shift (CLS). When the browser knows an image's dimensions before it loads, it can reserve the right amount of space.
Image Sitemaps
Include images in your XML sitemap to help search engines discover them, especially if they're loaded dynamically via JavaScript.
How AI SEO Powered by CGMIMM Helps
AI SEO powered by CGMIMM scans every image on your site and flags those missing alt text, using overly generic alt text, or missing explicit dimensions. The AI Image Optimizer identifies oversized images, recommends compression levels, and spots opportunities to convert to modern formats. All image issues are included in your prioritized fix list so you can systematically improve your image SEO site-wide.