Image SEO: Alt Text, Filenames, and Compression
Images generate significant search traffic through Google Images and enhance page relevance signals. Optimizing alt text, filenames, and compression improves both accessibility and rankings.
Key Takeaways
- Google Images drives approximately 22% of all web searches.
- Alt text serves two purposes: it describes the image for visually impaired users (accessibility) and provides context for search engines.
- Search engines use filenames as a relevance signal.
- Use `srcset` and `sizes` attributes to serve appropriately sized images for each device:
- Add `loading="lazy"` to below-the-fold images.
字数统计
统计字数、字符数、句子数和段落数。
Why Image SEO Matters
Google Images drives approximately 22% of all web searches. Properly optimized images also enhance the page's topical relevance, improving organic rankings for the page itself.
Alt Text Best Practices
Alt text serves two purposes: it describes the image for visually impaired users (accessibility) and provides context for search engines.
| Do | Don't |
|---|---|
| Describe the image accurately | Start with 'image of' or 'photo of' |
| Include relevant keywords naturally | Stuff keywords unnaturally |
| Keep under 125 characters | Leave alt text empty on informative images |
| Leave decorative images alt="" | Add alt text to purely decorative images |
Good example: alt="Golden retriever puppy playing fetch in a park"
Bad example: alt="dog puppy pet animal cute buy dog food cheap"
Filename Optimization
Search engines use filenames as a relevance signal. Before uploading:
- Use descriptive names:
golden-retriever-puppy.webpnotIMG_4523.jpg - Separate words with hyphens
- Use lowercase letters only
- Include the primary keyword
Compression and Format
| Format | Best For | Compression |
|---|---|---|
| WebP | Photos and illustrations | 25-34% smaller than JPEG |
| AVIF | High-quality photos | 30-50% smaller than JPEG |
| SVG | Icons and logos | Infinitely scalable |
| PNG | Screenshots with text | Lossless, larger files |
Responsive Images
Use srcset and sizes attributes to serve appropriately sized images for each device:
Lazy Loading
Add loading="lazy" to below-the-fold images. Never lazy-load the LCP image (usually the hero image) as it delays the largest contentful paint.