Wie reduziere ich die Dateigrosse eines Bildes ohne sichtbaren Qualitatsverlust?
Bildkomprimierung gibt es in zwei Formen:
- Verlustfrei (lossless) — entfernt Metadaten und redundante Daten, ohne Pixelwerte zu verandern. Das Bild ist nach der Dekomprimierung bit-fur-bit identisch.
- Verlustbehaftet (lossy) — entfernt Pixeldaten, die das menschliche Auge kaum wahrnimmt. Kleinere Dateigrosse, aber bei aggressiven Einstellungen mit Qualitatsverlust.
Fur Webbilder ist ein JPEG mit 70–85% Qualitat bei normaler Bildgrosse oft vom Original nicht zu unterscheiden, aber 3 bis 5 Mal kleiner. PNG-Komprimierung ist immer verlustfrei, kann aber durch das Entfernen von Metadaten dennoch deutlich reduziert werden.
Praktische Zielgrossen:
- Hero-Bilder: unter 200KB
- Inhaltsbilder: unter 100KB
- Vorschaubilder: unter 30KB
Der Bild-Kompressor verarbeitet JPEG, PNG und WebP mit einstellbarer Qualitat — alles lauft im Browser, keine Datei wird auf einen Server hochgeladen.
Welches Bildformat sollte ich fur das Web verwenden?
Das richtige Format hangt vom Bildinhalt ab:
| Format | Am besten fur | Transparenz | Animation |
|---|---|---|---|
| JPEG | Fotos, komplexe Verlaуfe | Nein | Nein |
| PNG | Screenshots, Logos, Text auf Bildern | Ja | Nein |
| WebP | Moderner Ersatz fur JPEG und PNG | Ja | Ja |
| SVG | Icons, Illustrationen, Logos | Ja | Ja |
| GIF | Einfache Animationen (weitgehend durch WebP ersetzt) | Ja | Ja |
Der Format-Konverter konvertiert zwischen JPEG, PNG, WebP und GIF im Browser — nutzlich fur Batch-Konvertierungen vor dem Deployment.
Wie optimiere ich eine SVG-Datei?
SVG-Dateien, die aus Design-Tools exportiert werden (Figma, Illustrator, Inkscape), enthalten erhebliche Mengen unnотiger Daten:
- Editor-Metadaten und Kommentare
- Versteckte Ebenen und unsichtbare Elemente
- Unnottiges Gruppen-Verschachteln
- Redundante Attribute und Standardwerte
- Nicht optimierte Pfaddaten (ubermassige Dezimalprazision, redundante Befehle)
Ein typisches Figma-SVG kann ohne jegliche visuelle Anderung um 30–70% reduziert werden. Kleinere SVGs laden schneller, rendern schneller und sind im Code einfacher zu warten.
Der SVG-Optimierer fuhrt dieselben Transformationen wie die SVGO-Bibliothek durch — SVG einfugen und eine saubere, minimale Version fur die Produktion zuruckerhalten.
Zusammenfassung
Bildgewicht ist einer der größten Faktoren fur langsame Seitenladeszeiten. Komprimierung reduziert die Dateigrosse innerhalb eines Formats, Formatkonvertierung zu WebP reduziert sie weiter, und SVG-Optimierung entfernt Editor-Reste aus Vektordateien. Die drei Werkzeuge laufen vollstandig im Browser — ohne Konto, ohne Server-Upload.