Photography Images Directory

This directory contains the high-quality images for photography stories.

Structure

docs/assets/images/photography/
├── README.md                    # This file
├── two-views-one-branch.jpg     # Image for "Two Views, One Branch" story
└── [story-name].jpg             # Future story images

Image Guidelines

File Naming Convention:

• Use lowercase with hyphens: story-title-name.jpg
• Match the story page filename (without .md)
• Example: two-views-one-branch.md → two-views-one-branch.jpg

Image Specifications:

• Format: JPG or PNG
• Quality: High resolution (minimum 1200px width)
• Aspect Ratio: Flexible, but 16:9 or 4:3 work well
• File Size: Optimize for web (aim for under 500KB)
• Alt Text: Always include descriptive alt text in markdown

Usage in Stories:

Hero Image (in story page):

<div class="story-hero-image">
<img src="../assets/images/photography/story-name.jpg" alt="Descriptive alt text" loading="lazy">
</div>

Thumbnail (in photography index):

<div class="story-thumbnail">
<img src="assets/images/photography/story-name.jpg" alt="Descriptive alt text" loading="lazy">
</div>

Adding New Images

1. Save image to this directory with proper naming
2. Update story page with hero image reference
3. Update photography index with thumbnail reference
4. Add to navigation in mkdocs.yml
5. Test locally before committing

Image Optimization Tips

• Use tools like TinyPNG to compress
• Consider WebP format for better compression (with JPG fallback)
• Always include loading="lazy" for performance
• Test images in both light and dark modes

---

This structure ensures fast loading, consistent organization, and easy maintenance of your photography collection.