Du lädst ein Bild auf die Website, es ist verpixelt, dauert ewig, bis es hochgeladen ist, die Farben sind grausam? Lies, wann du JPG, PNG, TIFF, GIF idealerweiser einsetzt.
Es gibt viele Bildformate für die digitale Verwendung im Netz: die Daten müssen dafür gezielt komprimiert werden, damit lange Ladezeiten verhindert und sie in gängigen Browsern angezeigt werden können.
Die gebräuchlichsten Rasterformate – JPG, PNG, GIF, TIFF setzen sich aus Pixeln zusammen und sind dir ganz bestimmt schon untergekommen.
Aber weißt du auch genau, wodurch sie sich unterscheiden und wann du welches idealerweise einsetzt? Nicht so ganz sicher? Dann bist du bestimmt schlauer, wenn du unsere Zusammenfassung gelesen hast.
JPG – Joint Photographic Experts Group
Das am meisten verwendete Format, es wird von allen Browsern unterstützt. Du kannst übrigens beide Kürzel ohne Probleme als Dateiendung verwenden.
Entwickelt wurde das Format, um große Fotos mit sehr hoher Auflösung (z.B. in RAW) durch Komprimierung in möglichst kleine Datenmengen umzuwandeln und damit Speicherplatz zu sparen. Die Qualität ist ausreichend, um am Laptop, Handy oder PC trotzdem scharfe Bilder zu sehen.
Allerdings kannst du einmal komprimierte Bilder nicht mehr vergrößern – also immer Originaldatei und komprimierte unter einem andern Namen abspeichern!
Idealerweise verwenden:
Bei großen Bildern die kleine Datenmengen haben sollen, um lange Ladezeiten zu verhindern. Zum Versenden, auf deiner Website mit vielen Fotos, im shop, bei Facebook und Co. Beim Speichervorgang selbst kannst du die Qualität auch noch beeinflussen. Das Verhältnis zwischen Bildqualität und Dateigröße ist gut.
Nicht verwenden:
Bei Grafiken oder Textdateien, sie könnten unscharf werden
Bei Drucken wie Flyer, Poster etc. – dafür ist die Auflösung zu gering
Unterstützt weder Transparenz noch Animation.
Bei Mehrfach-Speicherung kommt es zu Qualitätsverlusten
PNG – Portable Network Graphics
Wie JPG sind auch PNG Dateien komprimierbar, sie verlieren im Unterschied aber nicht an Qualität. PNG unterstützt außerdem 24-bit , d.h. es erlaubt die Darstellung von vielen Farben und ist damit nach JPG das zweitbeliebteste Format. Die Datei ist größer, kann aber immer noch Probleme online verwendet zu werden.
PNG verwendest du am besten:
Bei Dateien mit hohen Qualitätsanspruch (z.B. Website Slider), wo du Zugeständnisse an die Dateigröße machen kannst (Icons, Logos, halbtransparente Bereiche..) – vor allem bei Bildern mit viel Text oder Linien UND wenn du Transparenz brauchst. Dann kannst du auch Bilder ohne Hintergrund in verschiedenen Transparenz-Graden speichern. Und auch bei mehrfachem Abspeichern gibt es keinen Qualitätsverlust.
Vorsicht: Manche (alte) Browser können PNGs nicht darstellen.
GIF – Graphics Interchange Format
GIF ist praktisch der veraltete Vorgänger von PNG; es ermöglicht Transparenz und komprimiert ähnlich wie PNG, aber unterstützt nur 8-bit und damit 256 Farben – das ist zu wenig, um die vielfältige Farbpalette des Originals darzustellen. Das Ergebnis sind aufgepixelte, farbverfälschte Bilder. Kurz gesagt: PNG schlägt GIF
Der einzige Grund, um überhaupt noch GIF zu verwenden sind Animationen.
GIF verwendest du am besten:
Nur für animierte Bilder
TIFF – Tagged Image File
TIFF ist eine weitere Rasterdatei, die es ermöglicht, ohne Qualitätseinbußen mehrfach zu komprimieren und zu speichern. Die Qualität ist hochwertig und genau, Transparenz wird ebenfalls unterstützt.
Allerdings sind die Dateigrößen sehr groß und das Format wird nicht überall unterstützt.
TIFF verwendest du am besten:
Zum Drucken (von Fotos).
Nicht verwenden solltest du TIFF:
Im Web – das Laden kann Ewigkeiten dauern und dein Besucher springt dir ab.
Kurz gesagt:
Wenn du Wert legst auf den Originalzustand bzw. hohe Qualität eines Bildes im Netz, verwende verlustfreie Kompression (PNG). Musst du Speicherplatz sparen (ist heute eigentlich nicht mehr so das Problem, gibt es doch kostenlose Cloud-Speicher) entscheide dich für Formate wie JPG. GIF wähle für Animation, TIFF oder PNG für Druck.
DPI & PPI
DPI (dots per inch) und PPI (pixels per inch) beschreiben die hohe oder geringe Auflösung eines Bildes. Das wichtigste ist zu beachten, ob ein Bild fürs Web oder für den Druck eingesetzt wird.
WEB: hier reichen 72 dpi – die Bilder sehen scharf aus
DRUCK: nie unter 300 dpi – sonst erhältst du eine körnige, aufgepixelte Darstellung
Vektor-Bildformate
sie kommen vor allem bei Grafiken (z.B. deinem Logo) zum Einsatz, die man in verschiedensten Größen und bester Qualität braucht (vom Logo am Kuli bis am Bürogebäude).
Seitenverhältnisse (Bildproportionen):
Facebook, Instagram, LinkedIn, Website Slider…. überall unterschiedliche und oft wechselnde Bildgrößen.
2:1 – 16:9 – 21:9 – verschiedenste Bildproportionen, der goldene Schnitt – hast du den Überblick was wo am besten eingesetzt wird? Dazu gibt es demnächst einen weiteren Blogbeitrag.
