Schärfe, Speed & Co.: Darum kommt es auf das Format an
Bilder für die Website optimieren ist einfacher als gedacht. In diesem Artikel zeige ich dir, wie du SVG- und WebP-Bilder richtig einsetzt, welche Bildgrößen und Formate sich am besten eignen und worauf du achten solltest, damit deine Website schnell lädt und deine Grafiken gestochen scharf bleiben. Am Ende gibt es zudem einen praktischen Hinweis zum Speichern und Hochladen deiner Bilder – ein zusätzlicher SEO-Bonus (Stichwort Barrierefreiheit) neben den bereits optimierten Größen und Formaten.
Bevor wir uns SVG und WebP im Detail anschauen, werfen wir aber noch einen kurzen Blick auf die Basics: Wie groß sollten Bilder auf deiner Website idealerweise sein? Welche Breite, Höhe und Dateigröße sollten sie haben? Diese Grundlagen helfen dir zu verstehen, welche Anforderungen an Bilder im Web gestellt werden, bevor wir auf die beiden gängigen Formate eingehen, die in den meisten Webprojekten zum Einsatz kommen.
Bilder für die Website optimieren: Empfohlene Bildgrößen
Die maximale Breite eines Bildes sollte sich an der tatsächlichen Darstellungsgröße im Layout orientieren – nicht an der maximalen Bildschirmgröße. Ein Bild, das nur die halbe Seite eines Desktop-Layouts einnimmt (typische Content-Breite: 1200–1400 Pixel, große Monitore bis 1920 Pixel, Smartphones 320–480 Pixel), muss nicht 1920 Pixel breit sein – 900 bis 1000 Pixel reichen völlig aus. So sparst du Dateigröße und verbesserst die Ladezeiten.
Bilder, die großflächig auf der Seite erscheinen, dürfen entsprechend breiter sein, mit Dateigrößen bis maximal 500 KB. Bilder in der Hero Section – das ist der oberste, meist großflächige Bereich einer Website, den Besucher:innen zuerst sehen – können im Notfall sogar bis zu 1 MB groß sein. Die meisten Bilder müssen jedoch nicht riesig oder ultra-scharf dargestellt werden, deshalb sind kleinere Dateigrößen von unter 150 KB meist völlig ausreichend. Denn merke: Jedes zusätzliche Bild kann die Ladezeit erhöhen – besonders, wenn die Dateien zu groß sind.
Genau hier kommen unsere beiden Webformate – SVG und WebP – ins Spiel. Sie sind speziell für das Web entwickelt: SVG bleibt unabhängig von der Größe immer scharf, während WebP Fotos und Grafiken effizient komprimiert und die Dateigröße klein hält. Wir konzentrieren uns bewusst auf diese beiden Formate, da sie die wichtigsten Anforderungen im modernen Webdesign erfüllen. Andere Formate wie JPG oder PNG werden in professionellen Projekten immer seltener genutzt. Besonders das PNG-Format kann vollständig durch WebP ersetzt werden, da WebP sogar transparente Hintergründe unterstützt – dazu aber später mehr.
Beachte: Wenn du WordPress nutzt oder deine Website selbst erstellst, lohnt es sich, die Bildgrößen gleich von Anfang an richtig zu planen – so verhinderst du langsame Ladezeiten und Performance-Probleme. Mehr Tipps, wie du typische Fehler bei deiner WordPress-Website vermeidest, findest du in meinem Blogartikel WordPress – Website selbst erstellen: Typische Fehler vermeiden.
Los geht’s mit dem ersten Format: SVG erklärt
- SVG steht für Scalable Vector Graphics – also ein „skalierbares Vektorbild“.
- Anders als ein normales Foto (JPG oder PNG), das aus vielen winzigen Punkten besteht, besteht ein SVG-Bild aus Linien, Formen und Farben, die wie eine Art Bauplan gespeichert sind.
Stell dir das so vor:
- Ein JPG oder PNG ist wie ein Mosaik aus winzigen Kacheln. Wenn du es vergrößerst, sieht man die Kacheln und das Bild wird unscharf.
- Ein SVG ist wie eine Bauanleitung für ein Bild: „Zeichne einen Kreis hier, eine Linie da, fülle sie mit Blau“.
- Egal, wie groß oder klein du das Bild machst, es bleibt immer scharf – weil der Computer einfach die Bauanleitung benutzt, um es zu zeichnen.
Woraus besteht so eine SVG-Datei?
- Formen: Linien, Kreise, Rechtecke, Kurven oder Sterne – all das wird mathematisch beschrieben.
Ein Beispiel: „Zeichne einen Kreis mit dem Mittelpunkt bei (50,50) und Radius 20“. - Farben und Füllungen: Jede Form kann eine Farbe, einen Farbverlauf oder ein Muster haben.
- Text: Auch Text lässt sich einbinden, der wie eine ganz normale Schrift angezeigt wird.
- Effekte: Schatten, Transparenz oder kleine Animationen können ebenfalls Teil der Datei sein.
- Bauplan in einer Textdatei: Das Ganze wird als Textdatei gespeichert und kann sogar mit einem einfachen Text-Editor geöffnet und gelesen werden.Dort steht dann zum Beispiel: „Zeichne eine Linie von Punkt A nach Punkt B und fülle sie mit Rot.“
Einfaches Beispiel für eine SVG-Datei:
<svg width=“100″ height=“100″ xmlns=“http://www.w3.org/2000
/svg“><circle cx=“50″ cy=“50″ r=“40″ fill=“green“ /></svg>
- <svg width=“100″ height=“100″> → Die Zeichenfläche ist 100×100 Pixel groß.
- <circle cx=“50″ cy=“50″ r=“40″ fill=“green“ /> → Zeichne einen Kreis:
- cx und cy sind die Koordinaten des Mittelpunkts (50,50 = Mitte der Fläche).
- r ist der Radius (40 Pixel).
- fill=“green“ füllt den Kreis grün.
Der Code erzeugt ein Bild mit einem grünen Kreis, der genau in der Mitte eines kleinen quadratischen Feldes sitzt.
Wie entsteht so ein SVG?
- Zeichnen mit einem Programm: Du kannst SVGs in Programmen wie Illustrator, Inkscape, Canva oder Figma erstellen. Alles, was du zeichnest, wird automatisch in den „Bauplan“ übersetzt.
- Exportieren: Wenn du das Bild speicherst/exportierst, entsteht die SVG-Datei – der Text, der dem Computer sagt, wie das Bild aussieht.
- Bearbeiten (optional): Fortgeschrittene können direkt im Texteditor den Code ändern, z. B. Farben ändern oder Formen verschieben.
Häufige Anwendungsgebiete für SVGs
- Logos: Logos müssen oft klein auf dem Handy oder riesig auf einem Plakat angezeigt werden. SVGs bleiben im Gegensatz zu PNG-Bildern immer scharf.
- Icons: Kleine Symbole (z. B. Social-Media-Icons, Buttons) lassen sich mit SVG perfekt skalieren.
- Infografiken und Diagramme: Balkendiagramme, Liniencharts oder animierte Statistiken.
- Animationen: Bewegliche Effekte, z. B. pulsierende Buttons, animierte Logos oder Illustrationen.
- Webdesign-Elemente: Hintergründe, Muster, dekorative Linien, Pfeile – alles kann mit SVGs viel flexibler als mit PNGs umgesetzt werden.
- Interaktive Elemente: Mit JavaScript kann man Teile des SVGs anklickbar machen oder dynamisch verändern.
SVG optimal nutzen: So groß sollten deine Dateien sein
Wenn du SVG-Dateien erstellst – zum Beispiel in Canva, Illustrator oder Figma – solltest du darauf achten, dass sie nicht unnötig groß sind. Anders als Pixelbilder müssen SVGs nicht mehrere tausend Pixel breit sein, um scharf auszusehen. Für Logos, Icons oder kleine Illustrationen auf Websites reicht eine Breite von maximal 500 Pixel völlig aus. So bleibt die Datei sehr klein – meist unter 50 KB – lädt schnell und wird auf allen Geräten gestochen scharf angezeigt.
Warum SVG-Bilder manchmal Probleme machen
SVG-Dateien sind super praktisch, können aber manchmal Schwierigkeiten bereiten. Manche Browser zeigen SVGs nicht korrekt an – zum Beispiel in privaten Fenstermodi oder bei älteren Browser-Versionen. Außerdem kann es passieren, dass Sicherheits-Plugins oder sogar Hosting-Provider eine SVG-Datei beim Hochladen als potenziell gefährlich einstufen. Das liegt nicht daran, dass die Datei an sich unsicher ist, sondern daran, dass SVGs Textdateien sind, die neben Formen auch Befehle oder kleine Programme enthalten können. Daher ist ein gesundes Maß an Menschenverstand wichtig: Lädt man ein SVG aus unbekannter Quelle (oder aus einem E-Mail Anhang), weiß man nie genau, was im Hintergrund passiert – salopp gesagt kann auf dem Bildschirm ein grüner Kreis erscheinen, während im Hintergrund Schadcode ausgeführt wird.
Auch beschädigte SVG-Dateien können Probleme machen. In den meisten Fällen ist die SVG-Datei jedoch völlig ungefährlich. Wenn sie nicht angezeigt wird oder eine Warnung auftritt, kannst du sie einfach neu erstellen oder erneut exportieren – zum Beispiel aus einem Programm wie Canva, Illustrator oder Figma. Alternativ kannst du die Datei in einem seriösen Online-Converter öffnen und neu abspeichern, um mögliche Beschädigungen zu beheben. Danach läuft die Datei zuverlässig in allen Browsern und lässt sich problemlos auf der Webseite verwenden.
SVG-Dateien in WordPress sicher nutzen – kurze Empfehlungsliste:
- Nur vertrauenswürdige Quellen nutzen
Lade SVGs nur von sicheren Quellen oder selbst erstellten Dateien hoch. - Plugins für Upload-Sicherheit verwenden
- Safe SVG: Prüft SVG-Dateien vor dem Hochladen auf unsichere Inhalte und entfernt potenziellen Schadcode automatisch.
- SVG Support: Ermöglicht SVG-Uploads und säubert die Dateien gleichzeitig.
- Dateien bei Bedarf neu abspeichern
Öffne die SVG in Programmen wie Illustrator, Figma oder Canva und speichere sie neu – versteckter Schadcode wird oft entfernt. - Zusätzliche Prüfung mit Online-Tools
Nutze z. B. SVG Sanitizer oder SVGO, um schädliche Elemente wie <script> oder Event-Handler zu entfernen. - Regelmäßige Kontrolle & Updates
Halte WordPress und Plugins immer aktuell, damit neue Sicherheitslücken geschlossen sind.
WebP – das zweite Webformat im Detail
- Der Name „WebP“ leitet sich von „Web Picture“ ab, da es speziell für die effiziente Nutzung im Web entwickelt wurde.
- WebP ist ein Bildformat, also eine Art Datei für Bilder.
- Es wurde von Google entwickelt, um Bilder kleiner zu machen, ohne dass sie viel schlechter aussehen.
- Anders als SVGs ist WebP pixelbasiert, also wie JPG oder PNG. Das bedeutet:
- Wenn man es zu stark vergrößert, werden die Pixel sichtbar → Bild wird unscharf.
- Es eignet sich eher für Fotos oder Bilder mit vielen Farben.
Welche Arten von Bildern kann WebP speichern?
WebP unterstützt zwei Speicherarten:
Lossy (verlustbehaftet): Die Datei wird deutlich kleiner, meist auf ca. 25–40 % der Originalgröße, mit minimalem Qualitätsverlust.
Lossless (verlustfrei): Die Qualität bleibt vollständig erhalten, die Dateigröße wird trotzdem um ca. 30–50 % reduziert.
Zusätzlich kann WebP:
- Transparenz speichern (wie PNG)
- Kleine Animationen speichern (wie GIF)
Wie entsteht eine WebP-Datei?
- Aus einem Foto oder Bild erzeugen: Man speichert ein JPG, PNG oder GIF als WebP ab. Viele Bildbearbeitungsprogramme wie Photoshop oder GIMP unterstützen WebP inzwischen.
- Online-Converter nutzen: Alternativ kann man WebP auch einfach über kostenlose Online-Tools erzeugen. Dort lädt man das bestehende Bild hoch, wählt WebP als Format aus und lädt die fertige Datei wieder herunter. Das ist besonders praktisch, wenn man kein Bildbearbeitungsprogramm installiert hat.
Komprimierung & Vorteil: Durch die Komprimierung – entweder im Programm oder über einen Online-Converter – wird die Dateigröße deutlich reduziert, ohne dass die Bildqualität stark leidet. Das sorgt dafür, dass deine Webseite schneller lädt und Nutzer weniger Datenvolumen verbrauchen
Beispiel: Ein PNG-Foto mit 1000 × 500 Pixeln und einer Dateigröße von 520 KB lässt sich als WebP speichern und erreicht dabei oft nur noch ca. 150 KB (Lossy), bei minimalem Qualitätsverlust.
Tipp: Ich arbeite gern mit dem Online-Tool Freeconvert
Häufige Anwendungsgebiete für WebP
WebP ist besonders beliebt für Webseiten, weil es schnell lädt und trotzdem gut aussieht:
- Fotos auf Webseiten: Produktbilder, Blogbilder oder Eventfotos.
- Icons oder Grafiken: Vor allem, wenn Transparenz nötig ist, aber kleiner als PNG sein soll.
- Mobile Webseiten: Da die Dateien kleiner sind, spart man Ladezeit und Datenvolumen für Nutzer.
WebP optimal nutzen: Größe und Dateigröße beachten
Um Bilder für die Website zu optimieren, solltest du Fotos, PNGs oder JPGs als WebP speichern. Für die meisten Bilder reicht eine Breite von maximal 1200 Pixel, abhängig davon, wie groß sie auf der Seite angezeigt werden, aus. Auch transparente Logos oder Grafiken lassen sich in dieses Format konvertieren. Die Dateien bleiben so allerdings kleiner, schneller ladbar und meist deutlich unter 200 KB.
Dateinamen & Alt-Texte: der letzte Optimierungs-Schritt
Jetzt, wo du die idealen Bildgrößen und die passenden Formate kennst, fehlt nur noch ein wichtiger Feinschliff beim Hochladen: sprechende Dateinamen und präzise Alt-Texte. (Alternativer Text)
- Dateiname: Wähle klare, beschreibende Namen wie produktname-kaffeemaschine.webp statt IMG_1234.webp. Das verbessert nicht nur die Übersicht in deiner Mediathek, sondern auch die Auffindbarkeit in der Google-Bildsuche.
- Alt-Text: Dieser kurze Beschreibungstext wird von Screenreadern für barrierefreie Websites ausgelesen und von Suchmaschinen für die Bildersuche genutzt. Schreibe in ein bis zwei Sätzen, was auf dem Bild zu sehen ist, zum Beispiel: „Mobile Kaffeebar im Piaggio Apé mit Latte-Art.“ In WordPress findest du das Feld Alt-Text in den Anhang-Details auf der rechten Seite des jeweiligen Bildes.
So stellst du sicher, dass deine optimierten SVG- und WebP-Dateien nicht nur schnell laden, sondern auch für Suchmaschinen optimal auffindbar und für alle Nutzer:innen zugänglich sind. (Stichwort Barrierefreiheit!).
Tipp: Lösche ungenutzte Bilder oder solche ohne Zuordnung zu Beiträgen oder Seiten – das spart Speicher, hält die Mediathek sauber und verbessert die Performance.
Fazit zur Bildoptimierung
Bilder für die Website zu optimieren ist entscheidend – nicht nur für die Optik, sondern vor allem für die Ladezeiten. Eine optimierte Seite lädt flüssiger, was sich positiv auf die SEO auswirkt und dafür sorgt, dass deine Website besser gefunden wird. Mit SVGs für Vektorgrafiken wie Logos und Icons sowie WebP für Fotos und halbtransparente oder farbintensive Bilder deckst du die häufigsten Anwendungsfälle ab. So bleiben deine Grafiken gestochen scharf, die Performance deiner Seite hoch, und Nutzer:innen können deine Inhalte ohne Verzögerung genießen.
Und während WebP derzeit die bewährte Wahl für die meisten Projekte bleibt, gibt es schon wieder einen aufstrebenden Stern in der Welt der Bildformate: AVIF. Dieses Format basiert auf dem AV1-Videocodec und bietet eine besonders effiziente Komprimierung, wodurch Bilder kleiner werden, ohne dass die Qualität merklich leidet – ideal für schnelle Webseiten. Allerdings unterstützen noch nicht alle Browser AVIF vollständig, sodass WebP weiterhin die sichere Lösung für maximale Kompatibilität bleibt.
Mit dieser Kombination aus bewährten Formaten, Barrierefreiheit und einem Blick auf zukünftige Möglichkeiten bist du bestens gerüstet, um deine Website sowohl optisch ansprechend als auch performant zu gestalten.
💡 Merksatz:
- SVG = Bauplan für Vektoren → immer scharf, ideal für Logos, Icons, Animationen
- WebP = moderne Version von JPG/PNG → Pixelbild, klein, performant, ideal für Fotos und Animationen
- Wähle aussagekräftige Alt-Texte und Dateinamen
- Ungenutzte Bilder besser sofort löschen
