Add renamed docs, backup, and Gitea workflow
This commit is contained in:
@@ -0,0 +1,179 @@
|
||||
---
|
||||
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
|
||||
{ .team-member-image }
|
||||
```
|
||||
|
||||
**After:**
|
||||
```html
|
||||
<picture>
|
||||
<source srcset="../assets/images/team/brenda-alesi.avif" type="image/avif">
|
||||
<source srcset="../assets/images/team/brenda-alesi.webp" type="image/webp">
|
||||
<img src="../assets/images/team/brenda-alesi.jpg" alt="Brenda Alesi" class="team-member-image">
|
||||
</picture>
|
||||
```
|
||||
|
||||
### Step 3: Verify Build Output
|
||||
|
||||
```bash
|
||||
# Rebuild site
|
||||
./mkdocs.sh
|
||||
docker exec nostalgic_bohr mkdocs build --clean
|
||||
|
||||
# Verify picture tags in HTML
|
||||
grep -A3 "<picture>" site/team/*.html | head -20
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Browser Fallback Strategy
|
||||
|
||||
**Modern browsers (2025):**
|
||||
1. Try AVIF first (best compression) → 90% browser support
|
||||
2. Fall back to WebP if AVIF unsupported → 97% browser support
|
||||
3. Use JPEG as universal fallback → 100% support
|
||||
|
||||
**Performance benefits:**
|
||||
- Mobile users: Save 86% bandwidth (AVIF)
|
||||
- Desktop users: Save 17-86% bandwidth (WebP/AVIF)
|
||||
- Legacy browsers: Works perfectly (JPEG fallback)
|
||||
|
||||
---
|
||||
|
||||
## Quality Verification Checklist
|
||||
|
||||
Before committing optimized images:
|
||||
|
||||
- [ ] Visual inspection: No visible artifacts
|
||||
- [ ] File size: <50KB per image (target)
|
||||
- [ ] All 3 formats generated (AVIF, WebP, JPEG)
|
||||
- [ ] Picture tag syntax valid in markdown
|
||||
- [ ] Build successful without errors
|
||||
- [ ] HTML output contains all 3 sources
|
||||
|
||||
---
|
||||
|
||||
## Current Status (2025-11-09)
|
||||
|
||||
**Completed:**
|
||||
- ✅ Brenda Alesi - 3 formats (AVIF: 4.9K, WebP: 29K, JPEG: 35K)
|
||||
|
||||
**Pending:**
|
||||
- ⏳ 24 team members - Need WebP generation
|
||||
- amira, bastian, bea, catgpt, denopus, eddi, fenix, franzi
|
||||
- gunta, jane, john, justus, lara, lenna, leon, lojban
|
||||
- luna, marco, olu, team, theo, tim, wolfgang, zuri
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. Batch generate WebP for all 24 remaining team members
|
||||
2. Update all team/*.md files with picture tags
|
||||
3. Verify build and visual quality
|
||||
4. Document learnings in .clinerules
|
||||
5. Update PR #179 with improvements
|
||||
|
||||
---
|
||||
|
||||
## References
|
||||
|
||||
- [ImageMagick Documentation](https://imagemagick.org/)
|
||||
- [WebP Format Specification](https://developers.google.com/speed/webp)
|
||||
- [AVIF Format Best Practices 2025](https://web.dev/articles/avif)
|
||||
- [Can I Use - Browser Support Stats](https://caniuse.com/)
|
||||
|
||||
---
|
||||
|
||||
**Last Updated:** 2025-11-09
|
||||
**Version:** 1.0
|
||||
Reference in New Issue
Block a user