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

Antworten:

8

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

Philip Regan
quelle
3
Für Qualitäts-SVG ist es besser, aber in der Praxis ist PNG die einzige echte Lösung, da SVG zum gegenwärtigen Zeitpunkt nicht global unterstützt wird.
Littlemad
@Littlemad Das Rendern und Anzeigen von SVG ist auch langsamer als das einfache Überblenden des Bildes mit einem PNG.
Mateen Ulhaq
1
@Littlemad Das musst du nicht. Sie können die VML-Problemumgehung für IE <9 verwenden oder sie auf dem Server vorrendern oder sogar eine Flash-basierte Einbettung verwenden, die sie auf IE rendert. Alle Browser (zumindest die größeren) unterstützen SVG, nur IE 6, 7 und 8 arbeiten mit uns zusammen. Verwenden Sie also einfach eine Abhilfemaßnahme, die nicht schrecklich ist. Wenn sie eine schlechtere Site sehen, ist das ihre Schuld. Es ist ähnlich wie SDTV gegen HDTV oder DVD gegen BluRay.
Camilo Martin
1
2014 dürfte diese Antwort eher für SVGs sprechen.
Hanna
1
2015 caniuse.com/#search=svg - im Grunde nur kein IE8
goodship11
18

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.

Dom
quelle
1
Sie könnten etwas über das <picture>Element erwähnen, das bei verschiedenen Bildgrößen hilft
Zach Saucier
15

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.

Mnementh
quelle
-1 Svg es wird immer noch nicht global unterstützt Ich würde die Verwendung nicht empfehlen, wenn Sie nicht klar erklären, wo funktioniert und eine Alternative für den Fall, dass es nicht funktioniert (höchstwahrscheinlich). Wir müssen die Webstandards berücksichtigen, die wir erreichen wollen. Wenn Sie für das Web und für PNG oder SVG wählen, sollte dies immer PNG sein, bis SVG global von Browsern einer Generation älter unterstützt wird. Ich würde gerne SVG-Perfektion verwenden, aber das ist noch nicht Realität.
Littlemad
Wie ich geschrieben habe, hat der IE keine SVG-Unterstützung (nur in der bis jetzt zukünftigen Version 9) und der mobile Browser wird möglicherweise auch nicht unterstützt.
Mnementh
@Littlemad: Die Downvote ist ein wenig übertrieben, da 1 - die Antwort sagt, dass sie 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 auch in IE6 & 7 nicht unterstützt und kein Wort dazu? :)
Shikiryu
@ClemDesm: Ah, guter Hinweis, ältere IEs unterstützen transparente PNGs nicht vollständig.
Mnementh
1
@Littlemad "wird in vielen neueren Browsern nicht unterstützt" Dies scheint eine falsche Schlussfolgerung zu sein, da es in der verlinkten Referenz nur einen Browser gibt, der SVG (IE8) nicht verarbeiten kann. Sie müssen auch keine Plugins installieren, um SVG zu verwenden (habe das noch nie gesehen, vielleicht in IE6). Was Sie in der verknüpften Referenz in Rot sehen, sind Teile von SVG, die Sie meistens nicht verwenden (meistens Filter oder andere Effekte). Die Grundlagen funktionieren.
Feeela
5

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.

Computerisch
quelle
1
Gute Lösung, um das Original als SVG zu behalten und es als PNG für das Web 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.
Mnementh
2
"es hat nur 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 (bis auf winzige Icons).
Feeela
3
SVG hat viele Vorteile gegenüber PNG für Vektorillustrationen.
DA01,
0

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 :)

nicolos
quelle
"Mehr Platz in Anspruch nehmen und zu kompliziert"? Wieso das?
DA01,
1
Ich bin mir ziemlich sicher, dass dies Auswirkungen auf Ihre SEO hat, da Ihre Bilder möglicherweise nicht bei Google angezeigt werden und ich nicht zu 100% sicher bin, aber häufig dauert das Laden von
SVGs
2
Die Ladezeit hängt von der Dateigröße ab, von der SVGs häufig viel kleiner sind. Und wenn die Google-Bildersuche für die SEO Ihrer Websites wichtig ist, ist PNG vielleicht besser, aber ich denke, das ist eher eine Nischensache.
DA01
1
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 nur die Vor- und Nachteile der verschiedenen Dateitypen angegeben :)
nicolos
-1

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.

stancil21
quelle
Lässt Adobe Illustrator pngs oder svg oder beides zu oder was genau ist der Grund, warum Illustrator hier genannt wird? Und warum glaubst du, ist Svg nicht global akzeptiert?
Mensch