Grafiken im Webdesign

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.