102 VIEWS

It’s #FrontendFriday – Die richtigen Bildformate in Webapps

26.06.2020

Es ist wieder Freitag, somit #FrontendFriday und heute geht es um die richtigen Dateiformate in Webapps. In der Webentwicklung ist es immer wichtig, aus viele verschiedenen Bildformaten das richtige zu wählen.

Rastergrafik vs. Vektorgrafik

In der Webentwicklung ist es immer wichtig, die richtigen Dateiformate für Bilder und Videos zu verwenden. So unterschiedlich die Anwendungsfälle für Mediendateien ist, so groß ist dort auch die Auswahl. Im Bild Bereich gibt es zum Beispiel Rastergrafik Formate wie JPEG, GIF, PNG, TIFF und RAW. Als Vektorgrafiken gibt es dann zum Beispiel SVGs oder als Dokumentenformat PDF’s. Der Unterschied zwischen Vektor und Rastergrafiken ist, dass Rastergrafiken aus Pixeln bestehen, welche ein Gitter aus Punkten sind. Transformiert man nun also dieses Bild, strecken sich die Pixel und das Bild wird verschwommen und unscharf. Vektorgrafiken bestehen für jeden Punkt, jede Linie und jede Kontur aus großen mathematischen Gleichungen. So sind diese Grafiken unabhängig von der Auflösung.

Übersicht über die einzelnen Formate

VorteileNachteile
GIF („Graphics Interchange Format“)
  • Können Bewegtbild ohne Video Codec darstellen
  • Möglichkeit für transparenten Hintergrund
  • Auf 256 Farben limitiert
JPEG („Joint Photographic Experts Group“)
  • Durch 16-bit-Format ist eine Rot-Grün-Blau-Mischung mit Millionen Farbkombinationen möglich
  • geeignet für farbige, realistische Bilder mit vielen Farb- und Kontrastübergängen
  • kein Transparenter Hintergrund
  • keine Animation möglich
  • jede weitere Bildkomprimierung verschlechtert die Qualität des Bildes
PNG („Portable Network Graphics“)
  • Transparenter Hintergrund
  • Farbspektrum liegt im Millionenbereich
  • keine Animation möglich
SVG („Scalable Vector Graphics“)
  • Man kann es mit JavaScript bearbeiten
  • Skalierbarkeit ohne Beeinträchtigung der Bildqualität -> Vektorgrafik
  • die Dateigröße wächst sehr schnell, wenn das Objekt aus einer großen Anzahl kleiner Elemente besteht

Wenn man sich auf ein paar großen Webseiten, wie „Facebook“, „AirBnB“ oder „Twitter“ umschaut, so kann man dort einen klaren Trend sehen. Für Logos werden so gut wie immer SVGs verwendet. Für eine Art Grafik oder vergleichbares werden PNGs verwendet und für „Kunstbilder“, bei denen es auch teilweise um die Bildliche Qualität geht, werden JPGs verwendet. Auf den folgenden Bildern kann man ein paar Beispiele sehen, wie es große Firmen mit ihren Webseiten umsetzen.

 

 

 

 

 

 

 

Zum Ende kann man sagen, dass jedes Dateiformat seine Daseinsberechtigung hat und das es wie so oft auf den Anwendungsfall ankommt.

// Wir wünschen euch noch einen wundervollen Freitag und einen guten Start ins Wochenende  :-)

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*Pflichtfelder

*

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.