Raster vs. Vektor: Welches Format wählen?
Lerne wann du JPG, PNG oder WebP nutzt. Wir zeigen dir die Unterschiede in Qualität, Dateigröße und Ladegeschwindigkeit — damit deine Seite schneller wird.
Warum die richtige Wahl wichtig ist
Jedes Bild auf deiner Website ist eine Entscheidung. Und diese Entscheidung beeinflusst direkt, wie schnell deine Seite lädt. Ein 5-MB-Foto braucht länger, bis es ankommt. Dein Besucher wartet. Und während er wartet, springt er möglicherweise zu deinem Konkurrenten.
Das Problem: Es gibt nicht das eine perfekte Format. JPG ist super für Fotos, aber nicht für Logos. PNG bewahrt die Qualität, kostet dafür aber mehr Speicherplatz. Und WebP? Das ist schneller, funktioniert aber nicht überall.
Lass mich dir zeigen, wie du das Richtige wählst — je nachdem, was du brauchst.
Raster vs. Vektor: Der fundamentale Unterschied
Bevor wir über einzelne Formate sprechen, musst du eine Sache verstehen: Es gibt zwei völlig unterschiedliche Arten, Bilder zu speichern.
Rasterbilder (Bitmap)
Ein Rasterbild ist wie ein Mosaik. Es besteht aus winzigen quadratischen Pixeln, die nebeneinander liegen. Jeder Pixel hat eine Farbe. Wenn du ein Foto machst — das ist ein Rasterbild. JPG, PNG, WebP, GIF — das sind alle Rasterformate.
Vorteil: Fotorealistisch. Du kannst jede Farbnuance speichern. Nachteil: Wenn du reinzoomst, siehst du die Pixel. Und je größer das Bild, desto mehr Speicherplatz braucht es.
Vektorgrafiken
Ein Vektorbild funktioniert anders. Es speichert nicht Pixel, sondern mathematische Anweisungen. „Zeichne eine rote Linie von Punkt A zu Punkt B.” Logos, Icons, Illustrationen — das sind meistens Vektorgrafiken. SVG ist das moderne Format dafür.
Vorteil: Unendlich skalierbar. Egal wie groß du es machst — es bleibt gestochen scharf. Und oft deutlich kleiner. Nachteil: Nicht für komplexe Fotos geeignet.
Die Rasterformate im Detail
JPG — Der Standard für Fotos
JPG ist überall. Das Format nutzt eine Kompressionstechnik, die Daten wegwirft, um die Dateigröße zu senken. Das klingt schlecht, ist aber clever: Dein Auge sieht den Unterschied oft gar nicht. Eine gute JPG-Datei von einem Foto ist meist nur 100–300 KB groß. Das ist extrem effizient.
Wann nutzen? Bei Fotos, Illustrationen, komplexen Bildern. Nicht nutzen bei Grafiken mit Text oder scharfen Kanten — da wird JPG matschig.
PNG — Die sichere Wahl
PNG speichert alle Daten, verliert keine Information. Das bedeutet: perfekte Qualität, aber größere Dateien. Eine PNG-Datei ist oft 3–5 mal größer als die gleiche JPG-Datei. Aber PNG hat einen riesigen Vorteil: Transparenz. Du kannst Bereiche unsichtbar machen.
Wann nutzen? Screenshots, Grafiken mit transparentem Hintergrund, Illustrationen wo Qualität wichtiger ist als Dateigröße.
WebP — Der moderne Standard
WebP ist relativ neu, aber es schlägt beide: Es komprimiert wie JPG, speichert aber Details wie PNG. Und es unterstützt Transparenz. Eine WebP-Datei ist oft 25–35 % kleiner als die gleiche JPG-Datei — bei besserer Qualität.
Das Problem: Ältere Browser kennen WebP nicht. Deshalb nutzt man es mit einem Fallback: Der Browser lädt WebP wenn möglich, sonst JPG.
SVG — Die perfekte Wahl für Grafiken
SVG ist ein Textformat. Ja, wirklich. Das bedeutet: Ein SVG-Logo ist eigentlich nur Code. „Zeichne einen roten Kreis mit 50 Pixeln Durchmesser.” Das macht SVG extrem klein. Ein Logo, das als PNG 50 KB braucht, ist als SVG oft nur 2–3 KB.
Und weil SVG mathematisch definiert ist, bleibt es immer scharf. Egal ob auf einem kleinen Smartphone-Display oder auf einem 4K-Monitor. Keine Verpixelung, keine Unschärfe.
Wann nutzen? Logos, Icons, Illustrationen, Infografiken. Nicht nutzen bei Fotos — das wäre viel zu kompliziert.
Die praktische Strategie: Welches Format wählst du wann?
Fotos & Kameras
Erste Wahl: WebP — Wenn dein Publikum moderne Browser nutzt (99 % in 2026).
Fallback: JPG — Immer als Sicherheit dabei. Nutzer mit alten Browsern bekommen JPG.
Tipp: Komprimier deine JPGs auf Qualität 80. Das spart 30 % Speicher, ohne dass es sichtbar wird.
Logos & Icons
Immer: SVG — Es gibt hier keine Debatte. SVG ist perfekt für Logos.
Es ist klein, bleibt immer scharf, und du kannst es mit CSS animieren.
Fallback für alte Browser: PNG. Aber ehrlich? Das brauchst du 2026 nicht mehr.
Screenshots & Grafiken
Erste Wahl: WebP — Genau wie Fotos.
Fallback: PNG — Falls Transparenz wichtig ist, nimm PNG.
JPG nur, wenn WebP und PNG nicht passen. Das kommt selten vor.
Transparenz nötig?
PNG oder WebP — JPG unterstützt keine Transparenz.
WebP mit Transparenz ist meist kleiner als PNG. Nutze WebP wenn möglich.
SVG ist noch besser, wenn die Grafik vektoren kann.
Schneller laden: Die Dateigröße optimieren
Das richtige Format ist nur die halbe Miete. Du musst deine Bilder auch noch komprimieren.
JPG & WebP richtig speichern
Wenn du ein JPG speicherst, frag dich: Wie viel Qualität brauche ich wirklich? Bei den meisten Bildern reichen 75–85 % völlig aus. Dein Auge sieht keinen Unterschied, aber die Dateigröße sinkt um 40 %.
WebP hat die gleiche Regel: 80 % Qualität sieht perfekt aus, kostet aber deutlich weniger Speicherplatz als JPG mit gleicher Qualität.
Responsive Images mit srcset
Warum soll ein Smartphone ein Bild laden, das für einen 27-Zoll-Monitor optimiert ist? Das ist Verschwendung. Mit srcset lädst du unterschiedliche Versionen: Kleinere Bilder für kleine Bildschirme, größere für große.
Das kann deine Ladezeit um 50 % senken. Echt.
Lazy Loading nutzen
Nicht alle Bilder auf deiner Seite müssen sofort geladen werden. Mit Lazy Loading werden Bilder erst dann geladen, wenn der Nutzer zu ihnen scrollt. Das macht deine Seite beim Laden gefühlt schneller.
Praktische Tools zum Komprimieren
Du brauchst keine teuren Programme. Diese kostenlosen Tools machen den Job genauso gut:
TinyPNG / TinyJPG
Drag & Drop deine Bilder rein, und das Tool komprimiert sie intelligent. Funktioniert online, kostenlos für bis zu 20 Bilder pro Monat.
ImageOptim (Mac) / FileOptimizer (Windows)
Lokale Software, die du installierst. Lädst deine Bilder rein, und das Programm optimiert sie ohne Qualitätsverlust.
Squoosh (Google)
Von Google entwickelt. Du siehst live, wie die Qualität sich ändert, wenn du die Kompressionsschieber anpasst. Perfekt zum Experimentieren.
FFmpeg (Kommandozeile)
Für Fortgeschrittene. Damit kannst du Bilder in Batches konvertieren und komprimieren. Vollständige Kontrolle.
Die wichtigsten Erkenntnisse zusammengefasst
Du brauchst kein Informatikstudium, um Bildformate richtig zu wählen. Die Regel ist einfach:
- Fotos? WebP (mit JPG Fallback).
- Logos & Icons? SVG.
- Grafiken mit Transparenz? WebP oder PNG.
- Ältere Browser unterstützen? Immer ein Fallback-Format dabei haben.
- Dateigröße optimieren. Qualität 75–85 % reicht völlig aus.
- Responsive Images nutzen mit srcset für unterschiedliche Bildschirmgrößen.
Das Ergebnis? Deine Website lädt schneller. Deine Besucher warten nicht. Und schnelle Websites ranken besser bei Google. Alle gewinnen.
Hinweis zur Informationalität
Dieser Artikel bietet allgemeine Informationen zur Bildoptimierung und Formatauswahl für Websites. Die Empfehlungen basieren auf Best Practices und aktuellen Standards. Spezifische Anforderungen können je nach deiner Website, deinen Besuchern und technischen Anforderungen unterschiedlich sein. Teste die Formate immer mit deinen eigenen Inhalten und Zielgruppen, um die beste Lösung zu finden.
