Bildformate: Unterschied zwischen den Versionen
(Die Seite wurde neu angelegt: „== '''Bildformate im Web – Top5''' == Nicht nur auf Webseiten, sondern auch in sozialen Netzwerken wie Facebook, Instagram und Co werden Bilder gepostet, geteilt, hochgeladen, verschoben usw. Bildformate werden grob in zwei Kategorien eingeteilt: Pixelbasierte Rasterformate, auch Pixeldateien genannt, (z.B. JPG, PNG, TIFF, GIF) und Vektorformate (z.B. SVG, PDF, EPS). === '''Unterschied''' === Die Skalierbarkeit der Bilddateien macht…“) |
|||
| Zeile 1: | Zeile 1: | ||
== | == Bildformate im Web – Top5 == | ||
Nicht nur auf Webseiten, sondern auch in sozialen Netzwerken wie [[Facebook]], [[Instagram]] und Co werden Bilder [[Posting|gepostet]], geteilt, hochgeladen | Nicht nur auf Webseiten, sondern auch in sozialen Netzwerken wie [[Facebook]], [[Instagram]] und Co werden Bilder [[Posting|gepostet]], geteilt, hochgeladen oder verschoben. Bildformate werden grob in zwei Kategorien eingeteilt: Pixelbasierte Rasterformate, auch Pixeldateien genannt, (z.B. JPG, PNG, TIFF, GIF) und Vektorformate (z.B. SVG, PDF, EPS). | ||
== | == Unterschied == | ||
Die Skalierbarkeit der Bilddateien macht den Unterschied. Rasterdateien werden durch Pixelpunkte dargestellt, Vektorgrafiken sind Pfaddateien, die sich aus zweidimensionalen Objekten zusammensetzen. Vektordateien lassen sich verlustfrei skalieren, wohingegen Pixelgrafiken bei einer Vergrößerung an Qualität verlieren. | Die Skalierbarkeit der Bilddateien macht den Unterschied. Rasterdateien werden durch Pixelpunkte dargestellt, Vektorgrafiken sind Pfaddateien, die sich aus zweidimensionalen Objekten zusammensetzen. Vektordateien lassen sich verlustfrei skalieren, wohingegen Pixelgrafiken bei einer Vergrößerung an Qualität verlieren. | ||
== | == Optimale Bildformate im Web == | ||
Fast jedes Bildformat ist kompatibel und lässt sich im Web darstellen, jedoch ist nicht jedes Bildformat gleichermaßen geeignet. Für eine Verwendung im Web gilt: Dateigröße beachten. Optimal sind Bilddateien wie JPG, PNG oder GIF-Dateien mit kleiner Speicherkapazität und somit geringen Ladezeiten. Zu große Dateien verschlechtern aufgrund langer Ladezeiten die Web-Performance. | Fast jedes Bildformat ist kompatibel und lässt sich im Web darstellen, jedoch ist nicht jedes Bildformat gleichermaßen geeignet. Für eine Verwendung im Web gilt: Dateigröße beachten. Optimal sind Bilddateien wie JPG, PNG oder GIF-Dateien mit kleiner Speicherkapazität und somit geringen Ladezeiten. Zu große Dateien verschlechtern aufgrund langer Ladezeiten die Web-Performance. | ||
== | == Einsatz von Bildformaten im Web == | ||
=== JPG / JPEG (Joint Photographic Experts Group) === | |||
Das JPG-Format ist das bekannteste Bildformat. Es ist optimal zur Komprimierung von Bildern (Cosinustransformation) und zur Verwendung im Web aufgrund schnellerer Ladezeiten. Die Komprimierung ist nicht verlustfrei und somit sind JPG-Dateien für Logos beispielsweise nicht geeignet aber für einen Einsatz im Web optimal. | Das JPG-Format ist das bekannteste Bildformat. Es ist optimal zur Komprimierung von Bildern (Cosinustransformation) und zur Verwendung im Web aufgrund schnellerer Ladezeiten. Die Komprimierung ist nicht verlustfrei und somit sind JPG-Dateien für Logos beispielsweise nicht geeignet aber für einen Einsatz im Web optimal. | ||
=== PNG (Portable Network Graphics) === | |||
PNG-Dateien unterscheiden sich in der Dateiqualität wenig von JPG-Formaten. Die zweistufige Kompression bietet Vorteile im Vollfarb-Bereich und der Darstellung von Kanten. PNG-Dateien sind jedoch in der Dateigröße recht groß. | PNG-Dateien unterscheiden sich in der Dateiqualität wenig von JPG-Formaten. Die zweistufige Kompression bietet Vorteile im Vollfarb-Bereich und der Darstellung von Kanten. PNG-Dateien sind jedoch in der Dateigröße recht groß. | ||
=== GIF (Graphic Interchange Format) === | |||
Geeignet für animierte Grafiken, mit kleiner Dateigröße und kurzen Ladezeiten. Nicht geeignet für kontrastreiche Bilder, da dieses Format nur eine 24-Bit-Farbunterstützung bietet. | Geeignet für animierte Grafiken, mit kleiner Dateigröße und kurzen Ladezeiten. Nicht geeignet für kontrastreiche Bilder, da dieses Format nur eine 24-Bit-Farbunterstützung bietet. | ||
=== TIF / TIFF (Tagged Image File Format) === | |||
TIF-Dateien sind verlustfreie Dateiformate mit hoher Qualität und besonders für den Druck geeignet. TIF-Dateien lassen sich im Web verwenden, sind jedoch aufgrund der beträchtlichen Dateigröße und der damit verbundenen langen Ladezeit, weniger geeignet. | TIF-Dateien sind verlustfreie Dateiformate mit hoher Qualität und besonders für den Druck geeignet. TIF-Dateien lassen sich im Web verwenden, sind jedoch aufgrund der beträchtlichen Dateigröße und der damit verbundenen langen Ladezeit, weniger geeignet. | ||
=== SVG (Scalable Vector Graphics) === | |||
Das vektorbasierte Dateiformat beruht auf XML und lässt sich ohne Qualitätsverlust vergrößern. Es ist optimal für den Einsatz im Web, z.B. für Icons, da es von den meisten Browsern unterstützt wird. Auch grafische Effekte, sowie Filtereffekte und Animationen sind möglich. | Das vektorbasierte Dateiformat beruht auf XML und lässt sich ohne Qualitätsverlust vergrößern. Es ist optimal für den Einsatz im Web, z.B. für Icons, da es von den meisten Browsern unterstützt wird. Auch grafische Effekte, sowie Filtereffekte und Animationen sind möglich. | ||
== Weiterführende Links == | |||
https://app-bis-web.de/perfektes-bildformat-websites/ | https://app-bis-web.de/perfektes-bildformat-websites/ | ||
https://www.ionos.de/digitalguide/websites/webdesign/grafikformate-welche-formate-wirklich-wichtig-sind/ | https://www.ionos.de/digitalguide/websites/webdesign/grafikformate-welche-formate-wirklich-wichtig-sind/ | ||
Version vom 31. März 2022, 11:43 Uhr
Bildformate im Web – Top5
Nicht nur auf Webseiten, sondern auch in sozialen Netzwerken wie Facebook, Instagram und Co werden Bilder gepostet, geteilt, hochgeladen oder verschoben. Bildformate werden grob in zwei Kategorien eingeteilt: Pixelbasierte Rasterformate, auch Pixeldateien genannt, (z.B. JPG, PNG, TIFF, GIF) und Vektorformate (z.B. SVG, PDF, EPS).
Unterschied
Die Skalierbarkeit der Bilddateien macht den Unterschied. Rasterdateien werden durch Pixelpunkte dargestellt, Vektorgrafiken sind Pfaddateien, die sich aus zweidimensionalen Objekten zusammensetzen. Vektordateien lassen sich verlustfrei skalieren, wohingegen Pixelgrafiken bei einer Vergrößerung an Qualität verlieren.
Optimale Bildformate im Web
Fast jedes Bildformat ist kompatibel und lässt sich im Web darstellen, jedoch ist nicht jedes Bildformat gleichermaßen geeignet. Für eine Verwendung im Web gilt: Dateigröße beachten. Optimal sind Bilddateien wie JPG, PNG oder GIF-Dateien mit kleiner Speicherkapazität und somit geringen Ladezeiten. Zu große Dateien verschlechtern aufgrund langer Ladezeiten die Web-Performance.
Einsatz von Bildformaten im Web
JPG / JPEG (Joint Photographic Experts Group)
Das JPG-Format ist das bekannteste Bildformat. Es ist optimal zur Komprimierung von Bildern (Cosinustransformation) und zur Verwendung im Web aufgrund schnellerer Ladezeiten. Die Komprimierung ist nicht verlustfrei und somit sind JPG-Dateien für Logos beispielsweise nicht geeignet aber für einen Einsatz im Web optimal.
PNG (Portable Network Graphics)
PNG-Dateien unterscheiden sich in der Dateiqualität wenig von JPG-Formaten. Die zweistufige Kompression bietet Vorteile im Vollfarb-Bereich und der Darstellung von Kanten. PNG-Dateien sind jedoch in der Dateigröße recht groß.
GIF (Graphic Interchange Format)
Geeignet für animierte Grafiken, mit kleiner Dateigröße und kurzen Ladezeiten. Nicht geeignet für kontrastreiche Bilder, da dieses Format nur eine 24-Bit-Farbunterstützung bietet.
TIF / TIFF (Tagged Image File Format)
TIF-Dateien sind verlustfreie Dateiformate mit hoher Qualität und besonders für den Druck geeignet. TIF-Dateien lassen sich im Web verwenden, sind jedoch aufgrund der beträchtlichen Dateigröße und der damit verbundenen langen Ladezeit, weniger geeignet.
SVG (Scalable Vector Graphics)
Das vektorbasierte Dateiformat beruht auf XML und lässt sich ohne Qualitätsverlust vergrößern. Es ist optimal für den Einsatz im Web, z.B. für Icons, da es von den meisten Browsern unterstützt wird. Auch grafische Effekte, sowie Filtereffekte und Animationen sind möglich.