SVG vs PNG/JPG: Warum das Vektorformat für Performance und SEO entscheidend ist

PNG und JPG: Perfekt für Fotos, zu groß für Benutzeroberflächen

PNG und JPG sind Rasterformate: Das Bild ist ein Raster aus Pixeln. Ein als PNG 512×512 exportiertes Logo „fotografiert“ jeden Punkt. Um auf einem Retina-Bildschirm scharf zu bleiben, müssen Sie oft eine zwei- oder dreimal so große Version bereitstellen, also zwei- oder dreimal so viele KB. JPG komprimiert Fotos besser, zerstört aber flache Farben, fügt Artefakte um Texte hinzu und unterstützt keine Transparenz. Beide eignen sich nicht für ein Logotyp oder Icon, das in der Navigation mit 24 px und im Header mit 240 px angezeigt werden soll.

SVG (Scalable Vector Graphics) beschreibt Formen durch Kurven und Koordinaten, nicht durch Pixel. Ein PNG mit PixelToPath zu vektorisieren bedeutet, eine feste Bitmap durch einen Pfad zu ersetzen, den der Browser in exakt der benötigten Bildschirmgröße neu zeichnet. Das Ergebnis: Eine meist deutlich kleinere Datei und identische Schärfe auf Smartphone, Desktop und 4K-Display.

Was SVG konkret für eine Website verändert

Für die Benutzeroberfläche ist SVG kein ästhetisches „Extra“. Es ist ein Performance-Hebel: weniger Bytes im Netzwerk, weniger Varianten zu verwalten, einfacherer Cache und natives Vektor-Rendering in allen modernen Browsern.

Die sichtbarsten Vorteile für Entwickler oder SEOs:

• Dateigröße: Ein einfaches Logo schrumpft oft von 40-80 KB als PNG auf wenige KB als SVG, und Sie sparen sich die @2x / @3x Exporte
• Skalierbarkeit: Eine Datei, gestochen scharf von 16 px bis zum 4K-Vollbild, ohne srcset oder Image Media Queries
• Core Web Vitals: Weniger Daten zum Herunterladen (LCP) und ein stabiler Platzhalter dank viewBox (CLS)
• Technisches SEO: Schnellere Seiten auf Mobilgeräten, ein Format, das Google interpretieren kann, und Text, der im SVG vorhanden sein kann

PNG vs SVG: Das Gewicht eines Logos ist nicht zu unterschätzen

Bilder sind nach wie vor einer der größten Gewichtsblöcke einer Seite. Man optimiert Fotos zu WebP, vergisst aber das Header-Logo und die etwa 20 PNG-Icons im CSS. Doch genau diese Dateien wiederholen sich auf allen URLs: Jede verlorene Millisekunde betrifft die gesamte Website.

Größenordnungen nach der Vektorisierung mit PixelToPath, basierend auf dem typischen Szenario einer Showcase-Website oder Web-App:

Szenario	PNG / JPG	SVG
512-px-Logo mit Transparenz	40 bis 80 KB	2 bis 12 KB, je nach Anzahl der Farben und Knoten
Dasselbe Logo, ausgeliefert als @2x (1024 px) für Retina	Das Gewicht verdoppelt sich, manchmal verdreifacht es sich	Eine einzige Datei, unverändert
20 UI-Icons, exportiert als @3x (72×72)	40 bis 160 KB zusätzlich	Insgesamt nur wenige KB
Logo mit Flächenfarben aus einem JPG	Artefakte und Halos um Formen und Text	Saubere Kanten und eine noch kleinere Datei

Die Regel ist einfach: Alles was eine Form, ein Text, ein Piktogramm oder ein Logotyp ist, profitiert von SVG. Fotos und Screenshots bleiben JPG, WebP oder AVIF. SVG ist kein universeller Ersatz: Es ist das richtige Format für die Benutzeroberfläche.

Skalierbarkeit: Eine Datei scharf vom Smartphone bis 4K

