Sollte ich alle Bilder auf WebP oder AVIF umstellen?

Für Fotos und farbige Grafiken lohnt sich WebP oder AVIF fast immer, weil die Dateien kleiner werden. Logos, Icons und einfache Illustrationen gehören dagegen als SVG ins Web. PNG behalten Sie nur bei echter Transparenz. So bekommt jedes Bild das Format, das für seinen Zweck am schnellsten und schärfsten lädt.

Wie stark darf ich Bilder komprimieren?

Ein mittlerer Qualitätswert reicht meist aus: Das Datengewicht sinkt deutlich, während der Unterschied mit bloßem Auge kaum sichtbar ist. Prüfen Sie das Ergebnis am besten am fertig eingebundenen Bild in der tatsächlichen Anzeigegröße. Erst wenn Artefakte oder Unschärfen auffallen, gehen Sie eine Stufe zurück.

Verbessern optimierte Bilder wirklich die Core Web Vitals?

Ja, spürbar. Kleinere Bilddateien laden schneller, dadurch erscheint der wichtigste Inhalt früher. Wenn Sie zusätzlich Breite und Höhe fest angeben, verhindern Sie das Springen des Layouts beim Nachladen. Beide Effekte wirken direkt auf zentrale Werte der Core Web Vitals, an denen Google die wahrgenommene Geschwindigkeit misst.

Muss ich Bilder für jede Bildschirmgröße einzeln vorbereiten?

Nicht von Hand. Eine sauber gebaute Website liefert automatisch passende Bildgrößen aus, sodass Smartphones kleinere Dateien laden als große Monitore. Sie stellen ein hochwertiges Ausgangsbild bereit, den Rest übernimmt die technische Umsetzung. So bleibt der Aufwand gering und jedes Gerät bekommt genau die richtige Version.

Wissen · Grafikdesign

Bilder fürs Web optimieren: Formate, Größen und Tempo

Von Antonio Pacino · Aktualisiert am 05.07.2026

Bilder fürs Web optimieren heißt: das richtige Format wählen (WebP oder AVIF statt großer JPG und PNG), die Auflösung auf die tatsächliche Anzeigegröße begrenzen und sinnvoll komprimieren. So sinkt das Datengewicht deutlich, die Seite lädt schneller und Ihre Core Web Vitals verbessern sich spürbar, ohne dass die Qualität leidet.

Warum sind Bilder oft die Bremse einer Website?

Bilder machen auf den meisten Seiten den größten Teil des Datengewichts aus. Ein unkomprimiertes Foto aus der Kamera bringt schnell mehrere Megabyte auf die Waage, obwohl es im Browser nur ein paar hundert Pixel breit angezeigt wird.

Genau dieses Übergewicht verzögert den Bildaufbau und drückt Ihre Ladezeit. Wie eng Bilder mit dem Tempo zusammenhängen, zeigt der Ratgeber zu den Core Web Vitals, an denen Google die wahrgenommene Geschwindigkeit misst.

Der gute erste Schritt ist unspektakulär, aber wirksam: Nie das Originalfoto hochladen, sondern immer eine für das Web vorbereitete Version.

Welches Bildformat für welchen Zweck?

Für Fotos und komplexe Grafiken sind die modernen Formate WebP und AVIF fast immer die bessere Wahl: gleiche sichtbare Qualität bei deutlich kleinerer Datei als klassisches JPG oder PNG. Was hinter dem Format steckt, erklärt kurz das Glossar zu WebP.

Logos, Icons und einfache Illustrationen gehören dagegen als SVG ins Web, weil Vektoren bei jeder Größe scharf bleiben und winzig sind. Welches Format wann passt, vergleicht der Ratgeber SVG, PNG oder JPG im Detail.

Faustregel: Foto oder Farbverlauf zu WebP/AVIF, klare Form mit Kanten und Text als SVG. PNG behalten Sie nur, wenn Sie echte Transparenz brauchen und AVIF nicht in Frage kommt.

Wie groß muss ein Bild wirklich sein?

Ein Bild sollte nur so viele Pixel enthalten, wie es maximal angezeigt wird, mit etwas Reserve für hochauflösende Displays. Ein Bild, das 600 Pixel breit dargestellt wird, braucht kein 4000-Pixel-Original.

Moderne Umsetzungen liefern zusätzlich mehrere Größen aus, sodass Smartphones kleinere Dateien bekommen als große Monitore. Beim Website-Relaunch richten wir diese responsiven Bildgrößen von Anfang an sauber ein.
Wichtig ist außerdem, Breite und Höhe im Code festzulegen. Sonst springt das Layout beim Nachladen, und genau dieser Sprung verschlechtert einen der Core Web Vitals messbar.

Komprimieren und nachladen ohne Qualitätsverlust?

Beim Komprimieren stellen Sie einen Qualitätswert ein, der die Datei verkleinert. In einem mittleren Bereich sieht man den Unterschied mit bloßem Auge kaum, das Datengewicht sinkt aber deutlich.

Bilder unterhalb des sichtbaren Bereichs laden Sie per Lazy Loading erst nach, wenn der Nutzer scrollt. So wird zuerst das geladen, was oben sichtbar ist. Der Rest folgt, ohne das erste Bild auszubremsen.

Wer diese Schritte nicht selbst machen möchte, überlässt sie dem Grafikdesign fürs Web: Wir bereiten Bilder so vor, dass sie schnell laden und trotzdem gut aussehen.

Wie hängt schnelles Laden mit Sichtbarkeit zusammen?

Schnelle Ladezeiten sind Teil des Nutzererlebnisses und ein Signal, das Suchmaschinen bewerten. Wer lange warten muss, springt eher ab, und das merkt sich Google.

Bildoptimierung ist deshalb kein reines Design-Detail, sondern ein Baustein im technischen SEO. Neben schlanken Bildern zahlt auch schnelles Managed Hosting auf ein flüssiges Erlebnis ein.

Vergessen Sie zuletzt den Alt-Text nicht: Er beschreibt das Bild für Screenreader und Suchmaschinen. Das ist Barrierefreiheit und Auffindbarkeit in einem Schritt.

FAQ

Häufige Fragen

Passend dazu

Weiterstöbern

Mehr aus Grafikdesign

Bereit für messbar bessere Sichtbarkeit?

Fordern Sie Ihre kostenlose Website- & SEO-Analyse an, unverbindlich und mit konkreten Handlungsempfehlungen.

Kostenlose Website-Analyse

Unverbindlich · Antwort in 24 Stunden