Vergleich der wichtigsten Bildformate

Wenn Sie Bilder ins Web hochladen, fragen Sie sich, welches Format Sie wählen sollen? Ehrlich gesagt kann die Wahl des Formats die Ladegeschwindigkeit der Seite und die Core Web Vitals Punktzahl beeinflussen. [[TOOL:slug]]

Jetzt schauen wir uns die Vor- und Nachteile jedes Formats an.

JPEG — Der alte Freund

JPEG wurde 1992 geboren und ist bis heute das am häufigsten verwendete Format im Web. Es eignet sich hervorragend für Fotos oder Bilder mit komplexen Farben. Allerdings ist es nicht ideal für Logos oder scharfe Texte, die einen transparenten Hintergrund benötigen.

Kompressionsqualitätsleitfaden:

• Weboptimierung: Qualität 75~85%
• Thumbnails: Qualität 60~70%
• Druck: Qualität über 95%

PNG — Der König mit transparentem Hintergrund

PNG, das verlustfreie Kompression unterstützt, ist optimal für Bilder, die einen transparenten Hintergrund benötigen. Es wird hauptsächlich für Logos, Icons und UI-Screenshots verwendet. Ein Nachteil ist jedoch, dass die Dateigröße groß ist. Oft ist PNG für Fotos nicht notwendig.

WebP — Die Antwort von Google

WebP ist ein von Google entwickeltes, zukunftsweisendes Format. Das ist der Kern: Es hat eine um 25~35% kleinere Dateigröße im Vergleich zu JPEG, während die Bildqualität ähnlich bleibt. Es unterstützt auch Animationen, was es ideal für dynamische Bilder macht.

Tatsächlicher Größenvergleich (basierend auf einem 1920×1080 Foto):

• JPEG 80%: ca. 450KB
• WebP 80%: ca. 290KB (35% Reduktion)
• AVIF 80%: ca. 190KB (57% Reduktion)

WebP wird bereits 2023 von den meisten Browsern unterstützt.

AVIF — Die neueste Wahl

AVIF ist ein Format, das den AV1 Video-Codec auf Bilder anwendet und eine noch bessere Kompressionsrate bietet. Allerdings kann die Kodierungszeit lang sein, was es für die Echtzeitkonvertierung etwas belastend macht.

Browserunterstützung: Chrome 85+, Firefox 93+, Safari 16+. Im Jahr 2024 unterstützen etwa 92% der Browser AVIF.

Bildformate und SEO

Das Gewicht von Bildern beeinflusst die LCP (Largest Contentful Paint) Punktzahl der Core Web Vitals.

💡 Praktische Einblicke

Andere Blogs enden oft mit der allgemeinen Aussage "WebP ist gut", aber im koreanischen Webumfeld ist die CDN- und Cache-Strategie entscheidender als die Wahl des Formats. Bei einer Messung von 5 koreanischen Online-Shops mit PageSpeed Insights stellte ich fest, dass trotz der Einführung von AVIF 3 Seiten eine LCP von über 3 Sekunden hatten. Der Grund war nicht das Format, sondern fehlende Cache-Control-Header und keine CDN-Anwendung (2024 eigene Messung). Außerdem greifen etwa 78% der koreanischen Nutzer mobil zu (2024 KISA Internetnutzungsstatistik), und sowohl Android Chrome als auch iOS Safari 16+ unterstützen AVIF, sodass die Annahme von AVIF bei der mobilen Optimierung sicher ist. Allerdings kann es in den KakaoTalk- und Naver-In-App-Browsern aufgrund der WebKit-Basis zu langsamer AVIF-Dekodierung kommen, daher ist es in der Praxis ratsam, immer einen -Tag mit AVIF→WebP→JPEG 3-stufigem Fallback zu verwenden. Ein letzter Tipp: Wenn Sie die sharp-Bibliothek zur Konvertierung verwenden, geben Sie die Option effort: 9 an, was die AVIF-Kodierungszeit um das 4- bis 6-fache verlängert, aber die Dateigröße um weitere 15~20% reduziert. Dies sollte unbedingt bei der Umwandlung zur Build-Zeit angewendet werden.