Ein PNG ist nur in seiner nativen Auflösung scharf. Wird es vergrößert, sieht man Pixel. Wird es stark verkleinert, muss der Browser es neu berechnen. Daher die Jonglage mit @1x, @2x, @3x Dateien, srcset und CSS-Pixeldichten. Jeder neue Breakpoint oder neue Bildschirmdichte (Retina, moderne Smartphones, 4K-Monitore) erfordert einen neuen Export oder eine viel zu große Datei „für alle Fälle“.

Ein SVG ignoriert diese Einschränkung. Die Rendering-Engine berechnet die Kurven in der angeforderten CSS-Größe. 32 px Favicon, 48 px Logo in der Navigation, dieselbe Marke mit 400 px im Header, 4K-Projektion: Es ist dieselbe Datei. Kein Unschärfe, kein Aliasing, keine zweite Anfrage für die High-Density-Version. Für eine Komponentenbibliothek bedeutet dies auch weniger technische Schulden: ein Icon, eine Datei, alle Größen.

Core Web Vitals und SEO: Warum sich Google um das Format kümmert

Mobile Geschwindigkeit ist ein Ranking-Faktor. Die Core Web Vitals (LCP, INP, CLS) messen, was der Nutzer empfindet. Wenn Sie ein schweres PNG-Logo oder eine Reihe von Raster-Icons durch SVGs ersetzen, schrumpft eine Seite nicht von 4 MB auf 40 KB. Aber beim Design der Website ist der Effekt sofort spürbar, besonders bei einer 4G-Verbindung oder einem LCP, der vom Header-Logo blockiert wird.

Konkret hilft das Vektorformat bei drei Metriken, vorausgesetzt die Pfadkomplexität bleibt angemessen:

• LCP (Largest Contentful Paint): Wenn das größte sichtbare Element ein Logo oder eine flache Illustration ist, wird ein SVG mit wenigen KB schneller geladen als ein 150 KB PNG @2x. Weniger Netzwerkstaus für den Rest der Seite
• CLS (Cumulative Layout Shift): Ein SVG mit width, height und viewBox reserviert seinen Platz bereits beim HTML-Parsing. Man muss nicht auf die Dekodierung einer Bitmap warten, um das Verhältnis zu kennen – das bedeutet weniger Layout-Verschiebungen
• INP und Haupt-Thread: Ein einfaches SVG (Logo, Icon) kostet wenig Rechenleistung. Vermeiden Sie jedoch „Foto“-SVGs mit Tausenden von Pfaden: Sie können mehr als ein PNG wiegen und den Prozessor belasten. Darum ist ein sauberer Pfad über PixelToPath wichtig, keine Pixel-für-Pixel-Kopie
• SEO jenseits der Geschwindigkeit: Google indexiert SVGs. Ein eingebettetes Logo kann einen barrierefreien Titel tragen. Ein SVG-Bild mit einem alt-Attribut bleibt die Basis. Und eine leichtere Seite reduziert die technische Absprungrate – ein Erfahrungssignal, das beim Ranking berücksichtigt wird

Wo SVG PNG/JPG auf einer echten Website übertrifft

Das ist nicht theoretisch. Hier sind die Bereiche, in denen sich das Vektorformat sofort auszahlt:

• Header- und Footer-Logo: Eine einzige Datei, scharf in Retina, oft eines der meistgesehenen Elemente und manchmal das LCP auf einer minimalistischen Startseite
• Icon-System: Schluss mit 1x/2x PNG-Sprites. Jedes Piktogramm ist ein SVG (oder SVG-Sprite), das per CSS (currentColor) gestaltet werden kann, ohne neuen Export
• Favicon und Apple-Touch: Ein modernes SVG-Favicon plus ein PNG-Fallback vermeidet unzählige Größen (16, 32, 180 px), die gewartet werden müssen
• UI-Illustrationen und leere Zustände: Flache Vektorzeichnungen bleiben im Vollbildmodus scharf, ohne das Gewicht eines Header-Bildes zu verursachen
• SEO Landing Page: Jedes gesparte KB beim Design verbessert Lighthouse, PageSpeed Insights und das mobile Erlebnis – Signale, die das Ranking beeinflussen

Behalten Sie JPG/WebP für Fotos. Stellen Sie Logos, Piktogramme und flache Illustrationen auf SVG um. Das ist die Aufteilung, die die schnellsten Websites bereits anwenden.