Welches Format eignet sich besser zum Speichern von Bildern für Websites? PNG oder SVG?

Soll ich Bilder mit transparentem Hintergrund, die für Websites bestimmt sind, als PNG oder SVG speichern, wenn ich sie exportiere / speichere? Warum?

Ich würde PNG einfach deshalb sagen, weil es ein akzeptierteres Format zu sein scheint als SVG.

Die einfache Antwort hier ist beide.

Die Tatsache, dass Sie SVG als Option angegeben haben, bedeutet, dass wir Fotografiken als beabsichtigten Anwendungsfall ausschließen können - da SVGs nur für Strichgrafiken wie Logos, Symbole und ClipArt-ähnliche Illustrationen geeignet sind.

Wenn Sie diese Option für Fotografiken in Betracht ziehen, haben Sie keine andere Wahl. PNG wird wahrscheinlich immer besser sein. Für Grafiken, bei denen SVG eine praktikable Option ist, ist SVG die beste Option mit einem PNG / JPEG-Fallback. PNG hat viele Stärken, aber in Bezug auf Skalierbarkeit und Dateigröße wird es oft nicht mit SVG mithalten können.

Wenn Sie nur das eine oder andere Mittel verwenden, müssen Sie entweder die Abwärtskompatibilität oder die progressive Verbesserung opfern.

Wenn man sie gegeneinander abwägt, wird PNG zum jetzigen Zeitpunkt sicherlich von mehr Browsern als SVG unterstützt, aber die Auflösungen neu veröffentlichter Geräte nehmen ständig zu, was bedeutet, dass PNGs entweder auf der Grundlage einer Vielzahl unterschiedlicher Auflösungen bereitgestellt werden müssen ^{(über Media Queries, JavaScript oder User Agent Sniffing)} oder durch die Browser skaliert, was zu unvollständigen Ergebnissen führen kann.

Blick auf das, was wir wissen, was die Zukunft bringt; Für immer höhere Auflösungen, breitere Unterstützung und breitere Verwendung von SVGs im Internet; es ist sinnvoll, für das zu bauen, was kommt.

Im Allgemeinen sollten Websites so gestaltet sein, dass sie viele Jahre halten. In 5 Jahren könnte Ihre wunderschön abwärtskompatible Website für 2% der Internetnutzer, die immer noch alte Browser verwenden, erstaunlich aussehen, aber die aktuellen Browser mit verrückten Auflösungen noch nicht so gut beherrschen Kompromiss.

Ihre Optionen im November 2014

1. Nur PNGs

   • Aus Qualitätsgründen müssen Sie je nach Bildschirmgröße und Auflösung mindestens fünf verschiedene Versionen bereitstellen - und das ist eine sehr konservative Schätzung. Sie könnten am Ende 10 bis 15 Versionen desselben Bildes haben, wenn Sie äußerst gründlich sein möchten . Die Implementierung dauert ebenfalls einige Zeit.

   • Wenn Sie eine einzelne Grafik bereitstellen und den Browser skalieren lassen, sind die Ergebnisse wahrscheinlich nicht perfekt und können je nach Ausmaß der Skalierung sogar hässlich sein.

   • Eine große Anzahl von Medienabfragen könnte das CSS unnötig aufblähen und sich negativ auf die Seitenladegeschwindigkeit auswirken.

   • Sieht auf älteren Browsern und Geräten gut aus, aber auf neueren nicht so gut.

2. SVGs mit einzelnem PNG / JPEG / GIF-Fallback

   • Sie können SVGs überall verwenden und dann auf ein anderes Format für Browser zurückgreifen, die SVG nicht unterstützen. Der Hauptvorteil ist, dass Sie für alle Auflösungen nur eine Datei benötigen.

   • Wenn Sie gefährden und akzeptieren, dass Benutzer in veralteten Browsern mit nicht perfekt skalierten Grafiken leben können, benötigen Sie nur eine weitere Version jeder Datei im PNG-, JPEG- oder GIF-Format.

   • Die Implementierung würde ungefähr so ​​viel Zeit in Anspruch nehmen wie die Implementierung von Medienabfragen nur für PNG - möglicherweise sogar noch weniger.

   • Sieht auf allen neuen Geräten großartig aus, wobei auf ältere Technologien verzichtet werden kann.

3. SVG mit mehreren PNG / JPEG / GIF-Fallbacks, abhängig von Auflösung und Bildschirmgröße

   • Sie könnten zuerst SVG und dann auflösungsabhängige PNGs für Browser bereitstellen, die SVG nicht unterstützen. Dies wäre die gründlichste, vorwärts- und rückwärtskompatibelste, konsistenteste und teuerste Option.

   • Es würde wahrscheinlich genauso viel Zeit in Anspruch nehmen wie 1 & 2 zusammen, plus ein bisschen mehr für das Ausarbeiten der Knicke.

   • Sieht auf ^fast jedem Gerät fantastisch aus .

Zusammenfassend denke ich , es hängt davon ab , ob Sie sich für weitere Abwärtskompatibilität oder progressiver Erweiterung suchen, und wie viel Geld Zeit Sie haben zu verbringen.

SVG ist skalierbar, wenn Sie eine Vektorgrafik haben, was ein klarer Vorteil ist. Für Pixelgrafiken ist PNG besser. Ein Nachteil ist, dass der Internet Explorer SVG nur mit der kommenden Version 9 unterstützt (vorher mit Plugin). Mobile Browser unterstützen SVG möglicherweise nur eingeschränkt.

EDIT : Wie ClemDesm weist darauf hin, ältere IE-Versionen unterstützen nicht vollständig transparent PNG, da IE8 , die unterstützt wird. Nicht transparente PNGs funktionieren einwandfrei. Die Antwort von Computerish bietet eine großartige Lösung für den Umgang mit Vektorgrafiken: Behalten Sie sie als SVG bei, exportieren Sie sie jedoch für das Web als PNG. Ich stimme dieser Lösung voll und ganz zu.

Verwenden Sie auf jeden Fall PNG für eine Website. SVG wird einfach nicht ausreichend unterstützt und bietet für einen abgeflachten Export nur wenige (wenn überhaupt) signifikante Vorteile gegenüber PNG. Behalten Sie trotzdem alle Ihre Arbeitskopien in SVG.

Ich würde bei PNG bleiben, um auf der sicheren Seite zu sein. SVG wird von vielen großen Internetunternehmen und Browsern immer noch nicht vollständig akzeptiert. Obwohl SVGs skalierbar und Vektoren sind, sind sie oft unnötig, beanspruchen mehr Platz und machen die Website überkompliziert.

Ich hoffe das hat deine Frage beantwortet :)

Auch wenn SVG nicht global akzeptiert wird und einige Leute eine frustrierende Zeit haben, um PNGs zu skalieren, habe ich immer festgestellt, dass das Erstellen eines Symbols in Adobe Illustrator am besten dazu geeignet ist, einen "angemessenen" Betrag zu vergrößern oder zu verkleinern.