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

Soll ich beim Exportieren/Speichern von Bildern mit transparentem Hintergrund, die für Websites bestimmt sind, diese als PNG oder SVG speichern? Wieso den?

Antworten (6)

Die einfache Antwort hier ist, beides zu verwenden.

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

Wenn Sie diese Wahl für Fotografiken in Betracht ziehen, gibt es keine 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 verwenden, müssen Sie entweder auf Abwärtskompatibilität oder progressive Erweiterung verzichten.

Wenn man sie gegeneinander abwägt, wird PNG zum jetzigen Zeitpunkt sicherlich von mehr Browsern unterstützt als SVG, 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 von den Browsern skaliert, was zu unvollkommenen Ergebnissen führen kann.

Betrachten wir, was wir über die Zukunft wissen; immer höhere Auflösungen, breitere Unterstützung und breitere Verwendung von SVGs im Internet; es macht Sinn, für das zu bauen, was kommt.

Im Allgemeinen sollten Websites so aufgebaut sein, dass sie viele Jahre halten; in 5 Jahren könnte Ihre wunderbar abwärtskompatible Website für die 2 % der Internetnutzer, die immer noch alte Browser verwenden, erstaunlich aussehen, aber ziemlich arm an aktuellen Browsern mit verrückten Auflösungen sein - es ist also eine Menge schwerer Entscheidungen, wie es weitergehen soll Kompromiss.

Ihre Optionen im November 2014

  1. Nur PNGs

    • Aus Gründen der Qualität müssen Sie je nach Bildschirmgröße und Auflösung mindestens fünf verschiedene Versionen bereitstellen - und das ist eine sehr vorsichtige Schätzung, Sie könnten am Ende 10 bis 15 Versionen desselben Bildes erhalten, wenn Sie extrem gründlich sein möchten . Auch die Umsetzung dauert einige Zeit.

    • Wenn Sie sich dafür entscheiden, eine einzelne Grafik bereitzustellen und diese vom Browser skalieren zu lassen, werden die Ergebnisse wahrscheinlich weniger als perfekt sein und können je nach Skalierung sogar hässlich sein.

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

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

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

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

    • Wenn Sie Kompromisse eingehen und akzeptieren, dass Benutzer veralteter Browser mit unvollkommen skalierten Grafiken leben können, benötigen Sie nur eine andere Version jeder Datei im PNG-, JPEG- oder GIF-Format.

    • Die Implementierung würde ähnlich viel Zeit in Anspruch nehmen wie die PNG-Nur-Medienabfragen - möglicherweise sogar weniger, was bedeutet, dass es wahrscheinlich ungefähr den gleichen Preis haben würde.

    • Wird auf allen neuen Geräten großartig aussehen, wobei ältere Technologien geopfert werden.

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

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

    • Es würde wahrscheinlich so viel Zeit in Anspruch nehmen wie 1 & 2 zusammen, plus ein wenig mehr, um die Knicke auszuarbeiten.

    • Wird auf fast jedem Gerät fantastisch aussehen.

Zusammenfassend denke ich, dass es davon abhängt, ob Sie nach mehr Abwärtskompatibilität oder progressiverer Verbesserung suchen und wie viel Geld und Zeit Sie aufwenden müssen.

Sie könnten etwas über das <picture>Element erwähnen, das bei verschiedenen Bildgrößen hilft

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

BEARBEITEN : Wie ClemDesm betont, unterstützen ältere IE-Versionen kein vollständig transparentes PNG, da IE8 das unterstützt. Nicht transparente PNGs funktionieren gut. Die Antwort von Computerish hat vorerst eine großartige Lösung für den Umgang mit Vektorgrafiken: Behalte sie als SVG, aber exportiere sie für das Web als PNG. Ich stimme dieser Lösung voll und ganz zu.

