Grafiken für das Web

Für Webgrafiken muss immer eine Auflösung von 72dpi eingestellt werden.

Nur dann ist eine verzerrungsfreie Originaldarstellung möglich.

Grafikformate

GIF

Farbumfang

256 oder weniger Farben.

Einsatz

Für Grafiken mit wenigen Farben.

Komprimierung

Verlustbehaftete Komprimierung durch Farbreduktion.

Transparenz

Eine Transparenzstufe.

JPEG

Farbumfang

16,7 Millionen Farben.

Einsatz

Für Realbilder mit vielen Farben.

Komprimierung

Verlustbehaftete Komprimierung (einstellbar) durch Wegnahme von Bildinformationen. –> Qualitätsverlust

Transparenz

Keine Transparenzen.

PNG (PNG8 – PNG24)

Farbumfang

PNG8: 256 Farben

PNG24: 16,7 Millionen Farben

Einsatz

PNG8: Grafiken mit geringer Farbanzahl.

PNG24: Realbilder mit vielen Farben.

Komprimierung

PNG8: Verlustbehaftet durch Farbreduktion.

PNG24: Verlustfrei, dadurch aber größere Dateien.

Transparenz

PNG8: Eine Transparenzstufe

PNG24: Volle Transparenz (Alphakanal)

Einschränkungen
Internet Explorer bis Version 6 kann die Transparenzen nicht darstellen.
https://caniuse.com/?search=PNG

SVG

Farbumfang

16,7 Millionen Farben

Einsatz

Logos, Symbole, Benutzeroberflächenelemente und interaktive Grafiken. Skalierbar ohne Qualitätsverluste, da SVG auf Vektoren basiert.

Komprimierung

Gzip, SVG Tiny 1.2, SVG Tiny 1.1

Transparenz

Volle Transparenz (Alphakanal)

Einschränkungen

Nicht in E-Mail zu benutzen
https://caniuse.com/?search=SVG

WebP

Farbumfang

16,7 Millionen Farben

Einsatz

Das WebP-Format wird hauptsächlich im Web verwendet, um Bilder mit hoher Qualität und kleiner Dateigröße bereitzustellen

Komprimierung

WebP nutzt fortschrittliche Komprimierungsalgorithmen, die es ermöglichen, Bilddateien auf eine kleinere Größe zu reduzieren, ohne dabei die visuelle Qualität stark zu beeinträchtigen. Dies macht es ideal für die Optimierung von Webseiten, da kleinere Dateigrößen die Ladezeiten verbessern können.

Transparenz

Volle Transparenz (Alphakanal)

Einschränkungen

Internet Explorer bis Version 11 kann die WebP-Dateien nicht darstellen.
Nicht in E-Mail zu benutzen.
https://caniuse.com/?search=webp
https://www.caniemail.com/search/?s=WEBP

AVIF

Farbumfang

16,7 Millionen Farben

Einsatz

AVIF wird zunehmend als Ersatz für andere Bildformate wie JPEG und PNG verwendet. Es findet Anwendung in verschiedenen Bereichen wie Webgrafiken, Streaming-Medien, Virtual Reality und anderen visuellen Anwendungen.

Komprimierung

AVIF bietet eine sehr effiziente Komprimierung, was bedeutet, dass Bilder in diesem Format bei vergleichbarer Qualität deutlich kleinere Dateigrößen aufweisen können als bei anderen gängigen Formaten wie JPEG oder PNG. Dies führt zu schnelleren Ladezeiten von Webseiten und einer effizienteren Speichernutzung.

Transparenz

Volle Transparenz (Alphakanal)

Einschränkungen

Internet Explorer bis Version 11 kann die AVIF-Dateien nicht darstellen.
Nicht in E-Mail zu benutzen.
https://caniuse.com/?search=AVIF
https://www.caniemail.com/features/image-avif/

Format Farbumfang Einsatz Komprimierung Transparenz Einschränkungen
GIF 256 oder weniger Farben Für Grafiken mit wenigen Farben Verlustbehaftete Komprimierung durch Farbreduktion Eine Transparenzstufe
JPEG 16,7 Millionen Farben Für Realbilder mit vielen Farben Verlustbehaftete Komprimierung (einstellbar) durch Wegnahme von Bildinformationen Keine Transparenzen
PNG (PNG8 – PNG24) PNG8: 256 Farben
PNG24: 16,7 Millionen Farben
PNG8: Grafiken mit geringer Farbanzahl
PNG24: Realbilder mit vielen Farben
PNG8: Verlustbehaftet durch Farbreduktion
PNG24: Verlustfrei, dadurch aber größere Dateien
PNG8: Eine Transparenzstufe
PNG24: Volle Transparenz (Alphakanal)
Internet Explorer bis Version 6 kann die Transparenzen nicht darstellen.
SVG 16,7 Millionen Farben Logos, Symbole, Benutzeroberflächenelemente und interaktive Grafiken. Skalierbar ohne Qualitätsverluste, da SVG auf Vektoren basiert Gzip, SVG Tiny 1.2, SVG Tiny 1.1 Volle Transparenz (Alphakanal) Nicht in E-Mail zu benutzen
WebP 16,7 Millionen Farben Das WebP-Format wird hauptsächlich im Web verwendet, um Bilder mit hoher Qualität und kleiner Dateigröße bereitzustellen Fortschrittliche Komprimierungsalgorithmen Volle Transparenz (Alphakanal) Internet Explorer bis Version 11 kann die WebP-Dateien nicht darstellen. Nicht in E-Mail zu benutzen.
AVIF 16,7 Millionen Farben AVIF wird zunehmend als Ersatz für andere Bildformate wie JPEG und PNG verwendet. Es findet Anwendung in verschiedenen Bereichen wie Webgrafiken, Streaming-Medien, Virtual Reality und anderen visuellen Anwendungen Sehr effiziente Komprimierung Volle Transparenz (Alphakanal) Internet Explorer bis Version 11 kann die AVIF-Dateien nicht darstellen. Nicht in E-Mail zu benutzen.

Regeln für die Erstellung von Webgrafiken

  1. Bestes Ausgangsmaterial verwenden
  2. Im RGB-Modus arbeiten
  3. Proportionen beim Skalieren beachten
  4. Verkleinern ist besser als Vergrößern (Qualität!)

One thought on Grafiken für das Web

Leave a Comment