Files

T

mw 16a068a8dd Add renamed docs, backup, and Gitea workflow

2025-12-27 17:42:06 +00:00

4.5 KiB

Raw Permalink Blame History

title, date, author, status, confidentiality

title	date	author	status	confidentiality
Team Image Optimization Workflow (INTERNAL)	2025-11-09	Development Team	Active	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):

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:

magick input.jpg -quality 85 output.webp

Quality 85: Matches JPEG quality for consistency
Automatically applies optimal WebP encoding

AVIF Conversion:

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:

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:

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:

![Brenda Alesi](../assets/images/team/brenda-alesi.jpg){ .team-member-image }

After:

<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

# 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):

Try AVIF first (best compression) → 90% browser support
Fall back to WebP if AVIF unsupported → 97% browser support
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

Batch generate WebP for all 24 remaining team members
Update all team/*.md files with picture tags
Verify build and visual quality
Document learnings in .clinerules
Update PR #179 with improvements

References

Last Updated: 2025-11-09
Version: 1.0

4.5 KiB Raw Permalink Blame History