» Drei Begriffe, die du kennen musst
Bevor du optimierst, kurz die Grundlagen. Drei Faktoren bestimmen, wie schnell ein Bild lädt und wie gut es aussieht:
- Bildformat: die Dateiart, in der dein Bild gespeichert ist – etwa WebP, AVIF, JPEG, PNG oder SVG.
- Bildgröße: Breite und Höhe in Pixeln.
- Dateigröße: der Speicherplatz in KB oder MB – das ist die Zahl, die über die Ladezeit entscheidet.
Die richtige Kombination aus allen dreien sorgt für scharfe Bilder, die trotzdem in Sekundenbruchteilen laden. Warum das so wichtig ist, habe ich im Artikel über die 3-Sekunden-Lüge und die Ladezeit deiner Website ausführlich aufgeschrieben: Nach drei Sekunden Wartezeit ist ein großer Teil deiner Besucher weg.
» Das richtige Format: WebP und AVIF statt riesiger JPEGs
Hier hat sich in den letzten Jahren am meisten getan. JPEG und PNG waren jahrzehntelang der Standard – heute gibt es Besseres:
- WebP: Der aktuelle Standard für Fotos. Rund 25–35 % kleiner als ein vergleichbares JPEG, kann auch Transparenz – und wird von allen aktuellen Browsern unterstützt. Wenn du dir nur ein Format merkst: dieses.
- AVIF: Komprimiert noch stärker als WebP, ideal für große Hero-Bilder. Die Browser-Unterstützung ist inzwischen flächendeckend.
- SVG: Pflicht für Logos, Icons und einfache Grafiken. Vektorbasiert, bleibt in jeder Größe gestochen scharf und ist oft nur wenige KB groß.
- JPEG und PNG: Nur noch als Fallback oder wenn ein System kein WebP annimmt. PNG für Screenshots mit Text, sonst gibt es kaum noch Gründe dafür.
- GIF: Für Animationen veraltet – ein kurzes, stumm abgespieltes MP4-Video ist meist zehnmal kleiner.
» Die richtige Pixelbreite: Größer als der Bildschirm bringt nichts
Ein Foto aus deiner Handykamera hat schnell 4000 Pixel Breite und 5 MB Dateigröße. Kein Bildschirm der Welt zeigt auf deiner Website so viel davon an. Bewährte Richtwerte:
- Vollbreite-Bilder (Header, Hero): maximal 1920 Pixel Breite.
- Bilder im Inhalt: 800–1200 Pixel, je nach Layout.
- Icons und kleine Grafiken: 100–300 Pixel.
Skaliere Bilder vor dem Hochladen auf diese Maße. Ein zu großes Bild hochzuladen und vom Browser verkleinern zu lassen, ist wie einen Umzugskarton zu verschicken, in dem nur ein Brief liegt.
» Die richtige Dateigröße: KB-Richtwerte zum Merken
Nach Format und Pixelbreite kommt die Kompression. Diese Werte sind gut erreichbar, ohne dass Qualität sichtbar verloren geht:
- Große Header- und Bannerbilder: unter 200 KB
- Mittlere Bilder (Portraits, Produktfotos): 50–100 KB
- Kleine Icons und Grafiken: unter 10 KB
Zum Vergleich: Ein unbearbeitetes Kamerafoto liegt oft bei 5 MB – das ist das 25-Fache des Richtwerts. Fünf solcher Bilder auf einer Seite, und deine Besucher laden 25 MB, bevor sie ein Wort gelesen haben.
» So komprimierst du Bilder – kostenlos und ohne Vorkenntnisse
Du brauchst dafür keine teure Software:
- Squoosh (squoosh.app): Kostenloses Browser-Tool von Google. Bild reinziehen, WebP oder AVIF wählen, Qualitätsregler schieben – mit Live-Vergleich vorher/nachher. Mein Favorit.
- TinyPNG: Komprimiert JPEG, PNG und WebP per Drag-and-drop, auch mehrere Bilder auf einmal.
- Bildbearbeitung (GIMP, Affinity Photo, Photoshop): Beim Exportieren Qualität auf 70–80 % stellen – der Unterschied zu 100 % ist mit bloßem Auge kaum sichtbar, die Datei aber nur halb so groß.
Tipp: Mach die Optimierung einmal zur Gewohnheit: Kein Bild geht auf die Website, das nicht vorher durch Squoosh gelaufen ist. Das kostet pro Bild 30 Sekunden und spart jedem einzelnen Besucher Wartezeit.
» Bilder und SEO: Ladezeit ist ein Ranking-Faktor
Google bewertet die Geschwindigkeit deiner Website über die Core Web Vitals – und Bilder sind auf den meisten Seiten der größte Hebel. Schnellere Seiten ranken besser, halten Besucher länger und funktionieren vor allem mobil, wo Verbindungen oft langsamer sind.
Dazu kommt die Bild-SEO selbst: Gib deinen Dateien sprechende Namen (webdesign-koeln-portrait.webp statt IMG_4711.jpg) und schreibe Alt-Texte, die beschreiben, was zu sehen ist. Das hilft Google, KI-Suchen wie ChatGPT und Perplexity – und Menschen, die mit Screenreader unterwegs sind. Wie du deine Inhalte insgesamt für Suchmaschinen und KI-Antworten aufbereitest, liest du im Artikel Blogartikel optimieren: So wirst du 2026 gefunden.
» Weniger Ballast, mehr Wirkung
Bildoptimierung ist eine der wenigen Maßnahmen, die sofort messbar wirken: richtiges Format, richtige Größe, einmal komprimiert – und deine Seite lädt spürbar schneller. Genau deshalb ist das bei meinen Website-Paketen von Anfang an eingebaut: Jedes Bild geht optimiert als WebP auf die Seite, nichts bremst. Deine Besucher merken den Unterschied – und Google auch.
Häufige Fragen
Welches Bildformat ist 2026 das beste für Websites?
Für Fotos ist WebP der Standard: deutlich kleiner als JPEG bei gleicher Qualität und von allen aktuellen Browsern unterstützt. AVIF komprimiert noch stärker und eignet sich für große Hero-Bilder. Logos und Icons gehören als SVG auf die Seite – die bleiben in jeder Größe scharf und sind winzig klein.
Wie groß sollte ein Bild für die Website sein?
Vollbreite-Bilder brauchen maximal 1920 Pixel Breite, Bilder im Inhalt 800 bis 1200 Pixel, Icons 100 bis 300 Pixel. Bei der Dateigröße gilt: große Header-Bilder unter 200 KB, normale Inhaltsbilder unter 100 KB, Icons unter 10 KB. Ein Foto direkt aus der Kamera hat oft 5 MB oder mehr – das 25-Fache dessen, was nötig wäre.
Wie komprimiere ich Bilder kostenlos?
Online-Tools wie Squoosh (squoosh.app) oder TinyPNG verkleinern Bilder direkt im Browser und wandeln sie auf Wunsch in WebP um – kostenlos und ohne Installation. Squoosh zeigt dabei live den Vorher-nachher-Vergleich, sodass du siehst, wie stark du komprimieren kannst, bevor Qualität sichtbar verloren geht.
Warum sind Bilder wichtig für SEO?
Google nutzt die Ladegeschwindigkeit als Ranking-Faktor, gemessen über die Core Web Vitals – und Bilder sind auf den meisten Websites der größte Bremsklotz. Zusätzlich zählt Bild-SEO: sprechende Dateinamen und aussagekräftige Alt-Texte helfen Google und KI-Suchen zu verstehen, was auf dem Bild zu sehen ist.