Image Optimization

Objectives

• Keep pages visually rich without harming performance or accessibility.
• Prevent layout shifts with defined dimensions and aspect ratios.
• Deliver responsive, compressed assets with ethical sourcing and credit.

Format Strategy

• Preferred: AVIF (where supported), WebP as fallback, JPEG for photos, PNG only for UI or transparency.
• SVG: use for icons and diagrams; inline when small for fewer requests.
• GIF: avoid; use MP4/WebM or CSS animation for motion, respecting reduced-motion settings.

Responsive Delivery

1. Create multiple widths (e.g., 480, 768, 1200) with srcset and sizes.
2. Add loading="lazy" for below-the-fold images; keep hero images eager.
3. Specify width/height attributes or CSS aspect-ratio to eliminate CLS.
4. Use descriptive alt text and captions to support accessibility and context.

Compression Guidelines

• Target 60-75% quality for JPEG/WebP; experiment for balance.
• Strip metadata unless attribution requires it; store credits separately.
• Cap hero images to realistic display sizes; avoid multi-megapixel assets.
• Use consistent color profiles (sRGB) to avoid rendering differences.

Ethical & Safety Considerations

Use images that clearly distinguish edible species from toxic lookalikes, label them, and avoid glamorizing risky behavior. Include warnings when images show potentially dangerous practices. Do not use third-party photos without permission or appropriate licenses.

Implementation Steps

1. Batch convert originals to AVIF/WebP with dimension caps.
2. Generate responsive variants and update HTML templates with picture elements where needed.
3. Audit existing pages for missing alt text or incorrect dimensions.
4. Cache images with immutable headers and hashed filenames; purge on updates.
5. Test across light/dark backgrounds to ensure readability of overlays or text.

Quality Checklist

• No layout shift when images load.
• ALT text describes content and intent, not “image of”.
• Appropriate credit/caption when required by license.
• Images do not overshadow safety messaging; avoid sensationalism.
• Lazy loading applied except for critical above-the-fold imagery.

FAQ

1. Should we embed EXIF data? No; strip by default to reduce weight and protect privacy.
2. When to use PNG? Only for transparency or sharp UI elements where compression artifacts would be noticeable.
3. How to handle diagrams? Prefer SVG; ensure text is accessible and contrast-compliant.
4. What about animated content? Use short MP4/WebM clips with controls; respect prefers-reduced-motion.
5. Do we need CDNs? Recommended for global delivery; ensure caching headers and compression are enabled.
6. How to credit photographers? Include a caption or dedicated credits section; avoid embedding credits into filenames.
7. What if an image misleads? Replace or annotate immediately; prioritize safety and accuracy.
8. How often to audit? Quarterly for performance and accessibility; after major content launches.