🖼️ Image Guidelines & Standards

Comprehensive image management, optimization, and quality standards for Mushroom Knowledge Hub

📋 Overview

Images are critical for mushroom identification, education, and user engagement. This guide ensures all images meet professional quality, performance, and accessibility standards.

🎯 Image Types & Purposes

Species Documentation

  • Purpose: Identification
  • Quality: High-resolution
  • Colors: Accurate, true-to-life
  • Format: JPEG, WebP
  • Size: 1200-2400px wide

Hero Images

  • Purpose: Visual impact
  • Quality: Premium
  • Colors: Vibrant, engaging
  • Format: WebP with JPEG fallback
  • Size: 1920px wide

Thumbnails

  • Purpose: Navigation, grids
  • Quality: Optimized
  • Colors: Consistent
  • Format: WebP
  • Size: 400-600px wide

Diagrams/Infographics

  • Purpose: Education
  • Quality: Text must be legible
  • Colors: Brand-aligned
  • Format: SVG preferred, PNG backup
  • Size: Scalable

📐 Size & Format Standards

Use Case Dimensions Format Quality Max File Size
Hero/Banner 1920x1080px WebP + JPEG 80-85% 200 KB
Featured Image 1200x800px WebP + JPEG 80% 150 KB
Content Image 800-1000px wide WebP + JPEG 75-80% 100 KB
Thumbnail 400x400px WebP 70% 30 KB
Icon/Logo Various SVG, PNG Lossless 20 KB
Open Graph 1200x630px JPEG 80% 150 KB

📱 Responsive Images Strategy

Serve multiple sizes for different devices:

  • Mobile: 400-800px wide
  • Tablet: 800-1200px wide
  • Desktop: 1200-1920px wide
  • Retina: 2x versions for high-DPI screens

🎨 Color & Quality Standards

Color Space

  • Web Display: sRGB (standard)
  • Print (if needed): Adobe RGB or CMYK
  • Never: ProPhoto RGB for web (colors won't display correctly)

Color Accuracy for Species Photos

  • ✅ Use gray card for white balance during photo shoot
  • ✅ Minimal saturation adjustment (-5 to +10%)
  • ✅ Consistent lighting conditions for comparison galleries
  • ❌ Never change hue (alters identification characteristics)
  • ❌ Avoid heavy filters or Instagram-style effects

Image Quality Checklist

Criterion Standard How to Check
Sharpness Critical details visible at 100% zoom Zoom to actual pixels, check focus
Noise Minimal, not distracting Check shadows at 100%
Exposure No clipped highlights/shadows Histogram should not touch edges
Color Cast Neutral whites/grays Sample with eyedropper
Compression No visible artifacts Check edges, solid colors

⚡ Optimization Standards

File Format Selection

Format Best For Pros Cons
WebP All photos (modern browsers) 25-35% smaller than JPEG, supports transparency Limited old browser support
JPEG Photos, fallback Universal support, good compression Lossy, no transparency
PNG Logos, illustrations with transparency Lossless, transparency support Large file sizes
SVG Icons, logos, diagrams Infinitely scalable, tiny files Not suitable for photos
AVIF Future-proof (emerging) 50% better compression than WebP Limited browser support currently

HTML Implementation

<picture>
    <source srcset="mushroom.avif" type="image/avif">
    <source srcset="mushroom.webp" type="image/webp">
    <img src="mushroom.jpg" alt="Psilocybe cubensis showing golden cap and white stem" 
         width="800" height="600" loading="lazy">
</picture>

Compression Tools

  • ImageOptim: Mac batch processing
  • Squoosh: Web-based, great for WebP conversion
  • TinyPNG: Excellent smart compression
  • Sharp (Node.js): Automated pipeline processing
  • Cloudflare Polish: Automatic CDN optimization

♿ Accessibility Requirements

Alt Text Standards

  • Be Specific: "Psilocybe cubensis showing golden cap and white stem" not "mushroom"
  • Identification Details: Color, size, habitat context for species photos
  • Length: 100-150 characters optimal
  • No "image of" or "picture of": Screen readers announce it's an image
  • Decorative Images: Use alt="" (empty, not missing)

Alt Text Examples

Image Type ❌ Poor Alt Text ✅ Good Alt Text
Species Photo "Mushroom" "Psilocybe cubensis Golden Teacher strain showing golden-caramel cap, white stem, and dark purple-brown gills"
Diagram "Mushroom parts" "Labeled diagram of mushroom anatomy showing cap, gills, annulus, stem, and mycelium"
Graph "Chart" "Line graph showing psilocybin content peaks at 2-4 hours after ingestion"
Decorative "Background pattern" (empty alt="")

Other Accessibility Considerations

  • Color Contrast: Text overlays must meet WCAG AA (4.5:1 ratio)
  • Text in Images: Avoid when possible; if needed, include in alt text
  • Animations: Respect prefers-reduced-motion
  • Loading States: Show skeleton/placeholder while loading

🚀 Performance Optimization

Lazy Loading

<img src="mushroom.jpg" alt="..." loading="lazy">

Load images only when they enter viewport. Use on all below-the-fold images.

Responsive Images

<img srcset="mushroom-400.jpg 400w,
             mushroom-800.jpg 800w,
             mushroom-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1000px) 800px,
            1200px"
     src="mushroom-800.jpg" alt="...">

Performance Targets

Metric Target Critical For
Largest Contentful Paint (LCP) < 2.5s Hero images, above-fold content
Cumulative Layout Shift (CLS) < 0.1 Always set width/height attributes
Total Page Weight < 1 MB Mobile users, slow connections
Image Load Time < 1s Above-fold images

📝 Naming Conventions

File Naming Structure

  • Format: purpose-species-description-size.ext
  • Example: species-psilocybe-cubensis-golden-cap-800w.webp
  • Guidelines:
    • Lowercase only
    • Hyphens (not underscores or spaces)
    • Descriptive but concise
    • Include size suffix (400w, 800w, 1200w)
    • SEO-friendly keywords

✅ Quality Assurance Checklist

Before Publishing Any Image:
  • ✅ Meets size specifications for use case
  • ✅ Optimized and compressed (check file size)
  • ✅ WebP format created (with JPEG fallback)
  • ✅ Descriptive alt text written
  • ✅ Width and height attributes set
  • ✅ Filename follows naming convention
  • ✅ Image is sharp and properly exposed
  • ✅ Colors are accurate (for species photos)
  • ✅ No compression artifacts visible
  • ✅ Lazy loading attribute added (if below fold)