Grafiken im Webdesign
Grafiken sind das Salz in der Suppe beim Webdesign - ich gebe einen kleinen Überblick worauf man achten sollte
Das Internet und die Websites leben von Bildern und Grafiken. Grafiken im Webdesign sind wie das Salz in der Suppe. Fehlen sie, dann ist das Webdesign nicht so schön. Schließlich essen die Augen mit. Das trifft besonders für das Webdesign in der heutigen Zeit zu. Grafiken sind wichtig für gutes und attraktives Webdesign. Grafiken und Bilder sagen mehr als tausend Worte.
Jeder Webdesigner oder Betreiber einer Website hat somit mit Grafiken und Bildern zu zu tun.
Möchte man seine Website optimieren, setzt man entsprechend geschickt die unterschiedlichen Formen an Bilder und Grafiken ein.
Mittlerweile gibt es eine Vielzahl an unterschiedlichen Dateiformaten für Bilder und Grafiken.
Formate von häufig verwendeten Grafiken im Webdesign
- JPEG oder JPG
- PNG
- SVG
- GIF
- WebP
Übersicht über bekannten Dateiformate von Grafiken im Webdesign
Die Dateiformate JPG und JPGEG sind identisch. Dies hat den Ursprung, dass auf früheren Microsoft Windows Systemen lediglich dreistellige
Dateiformate zulässig waren, auf anderen Systemen aber vierstellige. Man findet heute immer noch die beiden Schreibweisen, es ist aber
im Grunde dasselbe Format gemeint. JPEG oder JPG Dateien sind komprimierte und kleine Bildformate. Sie bieten sich besonders gut für das
Webdesign an. Allerdings haben Sie immer einen Hintergrund und die Kompression ist verlustbehaftet
Das Format PNG
Benötigt man Bilder mit einem transparenten Hintergrund, so bietet sich das Dateiformat PNG an. Die Bilder haben im Gegensatz zu den JPG oder JPEG Dateien
eine bessere Transparenz und eine verlustfreie Komprimierung.
Das Format SVG
SVG sind Vektorgrafiken und lassen sich verlustfrei hochskalieren. Das bedeutet, dass es beim Vergrößern zu keinen unschönen Pixelverzerrungen kommt.
Das Format GIF
GIF Dateien sind kleine animierte Bilder. Sie sind vor allem verbreitet im Bereich Social Media. Kleine Animationen lassen sich ebenfalls erstellen und können kurze Videos ersetzen.
Das Format WebP
WebP wurde im Jahr 2011 von Google erfunden. Dabei handelt es sich um ein sehr kleines Bildformat, das deutlich kleiner ist als JPG oder JPEG Dateien.
Das Problem ist, dass noch nicht alle Browser dieses Format unterstützen. Man muss daher für die unterschiedlichen Browser alternative Bildformate anbieten.
Zum aktuellen Zeitpunkt (Stand November 2018) unterstützen die folgenden Browser das WebP Format:
- Microsoft Edge ab Version 18
- Chrome ab Version 23
- Opera seit Version 12.1
- Opera Mini (alle Versionen)
- Android Browser (ab Version 4.2)
- Opera Mobile
- Chrome for Android Version 70
- UC Browser for Android Version 11.8
- Samsung Internet
- QQ Browser
- Baidu Browser
Nicht unterstützt wird WebP von folgenden Browsern:
- Internet Explorer
- Safari
- iOS Safari
- Blackberry Browser
- Firefox for Android
- IE Mobile
Zu finden ist diese Übersicht bei https://caniuse.com.
Eine Übersicht über die Verbreitung der unterschiedlichen Browser gibt es bei w3schools.com.
Wann setze ich am Besten welches Dateiformat ein?
JPG:
- Fotografien
- Bilder mit hoher Farbtiefe und Dynamik
PNG:
- kleine Logos und Icons
- Grafiken bei benötigter Transparenz
GIF:
- kleine Animationen im Web für Social Media
- kurze Sequenzen in Anleitungen anstelle von Kurzvideos
WebP:
- zur Reduzierung des Traffic der Website
Zur Bearbeitung der verschiedenen Dateiformate ist selbstverständlich eine geeignete Software notwendig.
Ich zum Beispiel arbeite für die meisten Projekte für Websites oder Online-Shops sehr viel und sehr häufig mit Affinity Foto oder Affinity Designer. Selbstverständlich kann man auch auf Produkte von Adobe zurückgreifen. Diese sind allerdings deutlich teurer in der Anschaffung oder man benötigt ein Abonnement.