WebP vs. PNG vs. JPG: Welches Format ist am besten für SEO?

Der ehrliche Ausgangspunkt

Keine Suchmaschine gibt einer Seite einen Bonus, weil sie in WebP ausgeliefert wird. Einen Rankingfaktor für Bildformate gibt es nicht. Gemessen wird dagegen, wie schnell eine Seite für die Person nützlich wird, die sie geöffnet hat, und auf den meisten Seiten sind die Bilder das Schwerste, was zwischen diesen beiden Momenten steht. Das Format zählt, weil Bytes zählen, und aus keinem anderen Grund.

In diesem Artikel geht es um die Auslieferung: welches Format Sie ausliefern, wie Sie es ausliefern und worüber Sie sich keine Gedanken mehr machen müssen. Wenn Ihre eigentliche Frage lautet, welches Format zu welcher Art von Bild passt, beantwortet der einfache Leitfaden zu JPG, PNG und WebP genau diese Frage, und es hat keinen Sinn, das hier zu wiederholen.

Wo ein Bild Ihre Seitenmetriken beeinflusst

Auf einer Artikel- oder Produktseite ist das größte sichtbare Element beim ersten Rendern der Seite meist ein Bild. Damit fließt seine Downloadzeit in die Bewertung der Ladeleistung ein, und ein schweres Hero-Bild bremst die Messung, selbst wenn alles andere auf der Seite schnell ist. Bilder weiter unten beeinflussen genau diesen Wert nicht, konkurrieren aber trotzdem um Bandbreite, während das wichtige Bild noch unterwegs ist.

Behalten Sie die Reihenfolge im Blick. Die richtigen Pixelmaße auszuliefern spart weit mehr als ein Formatwechsel, und Platz im Layout zu reservieren, damit beim Laden der Bilder nichts springt, kostet überhaupt nichts. Das Format ist der dritte Hebel, nicht der erste.

Was WebP Ihnen wirklich bringt

Zwei Dinge. Verlustbehaftetes WebP erzeugt bei vergleichbarer Bildqualität in der Regel eine kleinere Datei als JPEG, Sie schicken also für dasselbe Bild weniger Daten über die Leitung. Und anders als JPEG unterstützt es einen Alphakanal. Ein einziges Format deckt damit die Fotos und die transparenten Grafiken einer Seite ab, und Sie müssen nicht länger zwei Pipelines pflegen.

Der Preis dafür ist ein zusätzlicher Kodierungsschritt in Ihrem Arbeitsablauf und die Frage nach dem Fallback. Aktuelle Versionen aller großen Browser können WebP, daher ist der Fallback weit weniger wichtig als noch vor ein paar Jahren. Wenn Ihr Traffic aber auch alte Geräte oder eingebettete Clients umfasst, lohnt es sich weiterhin, ein JPEG vorzuhalten.

Ausliefern, ohne etwas kaputt zu machen

Genau dafür gibt es das picture-Element. Umschließen Sie Ihr Bild damit, geben Sie ein source-Element mit dem Typ image/webp an, das auf die moderne Datei zeigt, und lassen Sie darin ein normales img-Tag als Fallback stehen, mit dem JPEG im src. Browser, die WebP verstehen, nehmen den ersten Treffer, alle anderen fallen auf das img zurück, und in beiden Fällen erscheint ein funktionierendes Bild. Suchmaschinen-Crawler folgen denselben Regeln wie ein Browser, es gibt also nichts Exotisches zu konfigurieren.

Wenn Sie das Markup ohnehin bearbeiten, erledigen Sie gleich drei weitere Dinge. Setzen Sie explizite width- und height-Attribute auf das img, damit der Browser den richtigen Platz reservieren kann, bevor die Datei ankommt. Ergänzen Sie ein srcset, damit ein Smartphone keine Datei in Desktop-Größe herunterlädt. Und schreiben Sie ein echtes alt-Attribut, denn davon hängt tatsächlich ab, ob das Bild in den Ergebnissen der Bildersuche erscheinen kann.

Wo PNG und JPG weiterhin hingehören

PNG bleibt die richtige Wahl für Screenshots, Diagramme, Oberflächenelemente und alles mit harten Kanten und wenigen Farben. Verlustbehaftete Kompression verunstaltet solche Inhalte, und ein Hilfeartikel voller verschmierter Screenshots ist eine schlechtere Seite, egal wie schnell sie lädt. Verlustfreies WebP erledigt dieselbe Aufgabe mit einer kleineren Datei, sofern Ihre Werkzeuge es erzeugen können.

JPEG ist weiterhin der sichere Standard für Fotos, wenn Sie etwas brauchen, das jeder Client der Welt öffnen kann, und es gehört nach wie vor auf den Fallback-Platz eines picture-Elements. Was Sie nicht tun sollten, ist, ein Foto als PNG auszuliefern. Das ist der mit Abstand häufigste Grund, warum eine Seite am Ende mehrere Megabyte schwerer ist als nötig.

Eine Anmerkung zu AVIF

AVIF schlägt WebP bei der Dateigröße meistens, besonders bei fotografischen Inhalten. Der Preis dafür ist eine langsamere Kodierung und eine Unterstützung, die in aktuellen Browsern gut, aber nicht ganz so flächendeckend ist. Wenn Ihre Build-Pipeline AVIF erzeugen kann, steht es im picture-Element an erster Stelle, dahinter WebP und zuletzt JPEG. Die Konverter auf dieser Website geben kein AVIF aus, das gehört also in Ihre Build-Tools und nicht hierher.

Was ein Formatwechsel nicht behebt

• Ein 4000 Pixel breites Bild, das in einer 700 Pixel breiten Spalte angezeigt wird. WebP macht es kleiner, aber es bleibt maßlos überdimensioniert. Verkleinern Sie es zuerst und konvertieren Sie es danach.
• Ein Hero-Bild, dessen Download erst beginnt, wenn mehrere render-blockierende Skripte fertig sind. Das Format spielt keine Rolle, solange die Anfrage noch gar nicht gestellt wurde.
• Fehlender Alt-Text, ein Dateiname wie IMG_4471 oder eine Seite, auf der nichts Nützliches steht. Die Bildersuche stützt sich auf die Seite rund um das Bild, nicht auf den Codec, mit dem es kodiert wurde.

Ein paar Dateien sofort konvertieren

Die Konverter JPG zu WebP und PNG zu WebP auf dieser Website nehmen eine Warteschlange von Bildern entgegen und geben Ihnen ein ZIP zurück. Kodiert wird dabei in Ihrem Browser und nicht auf dem Server von irgendwem. Der universelle Konverter hat zusätzlich einen Qualitätsregler, falls Sie den Kompromiss zwischen Qualität und Größe selbst einstellen möchten. Denken Sie daran, dass beim Neukodieren der EXIF-Block verloren geht: Das WebP kommt ohne die Kameradaten an, die das Original enthielt.

Für eine Website, die regelmäßig veröffentlicht, gehört diese Arbeit allerdings in den Build-Schritt oder ins CDN. Eine Pipeline, die für jeden Upload mehrere Breiten und Formate erzeugt, schlägt jeden manuellen Ablauf, weil sie auch in einer hektischen Woche nie ausgelassen wird. Konvertieren Sie von Hand, wenn Sie eine bestimmte Seite reparieren. Automatisieren Sie, wenn Sie eine ganze Website reparieren.