Bildformate verstehen
Bilder machen den Großteil des Web-Traffics aus. Das falsche Format kann Websites verlangsamen. Hier sind die gängigsten Formate im Überblick.
1. JPEG (Joint Photographic Experts Group)
JPEG ist das kompatibelste Format für Fotos. Es verwendet verlustbehaftete Komprimierung, um kleine Dateien zu erzielen. Keine Transparenz oder Animationen.
2. PNG (Portable Network Graphics)
PNG ist ein verlustfreies Format. Es unterstützt Transparenz (Alpha-Kanal) und eignet sich hervorragend für Logos und Grafiken.
3. WebP (Google Web Picture)
WebP ist das moderne Format für das Web. Es bietet Komprimierung mit und ohne Verlust, Transparenz sowie Animation und ist 25-35 % kleiner als JPEG/PNG.
4. SVG (Scalable Vector Graphics)
SVG basiert auf mathematischen Vektoren. Es kann ohne Qualitätsverlust unendlich skaliert werden - ideal für Logos und Icons.
5. GIF (Graphics Interchange Format)
GIF ist ein älteres Format für einfache Animationen mit 256 Farben. Für moderne Web-Animationen wird WebP oder Video empfohlen.
Vergleichstabelle
| Format | Typ | Komprimierung | Transparenz | Animation | Bester Einsatzzweck |
|---|---|---|---|---|---|
| JPEG | Raster | Verlustbehaftet | ❌ Nein | ❌ Nein | Fotos & komplexe Bilder |
| PNG | Raster | Verlustfrei | ✅ Ja | ❌ Nein | Logos, Text, transparente Grafiken |
| WebP | Raster | Beide | ✅ Ja | ✅ Ja | Allgemeine Web-Grafiken |
| SVG | Vektor | Verlustfrei | ✅ Ja | ✅ Ja | Icons, Logos, Vektorzeichnungen |
| GIF | Raster | Verlustfrei | ✅ Ja (1-Bit) | ✅ Ja | Einfache animierte Memes |