🖼️ Image SEO Guide

Optimize your images for search engines and performance

📝

Alt Text

Descriptive text that explains what an image shows for accessibility and SEO.

📁

File Naming

Use descriptive, keyword-rich file names separated by hyphens.

📦

Compression

Reduce file size while maintaining visual quality for faster loading.

📐

Dimensions

Serve appropriately sized images for different screen sizes.

📝 Alt Text Best Practices

🍄
❌ Bad
<img src="IMG_2847.jpg" alt="">

Empty alt text provides no context for screen readers or search engines. Missing opportunity for keyword optimization.

🍄
⚠️ Okay
<img src="mushroom.jpg" alt="mushroom">

Basic but not descriptive. Doesn't specify what kind of mushroom or provide useful context for the user.

🍄
✅ Good
<img src="golden-teacher-mushroom.jpg" alt="Golden Teacher psilocybin mushroom with distinctive golden cap growing in substrate">

Descriptive, includes species name, describes key visual features, and naturally incorporates relevant keywords.

✨
✅ Decorative
<img src="divider.png" alt="" role="presentation">

Decorative images that add no content value should have empty alt text and role="presentation" to be ignored by screen readers.

📁 File Naming Conventions

❌ Avoid These Names

  • IMG_2847.jpg Camera default
  • photo1.png Generic naming
  • Screen Shot 2024-01-15.png Screenshot default
  • image(1).jpg Download duplicates
  • mushroom_photo_final_v2.jpg Internal versioning
  • DSC0001.jpg DSLR default

✅ Use These Instead

  • golden-teacher-mushroom.jpg Descriptive with hyphens
  • psilocybin-dosage-chart.png Content description
  • microdosing-calendar-template.jpg Purpose-driven
  • mushroom-identification-guide.webp Topic-focused
  • lion-mane-supplement-capsules.jpg Product description
  • safe-set-setting-infographic.png Content type included

📊 Image Format Comparison

Format Best For Compression Transparency Browser Support
WebP All images (photos, graphics) Excellent ✅ Yes 96%
AVIF High-quality photos Best ✅ Yes 85%
JPEG Photos, fallback Good ❌ No 100%
PNG Graphics, logos, transparency Moderate ✅ Yes 100%
SVG Icons, logos, illustrations Scalable ✅ Yes 100%
GIF Simple animations Poor ⚠️ Limited 100%

📦 Compression Strategies

🔧 Lossy Compression

  • Best for photographs
  • Quality 80-85% usually optimal
  • Can reduce file size by 70-90%
  • Use JPEG, WebP, or AVIF
  • Check for visible artifacts

🎯 Lossless Compression

  • Best for graphics/logos
  • Maintains perfect quality
  • Typically 10-30% size reduction
  • Use PNG or WebP lossless
  • Good for images with text

📐 Responsive Images

  • Create multiple sizes (srcset)
  • Small: 480px, Medium: 768px, Large: 1200px
  • Use sizes attribute for hints
  • Let browser choose best size
  • Reduces bandwidth on mobile

⚡ Automation

  • Use build tools (Gulp, Webpack)
  • Integrate with CMS upload
  • CDN image optimization
  • Cloudinary, Imgix, or similar
  • Automate format conversion

📏 Recommended Image Sizes

Hero Images

1920×1080
Full-width headers

Content Images

800×600
In-article photos

Thumbnails

400×300
Grid previews

Social Share

1200×630
Open Graph images

File Size Target

<100KB
Per image goal

⏳ Lazy Loading Implementation

<!-- Native lazy loading (recommended) -->
<img 
    src="mushroom-guide.jpg"
    alt="Complete mushroom identification guide"
    loading="lazy"
    width="800"
    height="600"
>

<!-- Responsive images with lazy loading -->
<img 
    srcset="mushroom-400.jpg 400w,
            mushroom-800.jpg 800w,
            mushroom-1200.jpg 1200w"
    sizes="(max-width: 600px) 400px,
           (max-width: 900px) 800px,
           1200px"
    src="mushroom-800.jpg"
    alt="Psilocybe cubensis mushroom cluster"
    loading="lazy"
    decoding="async"
>
🚀

Faster Initial Load

Only loads visible images first, improving LCP

📉

Reduced Bandwidth

Images only load when user scrolls to them

🔋

Better Performance

Less strain on device resources and memory

✅

Native Support

No JavaScript required with loading="lazy"

🔗 Image Structured Data

{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://psilobase.com/images/golden-teacher.jpg",
  "name": "Golden Teacher Psilocybe cubensis",
  "description": "Mature Golden Teacher mushroom with distinctive golden cap",
  "width": "1200",
  "height": "800",
  "encodingFormat": "image/webp",
  "author": {
    "@type": "Organization",
    "name": "Psilobase"
  },
  "license": "https://creativecommons.org/licenses/by/4.0/"
}

🔧 Image Optimization Tools

🖼️

TinyPNG

Smart compression for PNG and JPEG images with minimal quality loss.

Open Tool →
🔄

Squoosh

Google's image compression app with advanced codec options.

Open Tool →
☁️

Cloudinary

Cloud-based image management with automatic optimization.

Learn More →
📊

PageSpeed Insights

Analyze image performance and get optimization suggestions.

Analyze →

✅ Image SEO Checklist

📝 Content & Accessibility

  • Descriptive alt text for all images
  • Empty alt for decorative images
  • Keywords used naturally
  • Context matches page content

📁 Technical Setup

  • Descriptive file names
  • Width/height attributes set
  • WebP format with fallbacks
  • Responsive srcset configured

⚡ Performance

  • Images compressed
  • Lazy loading enabled
  • CDN configured
  • File size under 100KB