Welche Dateiformate erzielen Sie beim Erstellen von Bildern für das Internet und andere digitale Zwecke am besten? Sie müssen über Geschwindigkeit, Bildqualität und Skalierung nachdenken. Was solltest du also verwenden: SVG vs. PNG vs. JPG?
Es gab eine Zeit, in der Sie gerade eine JPG-Größe mit einer Auflösung von 72 dpi verwendet haben und dann weitergegangen sind. Nicht länger. Dank hochauflösender Bildschirme, mehreren Ansichtsfenstern und der Notwendigkeit, eine aufregende Website zu erstellen, ist der Prozess viel komplexer geworden. Lassen Sie uns in die Vor- und Nachteile dieser Formate eintauchen!
SVG
SVG sieht in jeder Größe gut aus und eignet sich für fast alle Bildtypen außer einem Foto.SVG oder Scalable Vector Graphics ist unglaublich praktisch. Deswegen verwenden Designer es häufiger.
Da SVG ein Vektorformat ist, sehen sie in jeder Größe gut aus und eignen sich für fast alle Bildtypen außer einem Foto.
SVG ist ein verlustfreies Format, das heißt, es verliert keine Daten, wenn es komprimiert wird. Es liefert eine unbegrenzte Anzahl von Farben und wird am häufigsten für Grafiken und Logos im Web und für Projekte verwendet, die auf der Netzhaut oder anderen hochauflösenden Bildschirmen angezeigt werden.
Vorteile von SVG
- Das Vektorformat wird bei jeder Größe gut dargestellt
- Möglichkeit zum Erstellen einfacher SVG-Renderings in einem Code- oder Texteditor
- Entwerfen und exportieren Sie komplexe Grafiken aus Adobe Illustrator oder Sketch
- SVG-Text ist zugänglich
- SVGs sind einfach zu gestalten und zu skizzieren
- SVG-Formate werden von modernen Browsern unterstützt und sind zukunftssicher
- Das Format ist sehr komprimierbar und leicht
- Gut für die Suche aufgrund des textbasierten Formats
- Unterstützt Transparenz
- Ermöglicht Standbilder oder animierte Bilder
Cons von SVG
- Das Entwerfen von SVGs kann kompliziert werden
- Rendern Sie nicht auf einigen beschädigten Browsern
- Eingeschränkte Unterstützung für E-Mail-Clients
Möchten Sie mehr wissen? Wir haben zwei weitere Handbücher, die mehr über SVG erklären: Der praktische Anfängerleitfaden für SVG und Wie (und warum) SVG übernehmen wird.
PNG
PNG bietet etwas, das eine JPG nicht kann - Transparenz.PNG (Portable Network Graphics) ist ein für das Internet entwickeltes Format, das etwas bietet, das JPG nicht bieten kann - Transparenz. Dies ist der Grund, warum PNG für das Hochladen von Elementen wie Logos in Website-Designs so beliebt ist.
Es gibt zwei Arten von PNGs - PNG-8 und PNG-24. PNG-8 verwendet eine begrenztere Farbpalette mit nur 256 Farben, hat eine etwas bessere Transparenz und exportiert bei geringer Größe. PNG-24 verwendet eine unbegrenzte Farbpalette, behält die Transparenz bei, exportiert jedoch in einer größeren Größe. Beide PNG-Typen haben eine verlustfreie Komprimierung.
PNG-Formate ähneln zwar GIFs, unterstützen jedoch keine Animationen. Dieses Format wird am häufigsten für Symbole, kleine Standbilder oder für Bilder verwendet, die Transparenz benötigen.
Vorteile von PNG
- Unterstützt Transparenz
- Gut für Bilder mit Text
- PNG-Formate machen Logos gut
- Enthält eingebettete Textbeschreibungen für Suchmaschinen
- PNG-8 hat eine kleine Dateigröße und ist am leichtesten
- Exportiert ohne gezackte Kanten
Nachteile von PNG
- Die Dateigröße nimmt bei großen Dateien wie Bildern schnell zu
- Einige ältere E-Mail-Clients haben Probleme beim Rendern
- Keine Animation
- PNG-24-Dateien können groß werden; nicht so gut für das Web-Sharing
JPEG
Jedes Mal, wenn ein Foto erneut gespeichert und als JPG-Datei exportiert wird, wird es beeinträchtigt.JPG oder Joint Photographic Experts Group oder JPEG ist wahrscheinlich das bekannteste Bildformat. Dies ist die Standardoption für die meisten Bildspeicherungen, da sie dank eines praktisch unbegrenzten Farbdisplays fotofreundlich ist.
JPG bietet auch die Möglichkeit zu wählen, wie komprimiert ein Bild von 0 Prozent (starke Komprimierung) bis 100 Prozent (keine Komprimierung) sein soll. Die meisten Designer entscheiden sich für etwas im Bereich von 60 bis 70 Prozent. Bilder sehen auf dieser Komprimierungsstufe immer noch gut aus, aber die Dateigrößen sind erheblich kleiner.
JPG verwendet eine verlustbehaftete Komprimierung und behält während der Komprimierung keine Originaldaten bei. Jedes Mal, wenn ein Foto erneut gespeichert und als JPG-Datei exportiert wird, wird es beeinträchtigt.
Das JPG-Format wird am häufigsten für Bilder, Fotografie und alles mit viel Farbe verwendet.
Vorteile von JPEG
- Ideal für hohe Farben und Fotografie
- Einfach, Dateigrößen zu reduzieren
- Rendert konsistent in E-Mail-Clients
Nachteile von JPEG
- Keine transparenz
- Erzeugt gezackte Kanten für Text
- Keine Animation
- Verlustreiches Format
- Keine automatischen Metadaten für die Suche, muss alte Informationen enthalten
Welches Format sollten Sie verwenden?
Nun, da Sie wissen, was einige der Unterschiede zwischen SVG und PNG vs. JPG sind, was sollten Sie verwenden?
Sie können sich ein paar Fragen stellen, um diese Antwort zu erhalten.
Benötigen Sie ein Vektor- oder Rasterformat?
Vektor: SVG
Raster: JPG oder PNG
Benötigen Sie Transparenz?
Ja: SVG oder PNG
Nein: JPG
Verwenden Sie ein Bild in hoher Farbe?
Ja: JPG oder PNG
Nein: SVG
Ist es ein großes Foto?
Ja: JPG
Nein: PNG
Enthält das Bild Text?
Ja: PNG
Nein: JPG
Ist verlustfreie Kompression für Sie wichtig?
Ja: SVG oder PNG
Nein: JPG
Müssen Grafiken aktualisiert und erneut bereitgestellt werden?
Ja: SVG
Nein: PNG oder JPG
Verwenden Sie eine Animation?
Ja: SVG
Nein: JPG oder PNG
Fazit
Alle drei Bildformate - SVG, PNG und JPG - haben praktische und weitreichende Anwendungen. SVG ist zwar das neueste Format und kann häufig in der kleinsten Dateigröße gespeichert werden, ist jedoch nicht immer die beste Option.
Überlegen Sie, wie Sie Bilder in Ihrem Projekt verwenden, wenn Sie einen Dateityp auswählen, um den Datenträger zu finden, der am besten für das geeignet ist, was Sie erreichen möchten. Es kann sogar vorkommen, dass Projekte Bilder enthalten, die alle drei Dateitypen verwenden. (Es ist eigentlich ziemlich üblich!)