Image Optimization
Bildoptimierung (Web-Performance)
Der Prozess der Reduzierung von Bilddateigrößen auf das kleinstmögliche Maß ohne inakzeptablen visuellen Qualitätsverlust, zur Verbesserung der Seitenladegeschwindigkeit, Reduzierung des Bandbreitenverbrauchs und Steigerung des Suchmaschinenrankings.
Technisches Detail
Eine Optimierungspipeline umfasst: Formatauswahl (AVIF > WebP > JPEG für Fotos; SVG > WebP > PNG für Grafiken), angemessene Dimensionen (2x für Retina bereitstellen, nie größer), Qualitätseinstellung (JPEG 75-85, WebP 75-80 für die meisten Fotos), Metadaten-Entfernung (EXIF, ICC-Profile nicht für Web benötigt), progressives/interlaced Encoding für wahrgenommene Performance und Komprimierungstools (MozJPEG, oxipng, cwebp, avifenc). Das HTML-
Beispiel
```javascript
// Image compression via Canvas
canvas.toBlob(
blob => console.log(`Size: ${(blob.size/1024).toFixed(0)} KB`),
'image/jpeg',
0.8 // quality: 0.0 (smallest) to 1.0 (best)
);
// WebP output (25-34% smaller than JPEG)
canvas.toBlob(cb, 'image/webp', 0.8);
```