Feature: Set up media handling for blogs

Set up media handling for blogs

This is a sub-issue of #15

Overview

Establish a robust system for managing and displaying media assets (images, diagrams, etc.) within blog posts.

Tasks

• Create a dedicated /public/images/blogs directory for storing blog media assets
• Implement a standardized naming convention for media files
• Define guidelines for image formats, dimensions, and file sizes
• Set up responsive image handling using modern HTML techniques
• Create utility functions for optimizing images during build time
• Implement fallback solutions for missing images
• Add support for image captions and alt text in Markdown

Technical Details

• Configure image optimization tools for production builds
• Implement lazy loading for images to improve performance
• Establish a consistent path structure for referencing media in Markdown files
• Create examples demonstrating proper media inclusion in blog posts

Definition of Done

• Media directory structure is established
• Images render correctly in blog posts
• Responsive images work across different screen sizes
• Documentation includes clear instructions for handling media

Start by reviewing the proposed /public/images/blogs directory and the existing Markdown file structure for blog media references. Identify the build-time image optimization entry point and any existing image-rendering utilities before defining the media conventions. Done means blog images render responsively with captions, alt text, lazy loading, fallbacks, and documented usage examples.