Wer neu mit dem Bloggen anfängt steht oftmals vor einem schier unüberwindlichen Wust an neuen Fachbegriffen. Im Blogger ABC gehe ich heute auf Grafikformate für Webseiten und Blogs ein.
Die meisten Blogger in meinem Netzwerk betreiben eigene, private und persönliche Blogs für deren Erfolg natürlich auch Grundwissen zu Webdesign und Webgrafiken gehört.
Die Auflösung
Unter Auflösung versteht man die Anzahl an Bildpunkten innerhalb einer Fläche. Also z.B. Bildpunkte per Inch, per Zentimeter oder per Zoll usw. Bildpunkte bezeichnet man im Web mit „Pixel“. In Druckmedien spricht man dagegen von „Punkten“ oder „Dots“ (dpi = dots per inch).
Sonja Radke weist darauf hin, dass Monitore nur um ein Vielfaches weniger Bildpunkte innerhalb einer bestimmten Flächengröße anzeigen können als Printmedien.
In Printmedien sitzen also die Bildpunkte einer Grafik oder eines Fotos viel dichter aneinander als in einer Monitordarstellung. Dies erzeugt einen klareren, brillanteren und somit „schärferen“ Bildeindruck in Drucksachen.
Natürlich gibt es auch immer eine Ausnahme von der Regel – so weist Sonja Radke auf die brillante Leuchtkraft und Auflösung der Retina Displays hin – was wir aber nachfolgend vernachlässigen.
Für das Internet, zunehmend das mobile Surfen, gilt es immer einen vertretbaren Kompromiss zwischen Auflösung und Dateigröße zu finden. Höhere Auflösung bedeutet immer, größere Datei. Der Internetnutzer und auch Suchmaschinen, wie Google, wollen aber schnelle Ladezeiten und kleine Dateimengen. Letztlich sollen aber Grafik und Design den Inhalt / Content unterstützen.
Der [normale Website-Besucher] interessiert sich für die Inhalte Ihrer Website.
Gut so. Das soll er ja auch!
JPEG (Joint Photographic Experts Group)
JPEG ist sowohl Datenformat, Komprimierungsverfahren als auch Gremium. Es kann bis zu 16,7 Millionen Farben anzeigen, unterstützt aber keine Transparenzen. Es ist das wohl gängigste Grafikformat für Websites, da es relativ kleine Dateigrößen hat. Für Text, große einfarbige Flächen und harte Farbübergänge ist JPG weniger geeignet.
Wichtig: JPEG Dateien, die sie nur im Internet verwenden, haben in der Regel eine Auflösung von 72 dpi.
PNG (Portable Network Graphics)
Es handelt sich um ein Grafikformat, das eigens für den Einsatz im Web konzipiert wurde und dessen Normierung wie diejenige von HTML, CSS, XML und andere Web-Technologien vom W3-Konsortium besorgt wird.
Genau wie JPEG unterstützt PNG 16,7 Millionen Farben. PNG hingegen ist das einzige Bildformat, das verlustfrei komprimiert wird. Die Bildqualität nimmt also nicht ab. Zusätzlich hat PNG den Vorteil, transparente Grafiken anzeigen beziehungsweise speichern zu können. Das JPG-Format kennt diese Option nicht. D.h. wenn das Bild nicht vollflächig mit einer anderen Farbe ausgefüllt ist, hat eine JPG Datei einen weißen Hintergrund.
Praxisbeispiel: Stellen sie sich vor, ihre Webseite, ihr Blog, hat einen farbigen Hintergrund. Wenn sie nun ein Logo im Header (Kopfbereich) einbinden möchten, sollte die Bilddatei sinnvoller Weise transparent sein.
GIF Grafikformat
Die Abkürzung steht hier für Graphics Interchange Format.
Da man in einer GIF Datei mehrere Bilder speichern kann, ergmöglicht dies Animationen – was animated GIF´s sehr beliebt in sozialen Netzwerken gemacht hat. Beispiele finden Sie auf den folgenden Webseiten:.
Klicken Sie auf den unteren Button, um den Inhalt von giphy.com zu laden.
Ein animated GIF zum derzeit beliebten Spiel Flappy Bird. Quelle: http://giphy.com/gifs/Otfg7yCM7IzVm
Das GIF Dateiformat kennt nur 256 Farben und ist folglich für Farbfotos weniger geeignet. Wohingegen es bei transparentem Hintergrund oft eingesetzt wird.
TIFF (“Tagged Interchange File Format”)
Das “Tagged Image File Format”, kurz TIFF oder TIF, ist eines der ältesten Grafikformate und ist das Hauptformat für gerasterte Bilder und Standardformat für die Printproduktion. Neben PDF und EPS gehört es damit auch zu den wichtigsten Formaten bei der Übermittlung von Druckdaten.
Die Kompression (LZW, ZIP) ist meist verlustfrei. Die Saxoprint Online-Druckerei zu den besonderen Eigenschaften von TIFF und den Vorteilen im Desktop Publishing:
Ein weiterer Grund für die weite Verbreitung im DTP-Bereich (d.h. Desktop-Publishing, also das rechnerunterstützte Setzen von Texten und Bildern) ist die Unterstützung des CMYK-Farbmodells sowie verschiedener Farbräume und die Verwendung von Transparenzen und Ebenen. Außerdem eignet sich das Format für die Einbettung von ICC-Profilen und damit auch uneingeschränkt für die Druckausgabe. Dadurch hat sich TIF quasi als Standard für Bilder mit hoher Qualität etablieren können.
Im Web wird das TIFF-Format genutzt um diversen Anwendern, wie beispielsweise Verlagen, Bilder in hoher Auflösung und damit in für den Druck geeigneter verlustfreier Qualität zur Verfügung zu stellen. Diese Dateien haben zwar oftmals das Vielfache der Datenmenge eines verlustbehafteten JPG-Formates, was aber unter Umständen zum Wohl der Qualität in Kauf genommen wird.
Vektorbasierte Grafiken im Dateiformat SVG
Dateiformat zur Beschreibung von zweidimensionalen Vektor Grafiken und Animationen in XML, es ergänzt die Rasterformate JPEG, GIF und ist eine Alternative zu Flash.
Vorteile von SVG:
- Keine Qualitätsverluste bei Skalierung
- Sehr kleine Dateigrößen möglich
- Optional GZIP-Kompression (SVGZ)
- Unterstützt werden
Alpha-Kanäle, weiche Verläufe
Text-Anti-Aliasing
Effekte (ähnlich Adobe Photoshop)
Animation und Interaktion
Kontrolle über Rastergrafiken und pixelgenaues Layout
Im Web kommt es z.B. bei Landkarten oder detaillierten Zeichnungen zum Einsatz.
Auf das Shockwave Flash Format (SWF) das für Animationen, Online-Spiele und Videos verwendet wird, werde ich in einem eigenen Post eingehen…
Quellen:
- CHIP Praxistipps: Bildformate: JPG und PNG – das sind die Unterschiede
- Landesakademie für Personalentwicklung und Fortbildung an Schulen: Grafikformate im Überblick
- PCS Campus: Die wichtigsten Grafik-Dateiformate im Überblick
- Selfhtml: Grafikformate
- smart-interactive: Warum ist das Logo in Websites meist unscharf?
- Was ist SVG *.PDF