{"id":22889,"date":"2026-08-30T09:09:41","date_gmt":"2026-08-30T07:09:41","guid":{"rendered":"https:\/\/www.curiaweb.ch\/?post_type=docs&#038;p=22889"},"modified":"2026-08-30T09:09:42","modified_gmt":"2026-08-30T07:09:42","password":"","slug":"webp-avif-jpg-png-unterschied","status":"publish","type":"docs","link":"https:\/\/www.curiaweb.ch\/it\/hilfe\/seo-monitoring\/webp-avif-jpg-png-unterschied\/","title":{"rendered":"WebP, AVIF, JPG e PNG: quale formato di immagine usare?"},"content":{"rendered":"<p class=\"wp-block-paragraph\">JPG, PNG, WebP oder AVIF? Wer Bilder f\u00fcr eine Website vorbereitet, steht schnell vor der Frage, welches Dateiformat die beste Wahl ist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eine pauschale Antwort gibt es nicht. Ein Foto stellt andere Anforderungen als ein Logo, ein Screenshot oder eine Grafik mit transparentem Hintergrund. Die Formate unterscheiden sich unter anderem bei Kompression, Transparenz, Dateigr\u00f6\u00dfe und ihren typischen Einsatzgebieten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In diesem Artikel vergleichen wir WebP, AVIF, JPG und PNG und zeigen dir, welches Format sich f\u00fcr welche Art von Website-Bild eignet.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Breve spiegazione:<\/strong> F\u00fcr Fotos sind WebP und AVIF h\u00e4ufig sehr effiziente Optionen. JPG bleibt ein weit verbreitetes Fotoformat. PNG ist besonders dort sinnvoll, wo verlustfreie Darstellung oder Transparenz ben\u00f6tigt wird. Entscheidend ist aber immer der konkrete Bildinhalt und Einsatzzweck.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Warum spielt das Bildformat \u00fcberhaupt eine Rolle?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Bildformat bestimmt nicht nur die Dateiendung. Es legt auch fest, wie Bildinformationen gespeichert und komprimiert werden und welche Funktionen zur Verf\u00fcgung stehen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dasselbe Ausgangsbild kann deshalb je nach Format sehr unterschiedliche Dateigr\u00f6\u00dfen besitzen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In sintesi:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>dasselbe Motiv\n     \u2193\nJPG  \u2192 Dateigr\u00f6\u00dfe A\nPNG  \u2192 Dateigr\u00f6\u00dfe B\nWebP \u2192 Dateigr\u00f6\u00dfe C\nAVIF \u2192 Dateigr\u00f6\u00dfe D<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Die kleinste Datei ist allerdings nicht automatisch die beste. Auch Bildqualit\u00e4t, Transparenz, Browserunterst\u00fctzung und der konkrete Einsatzzweck m\u00fcssen ber\u00fccksichtigt werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Die vier Bildformate im \u00dcberblick<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Formato<\/th><th>Typischer Einsatz<\/th><th>Verlustbehaftet m\u00f6glich?<\/th><th>Verlustfrei m\u00f6glich?<\/th><th>Transparenz<\/th><\/tr><\/thead><tbody><tr><td><strong>JPG\/JPEG<\/strong><\/td><td>Fotos<\/td><td>S\u00ec<\/td><td>No<\/td><td>No<\/td><\/tr><tr><td><strong>PNG<\/strong><\/td><td>Grafiken, Screenshots, Transparenz<\/td><td>No<\/td><td>S\u00ec<\/td><td>S\u00ec<\/td><\/tr><tr><td><strong>WebP<\/strong><\/td><td>Fotos und Grafiken<\/td><td>S\u00ec<\/td><td>S\u00ec<\/td><td>S\u00ec<\/td><\/tr><tr><td><strong>AVIF<\/strong><\/td><td>Fotos und moderne Webbilder<\/td><td>S\u00ec<\/td><td>S\u00ec<\/td><td>S\u00ec<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Diese Tabelle dient als erste Orientierung. Welches Format tats\u00e4chlich die beste Kombination aus Qualit\u00e4t und Dateigr\u00f6\u00dfe liefert, h\u00e4ngt vom jeweiligen Bild ab.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was ist JPG beziehungsweise JPEG?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JPEG ist eines der bekanntesten Formate f\u00fcr digitale Fotos. Dateien verwenden h\u00e4ufig die Endung <code>.jpg<\/code> o <code>.jpeg<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JPG und JPEG bezeichnen dabei grunds\u00e4tzlich dasselbe Bildformat.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JPEG verwendet verlustbehaftete Kompression. Dabei werden Bildinformationen reduziert, um die Dateigr\u00f6\u00dfe zu verkleinern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei einer sinnvoll gew\u00e4hlten Qualit\u00e4tsstufe k\u00f6nnen Fotos deutlich komprimiert werden, ohne dass die Qualit\u00e4tsverluste bei normaler Betrachtung sofort auffallen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wann eignet sich JPG?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JPG eignet sich besonders f\u00fcr fotografische Motive mit vielen Farben, Details und weichen Farbverl\u00e4ufen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esempi tipici sono:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Landschaftsfotos\nProduktfotos\nPortr\u00e4ts\nReisefotos\nHintergrundfotos<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr solche Motive war JPEG \u00fcber viele Jahre das klassische Standardformat im Web und wird weiterhin breit unterst\u00fctzt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Welche Nachteile hat JPG?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JPEG unterst\u00fctzt keine Transparenz. Ein Bildbereich kann also nicht wie bei PNG oder WebP einen transparenten Hintergrund besitzen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Au\u00dferdem kann starke Kompression sichtbare Artefakte verursachen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Besonders bei Text, feinen Linien, Logos und harten Kanten k\u00f6nnen solche Kompressionsartefakte st\u00f6rend auffallen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Deshalb ist JPG nicht f\u00fcr jede Grafik die beste Wahl.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was ist PNG?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">PNG steht f\u00fcr Portable Network Graphics und verwendet verlustfreie Kompression.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das bedeutet, dass die Bildinformationen bei der Kompression nicht auf dieselbe Weise verworfen werden wie bei einem verlustbehaftet komprimierten JPEG.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">PNG unterst\u00fctzt au\u00dferdem Transparenz einschlie\u00dflich unterschiedlicher Transparenzstufen \u00fcber einen Alphakanal.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wann eignet sich PNG?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">PNG kann sinnvoll sein f\u00fcr Bilder mit klaren Kanten, bestimmte Screenshots, Grafiken und Inhalte, bei denen verlustfreie Darstellung oder Transparenz ben\u00f6tigt wird.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein typisches Beispiel w\u00e4re eine freigestellte Grafik mit transparentem Hintergrund.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Logo \/ Grafik\n\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\n\u2588\u2588    \u2588\u2588\n\u2588\u2588    \u2588\u2588\n\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\n\nHintergrund:\ntransparent<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Das Bild kann dadurch auf unterschiedlichen Hintergrundfarben eingesetzt werden, ohne einen fest eingebauten wei\u00dfen oder andersfarbigen Hintergrund zu besitzen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Warum sind PNG-Dateien manchmal sehr gro\u00df?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Verlustfreie Kompression hat ihren Preis. Insbesondere fotografische Motive k\u00f6nnen als PNG erheblich mehr Speicherplatz ben\u00f6tigen als in einem geeigneten verlustbehafteten Format.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein gro\u00dfes Foto sollte deshalb nicht automatisch als PNG gespeichert werden, nur weil PNG eine hohe Bildqualit\u00e4t erm\u00f6glicht.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Consiglio pratico:<\/strong> Wenn ein mehrere Megabyte gro\u00dfes PNG eigentlich ein normales Foto ist, lohnt sich fast immer die Pr\u00fcfung, ob ein anderes Format f\u00fcr diesen Einsatzzweck geeigneter ist.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Ist PNG f\u00fcr Screenshots immer die beste Wahl?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Non necessariamente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">PNG eignet sich f\u00fcr viele Screenshots sehr gut, weil Text und scharfe Benutzeroberfl\u00e4chen verlustfrei dargestellt werden k\u00f6nnen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein moderneres Format wie WebP kann je nach Screenshot jedoch eine deutlich kleinere Datei bei weiterhin sehr guter sichtbarer Qualit\u00e4t erzeugen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Deshalb solltest du insbesondere bei vielen Screenshots nicht allein aufgrund einer allgemeinen Regel immer PNG verwenden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was ist WebP?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WebP ist ein speziell f\u00fcr Webanwendungen entwickeltes Bildformat.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es unterst\u00fctzt sowohl verlustbehaftete als auch verlustfreie Kompression sowie Transparenz.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Damit kann WebP verschiedene Anwendungsbereiche abdecken, f\u00fcr die fr\u00fcher h\u00e4ufig unterschiedliche Formate verwendet wurden.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Foto\n  \u2193\nWebP m\u00f6glich\n\nGrafik\n  \u2193\nWebP m\u00f6glich\n\nTransparenz\n  \u2193\nWebP m\u00f6glich<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">WebP wird von aktuellen verbreiteten Browsern unterst\u00fctzt und ist f\u00fcr moderne Websites deshalb eine praktische Option.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Welche Vorteile bietet WebP?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bei vielen Bildern kann WebP gegen\u00fcber \u00e4lteren Formaten eine kleinere Dateigr\u00f6\u00dfe bei vergleichbarer sichtbarer Qualit\u00e4t erm\u00f6glichen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das ist insbesondere f\u00fcr Websites interessant, weil weniger zu \u00fcbertragende Bilddaten die Ladeperformance verbessern k\u00f6nnen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WebP ist au\u00dferdem flexibel, da sowohl verlustbehaftete als auch verlustfreie Kompression und Transparenz unterst\u00fctzt werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ist WebP immer kleiner als JPG oder PNG?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">No.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WebP kann sehr effizient sein, aber das Ergebnis h\u00e4ngt vom Bildinhalt und den gew\u00e4hlten Kodierungseinstellungen ab.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein schlecht konfiguriertes WebP kann gr\u00f6\u00dfer sein als eine bereits sehr gut optimierte JPG-Datei.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Deshalb solltest du Dateiformate nicht ausschlie\u00dflich anhand ihres Namens beurteilen.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Importante:<\/strong> \u201eWebP\u201c bedeutet nicht automatisch \u201eoptimiert\u201c. Auch ein WebP-Bild kann unn\u00f6tig gro\u00dfe Abmessungen, eine zu hohe Qualit\u00e4tseinstellung oder eine unn\u00f6tig gro\u00dfe Dateigr\u00f6\u00dfe besitzen.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Was ist AVIF?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">AVIF ist ein modernes Bildformat, das auf der AV1-Bildkompression basiert.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das Format unterst\u00fctzt unter anderem verlustbehaftete und verlustfreie Kompression sowie Transparenz.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">AVIF kann insbesondere bei fotografischen Inhalten eine hohe Kompressionseffizienz erreichen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dadurch lassen sich bei geeigneten Bildern und Einstellungen h\u00e4ufig sehr kleine Dateien mit guter sichtbarer Qualit\u00e4t erzeugen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Welche Vorteile bietet AVIF?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Der wichtigste Vorteil ist die m\u00f6gliche hohe Kompressionseffizienz.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei einem geeigneten Foto kann eine AVIF-Datei bei vergleichbarer visueller Qualit\u00e4t kleiner ausfallen als eine entsprechende Datei in einem \u00e4lteren Format.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das kann insbesondere bei gro\u00dfen, bildlastigen Websites interessant sein.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Welche Nachteile kann AVIF haben?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein modernes Format ist nicht automatisch in jedem Workflow die beste L\u00f6sung.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das Kodieren und Dekodieren komplexer Bildformate kann andere Anforderungen stellen als bei \u00e4lteren Formaten. Auch die verwendete Software, das CMS, Plugins, Bildbearbeitungsprogramme und der gew\u00fcnschte Fallback-Workflow spielen eine Rolle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei bestimmten Bildern kann au\u00dferdem WebP oder sogar ein gut optimiertes JPG bereits ein sehr gutes Ergebnis liefern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Du solltest AVIF deshalb als leistungsf\u00e4hige Option betrachten und nicht als Pflichtformat f\u00fcr jedes Bild.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">WebP oder AVIF?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Diese Frage l\u00e4sst sich nicht pauschal mit einem einzigen Sieger beantworten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">AVIF kann insbesondere bei Fotos eine sehr hohe Kompressionseffizienz erreichen. WebP ist ebenfalls effizient und in vielen bestehenden Website-Workflows sehr unkompliziert einsetzbar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei einem wichtigen Bild kannst du beide Varianten erzeugen und anschlie\u00dfend vergleichen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>WebP\nDateigr\u00f6\u00dfe: ?\nBildqualit\u00e4t: ?\n\nAVIF\nDateigr\u00f6\u00dfe: ?\nBildqualit\u00e4t: ?\n\n        \u2193\n\nf\u00fcr diesen Einsatzzweck\nbessere Variante w\u00e4hlen<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ein realer Vergleich ist aussagekr\u00e4ftiger als die pauschale Aussage, ein bestimmtes Format sei grunds\u00e4tzlich immer besser.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">JPG oder WebP?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr ein klassisches Foto kann ein gut optimiertes JPG bereits eine brauchbare L\u00f6sung sein.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WebP erm\u00f6glicht bei vielen Motiven jedoch eine effizientere Speicherung bei vergleichbarer sichtbarer Qualit\u00e4t und unterst\u00fctzt zus\u00e4tzlich Transparenz.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn dein Website-System WebP zuverl\u00e4ssig verarbeitet und ausliefert, ist WebP deshalb f\u00fcr viele fotografische Website-Bilder eine naheliegende Option.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein vorhandenes gut optimiertes JPG muss aber nicht allein wegen seiner Dateiendung zwangsl\u00e4ufig problematisch sein.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">PNG oder WebP?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Diese Entscheidung ist besonders bei Grafiken und Screenshots interessant.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn verlustfreie Darstellung und Transparenz ben\u00f6tigt werden, k\u00f6nnen grunds\u00e4tzlich sowohl PNG als auch WebP infrage kommen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vergleiche die resultierende Dateigr\u00f6\u00dfe und kontrolliere die Darstellung sorgf\u00e4ltig.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei Screenshots mit kleinen Texten oder feinen UI-Elementen sollte die Lesbarkeit immer erhalten bleiben.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was bedeutet verlustbehaftete Kompression?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bei verlustbehafteter Kompression werden Bildinformationen entfernt beziehungsweise vereinfacht, um die Dateigr\u00f6\u00dfe zu reduzieren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das ist nicht grunds\u00e4tzlich schlecht.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn die Kompression sinnvoll gew\u00e4hlt wird, k\u00f6nnen gro\u00dfe Mengen an Daten eingespart werden, ohne dass der Unterschied f\u00fcr einen Besucher bei normaler Betrachtung relevant ist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wird zu stark komprimiert, k\u00f6nnen jedoch sichtbare Qualit\u00e4tsverluste entstehen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was bedeutet verlustfreie Kompression?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bei verlustfreier Kompression werden die Bildinformationen so gespeichert, dass die urspr\u00fcnglichen Daten grunds\u00e4tzlich ohne die typischen Verluste einer verlustbehafteten Kompression rekonstruiert werden k\u00f6nnen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das ist beispielsweise bei bestimmten Grafiken, technischen Darstellungen oder Screenshots hilfreich.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Verlustfrei bedeutet allerdings nicht automatisch, dass die Datei klein ist.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was bedeutet Transparenz?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Bild mit Transparenz besitzt Bereiche, durch die der darunterliegende Hintergrund sichtbar bleibt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das ist beispielsweise bei einem freigestellten Logo hilfreich.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Website-Hintergrund\n\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\n\ntransparentes Logo\n      CURIAWEB\n\nErgebnis:\nLogo ohne eingebauten\nrechteckigen Hintergrund<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">PNG, WebP und AVIF k\u00f6nnen Transparenz unterst\u00fctzen. Klassisches JPEG unterst\u00fctzt sie nicht.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Welches Format f\u00fcr Fotos?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr normale Fotografien w\u00fcrde ich heute in erster Linie WebP und AVIF pr\u00fcfen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JPG bleibt eine m\u00f6gliche und breit kompatible Alternative.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Entscheidend ist das tats\u00e4chliche Ergebnis:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Foto\n \u2193\nWebP testen\n \u2193\nAVIF testen\n \u2193\noptional JPG vergleichen\n \u2193\nDateigr\u00f6\u00dfe + Qualit\u00e4t beurteilen<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Bei vielen allt\u00e4glichen Websites ist ein sauber optimierter WebP-Workflow bereits eine sehr gute L\u00f6sung.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Welches Format f\u00fcr Produktbilder?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Produktbilder m\u00fcssen h\u00e4ufig feine Details zeigen und gleichzeitig schnell geladen werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei fotografischen Produktbildern kommen deshalb insbesondere WebP und AVIF infrage. Auch ein gut optimiertes JPG kann verwendet werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Zu starke Kompression solltest du vermeiden, wenn dadurch wichtige Produktdetails verloren gehen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei einem Online-Shop ist nicht die kleinstm\u00f6gliche Datei das Ziel, sondern eine sinnvolle Balance zwischen Ladezeit und ausreichend guter Produktdarstellung.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Welches Format f\u00fcr Logos?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn ein Logo als echte Vektorgrafik vorliegt, kann SVG h\u00e4ufig geeigneter sein als s\u00e4mtliche hier verglichenen Rasterformate.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">SVG l\u00e4sst sich ohne den typischen Qualit\u00e4tsverlust eines Pixelbildes skalieren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Liegt das Logo dagegen nur als Rastergrafik vor und ben\u00f6tigt Transparenz, kommen beispielsweise PNG oder WebP infrage.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Nota:<\/strong> SVG ist ein eigenes Vektorformat und deshalb nicht direkt mit JPG, PNG, WebP und AVIF als Rasterbildformaten vergleichbar.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Welches Format f\u00fcr Icons?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Auch f\u00fcr Icons kann SVG h\u00e4ufig eine gute L\u00f6sung sein, sofern die Grafik tats\u00e4chlich als Vektor vorliegt und die technische Umgebung den Einsatz erlaubt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei Raster-Icons mit Transparenz k\u00f6nnen beispielsweise WebP oder PNG verwendet werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sehr kleine Icons sollten au\u00dferdem nicht unn\u00f6tig in riesigen Pixelabmessungen bereitgestellt werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Welches Format f\u00fcr Screenshots?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bei Screenshots ist die Lesbarkeit besonders wichtig.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">PNG eignet sich aufgrund der verlustfreien Darstellung h\u00e4ufig sehr gut f\u00fcr Benutzeroberfl\u00e4chen und kleine Texte.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WebP kann jedoch ebenfalls sehr gute Ergebnisse bei deutlich geringerer Dateigr\u00f6\u00dfe liefern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr einen Knowledgebase-Screenshot w\u00fcrde ich deshalb praktisch vergleichen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>PNG\n \u2193\nText scharf?\nDateigr\u00f6\u00dfe?\n\nWebP\n \u2193\nText scharf?\nDateigr\u00f6\u00dfe?\n\n        \u2193\n\nkleinere Variante w\u00e4hlen,\nwenn die Lesbarkeit gleich gut bleibt<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Genau deshalb verwenden wir auch f\u00fcr Knowledgebase-Screenshots keinen starren Zwang zu einem bestimmten Format.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Welches Format f\u00fcr Bilder mit transparentem Hintergrund?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn Transparenz erforderlich ist, scheidet klassisches JPEG aus.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Geeignete Kandidaten sind unter anderem:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>PNG\nWebP\nAVIF\nSVG bei geeigneten Vektorgrafiken<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Welches davon sinnvoll ist, h\u00e4ngt wiederum vom Bildtyp und dem technischen Workflow ab.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Welches Format f\u00fcr Hero-Bilder?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Gro\u00dfe Hero-Bilder k\u00f6nnen einen erheblichen Einfluss auf die \u00fcbertragene Datenmenge und die wahrgenommene Ladegeschwindigkeit haben.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei fotografischen Hero-Bildern sind WebP und AVIF deshalb besonders interessant.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wichtig sind zus\u00e4tzlich passende Pixelabmessungen und eine sinnvolle Qualit\u00e4tsstufe.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Hero-Bild wird nicht allein dadurch optimiert, dass du eine Datei von <code>.jpg<\/code> in <code>.webp<\/code> umwandelst.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Nur das Dateiformat zu \u00e4ndern reicht nicht<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Angenommen, ein Foto besitzt:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>6000 \u00d7 4000 Pixel<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">und wird lediglich von JPG nach WebP konvertiert.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Datei kann dadurch kleiner werden. Wenn das Bild auf der Website aber nur in wesentlich geringeren Abmessungen ben\u00f6tigt wird, werden weiterhin unn\u00f6tig viele Bildinformationen bereitgestellt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eine vollst\u00e4ndige Bildoptimierung ber\u00fccksichtigt deshalb mehrere Faktoren:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Bildabmessungen\n+\nDateiformat\n+\nKompression\n+\nBildqualit\u00e4t\n+\ntechnische Auslieferung<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Den gesamten Workflow erkl\u00e4ren wir unter <a href=\"\/it\/aiuto\/monitoraggio-seo\/bilder-fuer-web-optimieren\/\">Ottimizzare le immagini per il web: dimensione del file, formato e SEO<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dateiendung einfach umbenennen funktioniert nicht<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Bildformat wird nicht dadurch ge\u00e4ndert, dass du lediglich die Dateiendung umbenennst.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Da:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>foto.jpg<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">kannst du nicht durch blo\u00dfes Umbenennen:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>foto.webp<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">machen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Bilddaten m\u00fcssen tats\u00e4chlich in das neue Format kodiert beziehungsweise konvertiert werden.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Importante:<\/strong> \u00c4ndere eine Dateiendung nicht manuell, um ein anderes Bildformat vorzut\u00e4uschen. Verwende ein Bildbearbeitungs- oder Konvertierungswerkzeug, das das gew\u00fcnschte Format tats\u00e4chlich erzeugt.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Was passiert beim Konvertieren?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Beim Konvertieren wird das Ausgangsbild eingelesen und anschlie\u00dfend mit einem Encoder im neuen Dateiformat gespeichert.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Originalbild\n    \u2193\ndekodieren\n    \u2193\nBilddaten\n    \u2193\nmit neuem Format kodieren\n    \u2193\nneue Bilddatei<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Bei verlustbehafteter Ausgabe spielt dabei auch die gew\u00e4hlte Qualit\u00e4ts- beziehungsweise Kompressionsstufe eine wichtige Rolle.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ein bereits stark komprimiertes JPG nicht unn\u00f6tig weiter komprimieren<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn ein JPEG bereits deutlich verlustbehaftet komprimiert wurde, stellt eine sp\u00e4tere Konvertierung in WebP oder AVIF die zuvor verlorenen Bildinformationen nicht wieder her.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nach M\u00f6glichkeit solltest du neue Webversionen deshalb aus einer hochwertigen Ausgangsdatei erzeugen.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>hochwertiges Original\n       \u2193\nWebP \/ AVIF \/ JPG erzeugen\n\nbesser als:\n\nstark komprimiertes JPG\n       \u2193\nerneut verlustbehaftet konvertieren\n       \u2193\nweitere m\u00f6gliche Qualit\u00e4tsverluste<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Browserunterst\u00fctzung ber\u00fccksichtigen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bei einem Webformat muss der Browser des Besuchers die Datei darstellen k\u00f6nnen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WebP und AVIF werden von aktuellen verbreiteten Browsern unterst\u00fctzt. Bei sehr alten Browsern kann die Situation anders aussehen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ob du daf\u00fcr Fallback-Dateien ben\u00f6tigst, h\u00e4ngt von deiner Zielgruppe, dem eingesetzten Website-System und den Browsern ab, die du tats\u00e4chlich unterst\u00fctzen m\u00f6chtest.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Moderne Websites k\u00f6nnen unterschiedliche Bildquellen anbieten und den Browser eine unterst\u00fctzte Variante ausw\u00e4hlen lassen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mehrere Formate mit dem picture-Element anbieten<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML erm\u00f6glicht es, unterschiedliche Bildquellen bereitzustellen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vereinfacht kann das beispielsweise so aussehen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;picture&gt;\n  &lt;source srcset=&quot;bild.avif&quot; type=&quot;image\/avif&quot;&gt;\n  &lt;source srcset=&quot;bild.webp&quot; type=&quot;image\/webp&quot;&gt;\n  &lt;img src=&quot;bild.jpg&quot; alt=&quot;Beschreibung des Bildes&quot;&gt;\n&lt;\/picture&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ein kompatibler Browser kann dadurch ein unterst\u00fctztes Format ausw\u00e4hlen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Du musst eine solche Struktur allerdings nicht zwingend manuell erstellen. Moderne CMS, Optimierungswerkzeuge oder Content-Delivery-Systeme k\u00f6nnen solche Aufgaben teilweise automatisch \u00fcbernehmen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bildformat und responsive Bilder sind unterschiedliche Dinge<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Das Bildformat beantwortet die Frage, <strong>wie<\/strong> die Bilddaten gespeichert werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Responsive Images beantworten dagegen unter anderem die Frage, <strong>welche Bildgr\u00f6\u00dfe beziehungsweise Variante<\/strong> f\u00fcr eine bestimmte Darstellung geladen werden soll.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Beide Techniken k\u00f6nnen kombiniert werden.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Format:\nAVIF \/ WebP \/ JPG\n\n+\n\nAbmessung:\nklein \/ mittel \/ gro\u00df\n\n=\n\npassende Bildvariante\nf\u00fcr das jeweilige Ger\u00e4t<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Welches Format ist am besten f\u00fcr SEO?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Es gibt kein Bildformat, das allein aufgrund seiner Dateiendung automatisch bessere Rankings erzeugt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr SEO ist vielmehr relevant, dass Bilder technisch sinnvoll eingebunden werden und die Website insgesamt gut funktioniert.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dazu geh\u00f6ren unter anderem angemessene Dateigr\u00f6\u00dfen, passende Abmessungen, gute Ladeperformance, sinnvolle Alternativtexte und ein inhaltlicher Zusammenhang mit der Seite.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Wichtig f\u00fcr SEO:<\/strong> Eine Datei wird nicht allein deshalb \u201eSEO-optimiert\u201c, weil sie im WebP- oder AVIF-Format vorliegt.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Bildformate und Ladezeit<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein effizienteres Bildformat kann die zu \u00fcbertragende Datenmenge reduzieren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wie stark sich das auf die tats\u00e4chliche Ladezeit auswirkt, h\u00e4ngt jedoch von der gesamten Seite ab.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eine Website kann beispielsweise bereits kleine Bilder besitzen, aber durch JavaScript, externe Dienste oder andere Ressourcen langsam sein.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wie du die Ladezeit einer Website sinnvoll misst, erkl\u00e4ren wir unter <a href=\"\/it\/aiuto\/monitoraggio-seo\/website-ladezeit-messen\/\">Misurare e valutare correttamente il tempo di caricamento del sito web<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bildformate und Core Web Vitals<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Effiziente Bilder k\u00f6nnen insbesondere dann relevant sein, wenn ein gro\u00dfes Bild einen wichtigen sichtbaren Seiteninhalt darstellt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das Dateiformat ist dabei aber nur ein Faktor. Auch Ladepriorit\u00e4t, Abmessungen, Serverantwort, Caching und die \u00fcbrige Seitenstruktur k\u00f6nnen eine Rolle spielen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die entsprechenden Messwerte erkl\u00e4ren wir unter <a href=\"\/it\/aiuto\/monitoraggio-seo\/core-web-vitals-lcp-inp-cls\/\">Core Web Vitals spiegati: LCP, INP e CLS<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was sagt Google PageSpeed Insights zu Bildformaten?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Performance-Werkzeuge k\u00f6nnen darauf hinweisen, dass Bilder effizienter kodiert oder in besser geeigneten Formaten ausgeliefert werden k\u00f6nnten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Solche Hinweise sind n\u00fctzlich, sollten aber nicht isoliert betrachtet werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn die Einsparung sehr klein ist, w\u00e4hrend eine Konvertierung sichtbare Qualit\u00e4tsprobleme verursacht oder den Workflow unn\u00f6tig kompliziert, muss die Ma\u00dfnahme nicht automatisch h\u00f6chste Priorit\u00e4t haben.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wie du solche Hinweise einordnest, behandeln wir unter <a href=\"\/it\/aiuto\/monitoraggio-seo\/google-pagespeed-insights\/\">Usare correttamente Google PageSpeed Insights<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kann ich alle PNG-Dateien automatisch in WebP umwandeln?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Technisch k\u00f6nnen viele Systeme Bilder automatisiert konvertieren. Trotzdem solltest du nicht davon ausgehen, dass jede automatische Konvertierung in jedem Fall ein besseres Ergebnis liefert.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Controlla in particolare:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Transparenz\nBildqualit\u00e4t\nfeine Texte\nscharfe Kanten\nDateigr\u00f6\u00dfe\nDarstellung im Browser<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Bei einer gro\u00dfen Bildbibliothek empfiehlt sich deshalb zun\u00e4chst ein Test mit unterschiedlichen Bildtypen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Soll ich bestehende JPG-Bilder alle ersetzen?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Non necessariamente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn eine vorhandene JPG-Datei bereits gut dimensioniert und effizient komprimiert ist, kann der praktische Nutzen einer nachtr\u00e4glichen Umstellung gering sein.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Priorisiere zun\u00e4chst Bilder, die tats\u00e4chlich auff\u00e4llig gro\u00df sind oder auf wichtigen Seiten einen relevanten Anteil der \u00fcbertragenen Daten verursachen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Welches Format sollte ich f\u00fcr neue Bilder verwenden?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr viele moderne Websites kann folgende Orientierung sinnvoll sein:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Anwendungsfall<\/th><th>Erste Wahl zum Testen<\/th><th>Alternative<\/th><\/tr><\/thead><tbody><tr><td>Foto<\/td><td>WebP oder AVIF<\/td><td>JPG<\/td><\/tr><tr><td>Hero-Foto<\/td><td>WebP oder AVIF<\/td><td>JPG<\/td><\/tr><tr><td>Produktfotografie<\/td><td>WebP oder AVIF<\/td><td>JPG<\/td><\/tr><tr><td>Screenshot<\/td><td>WebP oder PNG<\/td><td>je nach Qualit\u00e4tsvergleich<\/td><\/tr><tr><td>Grafik mit Transparenz<\/td><td>WebP<\/td><td>PNG oder AVIF<\/td><\/tr><tr><td>Logo als Vektor<\/td><td>SVG<\/td><td>WebP oder PNG bei Rastergrafik<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Auch diese Tabelle ist keine starre Vorschrift. Das konkrete Ergebnis sollte immer gepr\u00fcft werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Unsere Empfehlung f\u00fcr Knowledgebase-Screenshots<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr Screenshots von Benutzeroberfl\u00e4chen ist eine hohe Lesbarkeit wichtiger als die kleinstm\u00f6gliche Dateigr\u00f6\u00dfe.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein sinnvoller Workflow lautet deshalb:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>relevanten Bereich ausschneiden\n        \u2193\nsinnvolle Pixelbreite w\u00e4hlen\n        \u2193\nWebP erzeugen\n        \u2193\nLesbarkeit kontrollieren\n        \u2193\nmit PNG vergleichen, falls n\u00f6tig\n        \u2193\nkleinere geeignete Variante verwenden<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn WebP sichtbare Nachteile bei kleinen Schriften oder feinen UI-Elementen verursacht, kann PNG die bessere Wahl sein.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Entscheidungshilfe: Welches Bildformat soll ich nehmen?<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>Ist das Bild eine Vektorgrafik?\n        \u2502\n        \u251c\u2500\u2500 JA \u2192 SVG pr\u00fcfen\n        \u2502\n        \u2514\u2500\u2500 NEIN\n             \u2193\n        Ist es ein Foto?\n             \u2502\n             \u251c\u2500\u2500 JA \u2192 WebP \/ AVIF testen\n             \u2502          \u2193\n             \u2502        JPG als Alternative\n             \u2502\n             \u2514\u2500\u2500 NEIN\n                  \u2193\n            Transparenz n\u00f6tig?\n                  \u2502\n                  \u251c\u2500\u2500 JA \u2192 WebP \/ PNG \/ AVIF\n                  \u2502\n                  \u2514\u2500\u2500 NEIN\n                       \u2193\n                  Screenshot oder Grafik?\n                       \u2502\n                       \u2514\u2500\u2500 WebP \/ PNG vergleichen<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Qualit\u00e4t und Dateigr\u00f6\u00dfe immer gemeinsam beurteilen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Angenommen, du erzeugst aus demselben Foto mehrere Varianten:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>JPG\n380 KB\n\nWebP\n260 KB\n\nAVIF\n190 KB<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Aus diesen Zahlen allein solltest du noch nicht automatisch AVIF ausw\u00e4hlen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00d6ffne die Dateien und vergleiche die sichtbare Qualit\u00e4t.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn die AVIF-Version gleichwertig aussieht, ist die kleinere Datei attraktiv. Zeigt sie dagegen st\u00f6rende Artefakte, kann die etwas gr\u00f6\u00dfere WebP-Version das bessere Ergebnis sein.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Regola fondamentale:<\/strong> Vergleiche nicht nur Kilobytes. Vergleiche immer Kilobytes und sichtbare Qualit\u00e4t.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">H\u00e4ufige Fehler bei der Wahl des Bildformats<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>jedes Bild automatisch als PNG speichern\n\njedes JPG ungepr\u00fcft durch WebP ersetzen\n\nAVIF allein wegen der m\u00f6glichen Dateigr\u00f6\u00dfe verwenden\n\nDateiendung nur umbenennen statt konvertieren\n\nTransparenz nicht ber\u00fccksichtigen\n\nScreenshots so stark komprimieren, dass Text unscharf wird\n\nriesige Pixelabmessungen trotz modernem Format beibehalten\n\nFormat mit vollst\u00e4ndiger Bildoptimierung verwechseln<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Praktischer Workflow<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>Bildtyp bestimmen\n        \u2193\nEinsatzzweck bestimmen\n        \u2193\npassende Abmessungen festlegen\n        \u2193\ngeeignete Formate ausw\u00e4hlen\n        \u2193\nVarianten erzeugen\n        \u2193\nDateigr\u00f6\u00dfe vergleichen\n        \u2193\nBildqualit\u00e4t vergleichen\n        \u2193\nTransparenz pr\u00fcfen\n        \u2193\nbeste geeignete Variante verwenden\n        \u2193\nDarstellung auf der Website testen<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Riepilogo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WebP, AVIF, JPG und PNG besitzen unterschiedliche St\u00e4rken. Deshalb gibt es kein einzelnes Format, das f\u00fcr jedes Website-Bild automatisch die beste Wahl ist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JPG eignet sich weiterhin f\u00fcr fotografische Inhalte und besitzt eine sehr breite Unterst\u00fctzung. PNG ist besonders f\u00fcr verlustfreie Grafiken, Screenshots und Transparenz relevant. WebP kombiniert effiziente Kompression mit Unterst\u00fctzung f\u00fcr Transparenz und eignet sich dadurch f\u00fcr viele moderne Website-Bilder. AVIF kann insbesondere bei Fotos eine sehr hohe Kompressionseffizienz erreichen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr Logos und Icons kann zus\u00e4tzlich SVG sinnvoll sein, wenn das Ausgangsmaterial als Vektorgrafik vorliegt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei der Entscheidung solltest du nicht nur das Format betrachten. Pixelabmessungen, Kompression, sichtbare Qualit\u00e4t und die technische Einbindung sind mindestens ebenso wichtig.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Das beste Bildformat ist nicht automatisch das modernste oder das mit der kleinsten Datei \u2013 sondern das Format, das f\u00fcr den konkreten Einsatzzweck die beste Kombination aus Qualit\u00e4t, Dateigr\u00f6\u00dfe und technischer Eignung liefert.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>JPG, PNG, WebP oder AVIF? Wer Bilder f\u00fcr eine Website vorbereitet, steht schnell vor der Frage, welches Dateiformat die beste Wahl ist. Eine pauschale Antwort gibt es nicht. Ein Foto stellt andere Anforderungen als ein Logo, ein Screenshot oder eine Grafik mit transparentem Hintergrund. Die Formate unterscheiden sich unter anderem bei Kompression, Transparenz, Dateigr\u00f6\u00dfe und [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"doc_category":[85],"doc_tag":[],"class_list":["post-22889","docs","type-docs","status-publish","hentry","doc_category-seo-monitoring"],"year_month":"2026-09","word_count":3309,"total_views":"4","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Silvio Mazenauer","author_nicename":"admin-curia","author_url":"https:\/\/www.curiaweb.ch\/it\/author\/admin-curia\/"},"doc_category_info":[{"term_name":"SEO &amp; Monitoring","term_url":"https:\/\/www.curiaweb.ch\/it\/hilfe-kategorie\/seo-monitoring\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/docs\/22889","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/comments?post=22889"}],"version-history":[{"count":1,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/docs\/22889\/revisions"}],"predecessor-version":[{"id":22891,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/docs\/22889\/revisions\/22891"}],"wp:attachment":[{"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/media?parent=22889"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/doc_category?post=22889"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/doc_tag?post=22889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}