Unser Blog

News über RapidWeaver, WordPress und SEO

Mac Computer und Macbook mit Schriftzug Grafiken im Webdesign

Grafiken im Webdesign

Verfasser: Thorsten Beck | Veröffentlicht: | Kategorie:

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 arbeitet mit Grafiken und Bildern. Möchte man die Attraktivität der 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.

Eingehen werde ich auf die im Webdesign wichtigsten Dateiformate:

  • JPEG oder JPG
  • PNG
  • SVG
  • GIF
  • WebP

Übersicht über die gängigen Grafikformate

Das Format JPG oder JPEG

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.

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

Eine Übersicht über die Verbreitung der unterschiedlichen Browser gibt es sowohl bei w3schools.com.

als auch bei gs.statcounter.com

Statistik der Browser

Ich hoffe, ich konnte einen kleinen Überblick über die gängigen Grafikformate für das Webdesign geben.

© 2018 Beck Webdesign | AGB | Blog | Datenschutz | Impressum | E-Mail

Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden. Mehr erfahren