-1 Svg wird immer noch nicht global unterstützt. Ich würde die Verwendung nicht vorschlagen, wenn Sie nicht klar erklären, wo es funktioniert, und eine Rückfallalternative für den Fall, dass es nicht funktioniert (höchstwahrscheinlich). Wir müssen die Webstandards berücksichtigen, die wir zu erreichen versuchen. Wenn die Wahl für das Web und für PNG oder SVG ist, sollte es immer PNG sein, bis SVG von Browsern einer älteren Generation global unterstützt wird. Ich würde gerne SVG-Perfektion verwenden, aber es ist noch nicht Realität.
Wie ich geschrieben habe, hat der IE keine SVG-Unterstützung (nur in der bisher zukünftigen Version 9) und der mobile Browser kann auch keine Unterstützung haben.
@Littlemad: Die Ablehnung ist etwas übertrieben, da 1- die Antwort uns sagt, dass es nicht vollständig unterstützt wird (ok, nicht so viele Details, aber es wird gesagt und nicht falsch, verdient keinen -1) 2- PNG-Alphakanal wird in IE6 & 7 auch nicht unterstützt und kein Wort darüber? :)
@ClemDesm: Ah, guter Hinweis, ältere IEs unterstützen transparente PNGs nicht vollständig.
(Ich habe versucht, die Abstimmung nach unten zu entfernen, das war meines Erachtens eher eine persönliche Meinung, die unwahr ist, aber jetzt kann ich nur nach unten oder oben stimmen. Entschuldigung.) PNG wird nur in IE6 und IE7 nicht gut unterstützt, und das ist es behebbar mit dem richtigen proprietären CSS für IE oder Hinzufügen eines .htc-Verhaltens. SVG wird in vielen neueren Browsern nicht unterstützt (Referenz: codedread.com/svg-support.php ) und erfordert manchmal eine Plugin-Installation von einem Teil des Clients/Benutzers und nicht vom Entwickler, um visualisiert zu werden. Der Rest hängt bei mir noch am PNG.
@Littlemad "wird in vielen neueren Browsern nicht unterstützt" Das scheint eine falsche Schlussfolgerung zu sein, da in der verlinkten Referenz nur ein Browser steht, der SVG (IE8) nicht verarbeiten kann. Sie müssen auch keine Plugins installieren, um SVG zu verwenden (nie gesehen, vielleicht in IE6). Was Sie in der verlinkten Referenz rot sehen, sind Teile von SVG, die Sie meistens nicht verwenden (meistens irgendeine Art von Filtern oder anderen Effekten). Die Grundlagen funktionieren.
@feela die Unterstützung zeigt, dass der Prozentsatz niedrig ist. Es sind keine 7 Monate von der Post vergangen, aber IE8 ist es immer noch bei uns. Alles, was Sie tun können, ist, eine Alternative für den IE und eine für den Rest zu erstellen. Was bringt es, Code für Bilder zu duplizieren (einen für nicht unterstützend und einen für unterstützend), wenn Sie keine wirklich gute Verwendung für SVG haben, die die Duplizierung rechtfertigt, wenn PNG gut genug ist, um viele Dinge zu bewältigen?
Die PNG-Unterstützung im IE ist schwer einzuordnen. IE7 „unterstützt“ PNG vollständig, aber auch im IE8 gibt es Bugs, wie zB ein halbtransparentes PNG in Verbindung mit CSS-Transparenz.
@feeela: Die grundlegende Unterstützung von Browsern ist nicht das einzige Problem. Die Browser interpretieren Dinge wie Skalierung und dergleichen sehr unterschiedlich und bei manchen Browsern ist man mit img-Tags besser dran und bei manchen mit object-Tags. Aber ich bin zuversichtlich, dass SVG in einigen Jahren problemlos verwendet werden kann.

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

