SVG, PNG, GIFs, JPG – Wann soll welches Bild-Format eingesetzt werden?
Im Webdesign ist es entscheidend, für Bilder das richtige Format zu wählen. Welches das ist, zeigt dieser Beitrag. Denn je nach Situation brauchen Sie etwas anderes.
Die folgende tabellarische Auflistung zeigt Ihnen die Eigenheiten der meistverwendeten Formate im Webdesign und deren Einsatzgebiete:
|
Format |
Einsatz |
|
JPG |
Das JPG-Format ist wohl das am Häufigsten verwendete Format im Webdesign. Die Bezeichnung stammt von der "Joint Photographic Experts Group", welche das Format entwickelt hat. Hier gilt es im Speziellen die Dimensionen zu beachten. So ergibt es zum Beispiel keinen Sinn, ein grosses Bild als Vorschaubild einzusetzen. Halten Sie sich an die Faustregel, bei Bildern eine Grösse von 300 KB nicht zu überschreiten. |
|
PNG |
Das PNG-Format (von Portable Network Graphics) hat den grossen Vorteil, dass es Transparenz zulässt. Somit kann man beispielsweise vor einem schönen Wolkenhintergrund einen Heissluftballon platzieren und ihn sogar mittels CSS3 zum Bewegen bringen. Das PNG-8 hat eine geringere Farbtiefe als das PNG-24 Format, welches für die meisten Zwecke zum Einsatz kommt. Die Dateigrösse ist dann leider der Nachteil dieses Formats beim Einsatz im Webdesign. |
|
GIF |
Das GIF-Format (Graphics Interchange Format) wird vor allem für grafische Inhalt verwendet, da es im Gegensatz zum JPG eine geringe Farbtiefe aufweist. Es hat aber den entscheidenden Vorteil, dass es Bildanimationen zeigen kann. GIF-Animationen erfreuen sich auch im Webdesign wieder einer grossen Beliebtheit, da diese auf allen Endgeräten funktionieren. |
|
SVG |
Das SVG-Format (Scalable Vector Graphics) ist eine sogenannte Vektor-basiertes Format. Es eignet sich hervorragend für grafische Darstellungen, wie zum Beispiel Logos, und somit auch für den Einsatz im Webdesign. Es lässt sich auch verlustfrei in der Grösse skalieren. Die einzelnen Komponenten einer Vektordatei lassen sich auch mit JavaScript ansprechen und animieren. |
Fazit
Versuchen Sie stets jenes Bildformat zu wählen, welches am Besten zu Ihren Darstellungszwecken passt und gleichzeitig am wenigsten Datenvolumen aufweist, um Ihre Website nicht unnötig zu verlangsamen. Dies vor allem auch in Bezug auf die Suchmaschinenoptimierung (SEO), da der Page Speed ein entscheidender Faktor für ein gutes Ranking bei Google ist.