Ivonne Domanski
Bilder auf Webseiten darstellen – Wie mehrere Bilder auf einer Internetseite eingebunden werden können, wurde bereits im letzten Designfragen-Beitrag erläutert. Bevor die Fotografien jedoch hochgeladen werden, sollte noch einigen technischen Details Beachtung geschenkt werden. So ist das Dateiformat wie auch der Farbraum des Bildes mitentscheidend dafür, wie nah das Webbild an das Original kommt.
Dateiformate
In erster Linie geht es bei der Frage nach den Dateiformaten um die Frage was Vorrang hat: Bildqualität und Details oder Dateigröße und die mit davon abhängige Ladezeit.
JPEG zeichnet sich durch seine kleine Dateigröße aus. Feine Details gehen verloren und es erscheinen „Artefakte“, kleine, pixelige Elemente. Auch für Text ist JPEG wenig geeignet, da die Kanten als Detail komprimiert werden, was die Leserlichkeit beeinträchtigen kann.
GIF eignet sich, um Bilder und Animationen mit einer sehr limitierten Farbpalette anzuzeigen. Für die Darstellung komplexer Farbverläufe, wie die von Fotos, ist es nicht geeignet.
PNG bietet verlustlose Komprimierung und dadurch gute Bildqualität zum Preis großer Dateigröße. Dieses Format unterstützt keinen CMYK-Farbraum, erlaubt aber Transparenz. Beides ist für die Abbildung von Fotos im Web von geringer Bedeutung.
TIF ist eines der qualitativ höchsten Bildformate, aber auch eines der größten. Als Webformat ist es aufgrund seiner Größe wenig geeignet.
Prinzipiell ist es am besten, wenn die Bilder in einem qualitativ guten Format vorliegen und dann entsprechend für die Webseite verkleinert werden. Wenn aber ein Bild bereits als JPEG vorliegt, ist es natürlich wenig sinnvoll, dieses in PNG oder TIF umzuwandeln. Eventuelle Qualitätsverluste sind bereits vorhanden und werden nicht behoben. Eine Möglichkeit, die allgemein besteht, ist zum einen das Entfernen von Metadaten sowie das Herunterskalieren. Ausgehend von der größtmöglichen Bildschirmauflösung (4K) kann das Bild auf eine Größe angepasst werden, die es später auch maximal erreichen wird.
Farbräume
Die Darstellung von Farben durch optische Medien, egal ob Druck oder Monitor, entspricht nicht nicht dem Farbraum, den das menschliche Auge wahrnehmen kann.1
CMYK entspricht den Druckerfarben von herkömmlichen Tintenstrahl- und Laserdruckern und eignet sich vor allem, wenn das Bild gedruckt werden soll.2
sRGB wurde ursprünglich für Röhrenmonitore in schlecht belichteten Räumen entwickelt, hält sich aber bis heute als Standard. Wenn ein Browser auf einen Farbraum oder ein Farbprofil trifft, welches es nicht interpretieren kann, stellt es das Bild (im Idealfall) dar, als wäre es sRGB. Es bietet zwar ein geringeres Farbspektrum als andere RGB-Farbräume, ist aber relativ sicher.
Adobe und ProPhoto RGB bieten ein breiteres Farbspektrum. Bilder können in diesen Farbräumen durch die zusätzlichen Farben oft knalliger und lebhafter erscheinen als in sRGB. Doch kommen vor allem Handy- und Tabletmonitore des Öfteren nicht mit diesen Farbräumen zurecht.3
Während sich CMYK an Druckerfarben orientiert und auf Print-Medien ausgelegt ist, eignen sich RGB-Farbräume gut für die Darstellungen im Web. Zwar gibt es Farbräume wie Adobe RGB oder ProPhoto RGB, die ein breiteres Spektrum von Farben darstellen können, doch kommen nicht alle Monitore und Webbrowser mit den Formaten klar. sRGB kann zwar einige Farbtöne nicht darstellen, wird aber von allen gängigen Monitoren und Browsern korrekt interpretiert. Es bietet sich an Bilder, die nicht in diesem Format vorliegen zu konvertieren. Andernfalls besteht die Gefahr, dass die interpretierten Farben mehr oder weniger stark vom Originalbild abweichen.4
Anmerkungen
Der Beitrag deckt nicht alle Bildformate und Farbräume ab. Er stellt vielmehr einen Versuch dar, sich auf die wesentlichsten zu beschränken.
Quellen
1 Vgl. Blatner, David / Fracer, Bruce: Real World Adobe Photoshop CS, Berkeley CA. 20046, S. 179.
2 Vgl. Paynter, Herb: How to Prepare Images for Publication – Part One, URL: https://digital-photography-school.com/how-to-prepare-images-for-publication-part-one/ (eingesehen am 03.06.2019).
3 Vgl. Harper, Glenn: How to Choose the Right Color Profile for Sharing Images Online, URL: https://digital-photography-school.com/choose-right-color-profile-sharing-images-online/ (eingesehen am 02.06.2019).
4 Vgl. o.A.: Beispiele/Test für fehlerhaftes Anzeigen von Farben, URL: https://chromachecker.com/info/en/page/webbrowser (eingesehen am 02.06.2019).