--- title: "Team Image Optimization Workflow (INTERNAL)" date: 2025-11-09 author: Development Team status: Active confidentiality: Internal Use Only --- # Team Image Optimization Workflow ## Overview **Purpose:** Optimize team member profile images using modern formats (AVIF, WebP, JPEG) for maximum performance while maintaining visual quality. **Results:** 86% file size reduction (AVIF vs JPEG) with imperceptible quality loss. --- ## Compression Settings (2025 Best Practices) ### ImageMagick Commands **JPEG Optimization (Baseline):** ```bash magick input.jpg -quality 85 -sampling-factor 4:2:0 -strip output.jpg ``` - Quality 85: Sweet spot for web (perceptually lossless) - 4:2:0 sampling: Standard chroma subsampling - Strip: Remove EXIF/metadata **WebP Conversion:** ```bash magick input.jpg -quality 85 output.webp ``` - Quality 85: Matches JPEG quality for consistency - Automatically applies optimal WebP encoding **AVIF Conversion:** ```bash magick input.jpg -quality 85 output.avif ``` - Quality 85: Best compression-to-quality ratio - Achieves 80-90% size reduction vs JPEG --- ## File Size Benchmarks (Brenda Alesi Example) | Format | Size | vs JPEG | vs Original | Browser Support | |--------|------|---------|-------------|-----------------| | **Original JPEG** | 2.5MB | - | - | - | | **Optimized JPEG** | 35K | Baseline | 98.6% smaller | ✅ Universal | | **WebP** | 29K | 17% smaller | 98.8% smaller | ✅ 97% (2025) | | **AVIF** | 4.9K | 86% smaller | 99.8% smaller | ✅ 90% (2025) | **Winner:** AVIF provides 86% size reduction vs optimized JPEG with no visible quality loss. --- ## Batch Processing Workflow ### Step 1: Generate Missing Formats **WebP batch conversion:** ```bash cd docs/assets/images/team for file in *-alesi.jpg; do base="${file%.jpg}" if [ ! -f "${base}.webp" ]; then echo "Converting $file to WebP..." magick "$file" -quality 85 "${base}.webp" fi done ``` **AVIF batch conversion:** ```bash cd docs/assets/images/team for file in *-alesi.jpg; do base="${file%.jpg}" if [ ! -f "${base}.avif" ]; then echo "Converting $file to AVIF..." magick "$file" -quality 85 "${base}.avif" fi done ``` ### Step 2: Update Markdown Files **Replace all team member image references with 3-format picture tag:** **Before:** ```markdown ![Brenda Alesi](../assets/images/team/brenda-alesi.jpg){ .team-member-image } ``` **After:** ```html

``` ### Step 3: Verify Build Output ```bash # Rebuild site ./mkdocs.sh docker exec nostalgic_bohr mkdocs build --clean # Verify picture tags in HTML grep -A3 "