Für Qualitäts-SVG ist es besser, aber in der Praxis ist PNG die einzige wirkliche Lösung, da SVG derzeit nicht weltweit unterstützt wird.
@Littlemad Das Rendern und Anzeigen von SVG ist auch langsamer als das einfache Blitten des Bildes mit einem PNG.
@muntoo Nun, das Bild ist nicht nur geblittet. Es muss dekomprimiert werden, aber das ist fast immer schneller als das Rendern einer SVG.
@Littlemad Ha, das hat mich daran erinnert, dass das gleiche Problem schon einmal aufgetreten ist ... Mit PNG und GIF.
@CamiloMartin kann es kaum erwarten, dass der Browser viel schneller als normal eine gute Unterstützung für Technologien bietet. Ich möchte SVG verwenden, ich bin frustriert, weil ich mich auf ein nicht skalierbares PNG für Logos verlassen muss
@Littlemad Das musst du nicht. Sie können die VML-Problemumgehung für IE < 9 verwenden oder sie auf dem Server vorab rendern oder sogar eine Flash-basierte Einbettung verwenden, die sie auf IE rendert. Alle Browser (zumindest die wichtigsten) unterstützen SVG, nur IE 6, 7 und 8 scheißen auf uns. Verwenden Sie also einfach eine Problemumgehung, die nicht schrecklich ist. Wenn sie eine schlechtere Website sehen, ist das ihre Schuld. Es ist ähnlich wie SDTV vs. HDTV oder DVD vs. BluRay.
Im Jahr 2014 sollte diese Antwort wahrscheinlich stattdessen zugunsten von SVGs ausfallen.
2015 caniuse.com/#search=svg – im Grunde nur kein IE8

Verwenden Sie auf jeden Fall PNG für eine Website. SVG wird einfach nicht weit genug unterstützt und hat nur wenige (wenn überhaupt) wesentliche Vorteile gegenüber PNG für einen abgeflachten Export. Bewahren Sie jedoch alle Ihre Arbeitskopien in SVG auf.

Gute Lösung, um das Original als SVG zu behalten und es für das Web in PNG zu exportieren. Wenn SVG später besser unterstützt wird, können Sie es ändern. Ich würde diese Lösung für Vektorgrafiken empfehlen.
"es hat wenige (wenn überhaupt) signifikante Vorteile gegenüber PNG" Was? Wie manipuliert man PNGs über CSS oder JavaScript? Wie skalieren Sie sie, ohne an Auflösung zu verlieren? Wie verlinken Sie Teile eines Bildes (zB einen Länderlink auf einer Karte)? SVG-Dateien sind in der Regel auch viel kleiner als PNG (mit Ausnahme von winzigen Symbolen).
SVG hat viele Vorteile gegenüber PNG für Vektorgrafiken.

Ich würde sicherheitshalber bei PNG bleiben. SVG wird von vielen großen Internetunternehmen und Browsern immer noch nicht vollständig akzeptiert. Obwohl SVGs skalierbar sind und Vektoren sind, sind sie oft unnötig, nehmen mehr Platz ein und verkomplizieren die Website.

Ich hoffe das hat deine Frage beantwortet :)

"nehmen mehr Platz ein und sind zu kompliziert"? Wie?
Ich bin mir ziemlich sicher, dass es sich auf Ihre SEO auswirken kann, da Ihre Bilder möglicherweise nicht bei Google angezeigt werden, und ich bin mir nicht 100% sicher, aber es ist oft der Fall, dass das Laden von SVGs länger dauert
Die Ladezeit hängt von der Dateigröße ab, von der SVGs oft viel kleiner sein können. Und wenn die Google-Bildsuche für die SEO Ihrer Websites wichtig ist, ist PNG vielleicht besser, aber ich denke, das ist eher eine Nischensache.
Ja, ich meine, am Ende des Tages gibt es keine richtige oder falsche Antwort. Die Dateigröße hängt stark von der Komplexität Ihres Bildes ab und ja, Ihre Wahl hängt vom Anwendungsfall ab. Ich habe lediglich die Vor- und Nachteile der verschiedenen Dateitypen angegeben :)

Obwohl SVG nicht weltweit akzeptiert wird und einige Leute eine frustrierende Zeit beim Skalieren von PNGs haben, habe ich immer festgestellt, dass das Erstellen eines Symbols in Adobe Illustrator am besten zum Vergrößern oder Verkleinern eines "angemessenen" Betrags geeignet ist.

Erlaubt Adobe Illustrator PNGs oder SVG oder beides oder was genau ist der Grund, Illustrator hier zu nennen? Und warum glauben Sie, dass SVG nicht weltweit akzeptiert wird?
Welches Format eignet sich besser zum Speichern von Bildern, die für Websites bestimmt sind? PNG oder SVG?
AntwortenHierDatenschutz-Bestimmungen1y, 0v