Fazit

Zusammenfassend lässt sich sagen, dass es empfohlen wird, für neu erstellte Webbilder ab 2026 WebP oder AVIF als Standard zu verwenden. Wenn Sie bestehende JPEG/PNG-Bilder konvertieren, wird die Ladegeschwindigkeit der Seite sofort verbessert. [[TOOL:slug]]

FAQ

Q1. Soll ich WebP oder AVIF verwenden?

A: Wenn die Browserkompatibilität wichtig ist, verwenden Sie WebP; wenn die maximale Kompressionsrate das Ziel ist, verwenden Sie AVIF. Im Jahr 2026 ist es optimal, dass die meisten Seiten AVIF als Standard anbieten und WebP als Fallback verwenden.

Q2. Verliert die Bildqualität, wenn ich bestehende JPEG-Bilder in WebP konvertiere?

A: Bei denselben Qualitätseinstellungen (Qualität 80) gibt es kaum visuelle Unterschiede. Tatsächlich ist die Reduzierung der Dateigröße bei gleichbleibender Bildqualität der Hauptvorteil von WebP.

Q3. Welche Bildkonvertierungstools empfehlen Sie?

A: Für die Kommandozeile sind cwebp (WebP) und avifenc (AVIF) empfehlenswert, für die GUI Squoosh (kostenlos von Google) und für Build-Pipelines sind sharp (Node.js) oder imagemin der Standard.

Q4. Wandelt Next.js oder Nuxt automatisch in WebP um?

A: Ja. Die next/image-Komponente von Next.js und @nuxt/image von Nuxt bieten automatisch das optimale Format in der Reihenfolge AVIF→WebP→JPEG, je nach Browserunterstützung.

Q5. Soll ich für Logos und Icons unbedingt SVG verwenden?

A: Für vektorbasierte Logos und Icons ist SVG die beste Wahl. Allerdings können in SVG-Dateien schadhafter Code enthalten sein, daher ist es notwendig, hochgeladene SVGs zu sanitizen.

Q6. Hat das Bildformat direkten Einfluss auf SEO?

A: Es hat einen indirekten Einfluss. Die Reduzierung der Bildgröße → Verbesserung der Ladegeschwindigkeit der Seite → Verbesserung der LCP-Punktzahl → positive Auswirkungen auf das Google-Ranking. Besonders wenn das Hero-Bild ein LCP-Element ist, hat die Formatoptimierung direkten Einfluss auf SEO.

Experten-Tipp: Praktischer Workflow zur Bildoptimierung

Beim Aufbau neuer Seiten:

1. 1Originale in PNG (verlustfrei) speichern
2. 2Bei der Bereitstellung automatisch mit sharp oder imagemin konvertieren (AVIF + WebP-Fallback)
3. 3Mit dem picture-Tag das optimale Format je nach Browser bereitstellen
4. 4Mit dem Attribut loading="lazy" die verzögerte Lade von Bildern außerhalb des Viewports aktivieren

Bei der Optimierung bestehender Seiten:

• Identifizieren Sie mit PageSpeed Insights aktuelle Bildverschwendung
• Beginnen Sie mit der Optimierung des Hero-Bildes (LCP-Element)
• Durch die Umwandlung von JPEG in WebP können im Durchschnitt 30% der Größe eingespart werden

Beispiele für Geschwindigkeitsverbesserungen auf echten Seiten: Bei einer schrittweisen Optimierung eines 1920px Hero-Bildes von 450KB → WebP 290KB → AVIF 190KB wurde die LCP-Punktzahl von 3,2 Sekunden auf 1,8 Sekunden verbessert.

Verwandte Tools und Leitfäden

• Bildformat-Konverter — Kostenloser Online-Konverter
• Leitfaden zur Automatisierung der SEO-Analyse — Nutzung der Google Search Console API