Hoch auflösend vs Ladezeit
Fotos für das Internet setzen wir heute mit einer hohen Auflösung – sprich: groß bis bildschirmfüllend – auf die Webseite. Sie sollen scharf sein und brillante Farben zeigen, dabei die Ladezeit kurz halten und vor allem den mobilen Geräten mit einer geringen Übertragungsgröße entgegenkommen.
Dafür muss sich der Fotograf mit vielen Werkzeugen und Techniken auseinander setzen, beginnend mit der Frage nach der Auflösung bis hin zum Blick in die Glaskugel: Wie kommt das Foto auf all den anderen Monitoren – vom Touchscreen des Handys bis hin zum Desktop-Monitor – eigentlich an?
Auflösung: Völlig aufgelöst
Die Größe eines digitalen Fotos kann nicht ohne Weiteres in handlichen Zentimetern angegeben werden. Stattdessen sprechen wir von Auflösung und messen die Auflösung digitaler Bilder in Pixeln und Megapixeln. Dummerweise steht Auflösung für viele Elemente einer Webseite: Bilder haben eine Auflösung, bei Monitoren sprechen wie ebenfalls von einer Auflösung und die Digitalkamera gibt ihre Auflösung in Megapixeln an.
Zwischen 20 bis 24 Megapixel bringen die aktuellen APS-C-Kameras auf die Karte, bei Kameras mit Vollformatsensoren können es 36 bis 42 Megapixel sein. Monitore variieren zwischen 300 Pixeln (kleine Handy) bis hin zu 2600 Pixeln Breite und mehr.
iPhone X11
6,1" (15,5 cm)
1792 x 828 Pixel
326 ppi
Samsung Galaxy Note 20 Ultra
6,9"
3.088 x 1.440 Pixel
494 ppi
iPad Air
10,5" (26,67 cm)
2224 x 1668 Pixel
264 ppi
iBook Pro
15,4" (39,11 cm)
2880 x 1800 Pixel
220 ppi
Monitor
27" (68,58 cm)
2560 x 1440 Pixel
109
Fernseher 65" Ultra HD
65" (108 cm)
3840 × 2160 Pixel
59 ppi
PPI – Monitore und Pixel per Inch
Dabei sagt die Auflösung der Monitore nichts über ihre physikalische Abmessungen, denn Monitore können 72 PPI (Pixel per Inch) aufweisen oder 300 PPI und mehr auf einem Retina-Monitor des Handys. Pixel haben keine Größe. Entscheidend ist die Zahl der Pixel pro Zentimeter oder Zoll/Inch, die PPI.
Auf dem Monitor herrschen PPI (Pixel per Inch) und nicht DPI (Dots per Inch), auch wenn wir diese Bezeichnung häufig im Zusammenhang mit der Auflösung von Monitoren lesen. Nur der Drucker interessiert sich für die Dots per Inch – Tintenpünktchen pro Zoll. Bildbearbeitungsprogramme fragen beim Speichern von Fotos neben der Pixel-Auflösung nach den DPI oder der Drucker-Auflösung. Für Webseiten zählen aber nur die Pixel, die Drucker-Auflösung (z.B. 59 x 42 cm bei 300 dpi) richtet sich tatsächlich nur an den Drucker.
Ganz gleich welche DPI-Auflösung beim Speichern eingesetzt wird – 300 dpi oder 72 dpi –, das ändert nichts an der Darstellung des Bildes auf dem Monitor. Welche Pixel-Abmessungen möglich sind, hängt vom Design der Webseite ab. Erst das HTML und CSS der Webseite kann Retina-Monitore mit hoch auflösenden Bildern versorgen.
Größe und Auflösung von Fotos auf der Webseite
Die Zahl der Pixel eines digitalen Fotos erreicht heute zwischen 4000 x 3000 Pixel bis 6000 x 4000 Pixel (und mehr!). Das ist sowohl für große Desktop-Monitore als auch für Handys Overkill und würde Ladezeiten und Bandbreite der mobilen Geräte überstrapazieren. Responsive Webseiten, die sich an Handys genauso gut anpassen wie an große Desktop-Monitore, halten von jedem Foto gleich eine Handvoll unterschiedlicher Größen parat.
Der Webdesigner kennt die Abmessungen der Bilddatei und den Platz, den er im Layout der Seite zur Verfügung hat, der Browser kennt die Größe des Monitors und wieviel PPI der Monitor leistet. So setzt das Internet auf responsive Bilder: Typischerweise werden dem Browser zwei, drei oder mehr Bildgrößen angeboten und der Browser wählt die Auflösung, die für den jeweiligen Monitor und das Design die passende ist.
Die richtige Größe für Fotos im Web
Optimal wäre es, wenn das Foto für jeden Gerätetyp die passende Größe hätte: eine angemessene Auflösung für die kleinen Monitore von Handys und Tabletts, aber unter Berücksichtigung der höheren PPI der Retina-Monitore, mehr Pixel für große Desktop-Monitore. Das ist einmal aufwändig, aber lohnt sich bei jedem Aufruf der Seite mit dem Handy oder dem Tablett.
HTML hat eine Lösung für diese Aufgabe: das picture-Tag.
<picture> <source media="(min-width: 1260px)" srcset="sheep-970.jpg"> <source media="(min-width: 600px) and (orientation:landscape)" srcset="sheep-1800.jpg 2x, sheep-970.jpg 1x"> <source media="(min-width: 300px) and (orientation:portrait)" srcset="sheep-900.jpg 2x, sheep-450.jpg 1x"> <source media="(min-width: 300px)" srcset="sheep-450.jpg"> <img src="sheep-970.jpg" width="970" height="444" alt="Foto Format"> </picture>
Dabei zeigt 1x dem Browser, dass er sheep-970.jpg für den Desktop-Monitor einsetzen soll und sheep-1800.jpg 2x für den Retina-Monitor. 1x und 2x sind pragmatische Lösungen, denn jeder Handy-Monitor, jedes Tablett und jedes Retina-Notebook hat seine individuellen PPI. Das sieht wüst und unbeherrschbar aus, aber Content Management Systeme wie WordPress erledigen das Anlegen der verschiedenen Bildgrößen und den Einsatz der HTML- und CSS-Anweisungen automatisch im Hintergrund.
Monitore haben Auflösungen von etwa 300 Pixeln pro Zoll bis 2880 Pixel pro Zoll. Für ein Bild in voller Breite des Monitors könnten wir als Kompromiss eine maximale Auflösung von 2100 Pixeln Breite annehmen. Wenn das Bild 2/3 des verfügbaren Raums im Design der Seite ausfüllen soll, wären es 1400 Pixel.
Mit gehörigem Pragmatismus wären 450 Pixel Breite eine angemessene Größe für das Handy im Hochformat, auf dem wir Bilder immer in voller Breite des Monitors anzeigen wollen.
Angepasste Fotos in WordPress
In einem CMS (Content Management System) wie WordPress müssen wir weder in die Tiefen von HTML abtauchen noch einen Stapel von verschiedenen Bildgrößen anlegen, sondern WordPress erledigt das. Wir müssen lediglich die größte Version (z.B. 2100px Breite) laden.
Für Web speichern
JPEG und PNG sind die Dateiformate das Internet (noch)
JPEG ist das Format für Fotos, PNG für Grafiken und Logos
Programme wie Adobe Photoshop sorgen mit der Funktion Für das Web speichern für die minimale Speichergröße bei bester Qualität. Wir gewinnen ein paar Kilobytes, weil wir neben der Komprimierung den Ballast des Bildes entsorgen. Zu diesem Ballast zählen
- die Exif-Informationen,
- der IPTC-Header,
- das eingebettete Vorschaubild.
Das ICC-Profil haben wir früher ebenfalls entsorgt, denn bevor die Browser Farbmanagement unterstützen, war sRGB die sicherste Technik für eine halbwegs konsistente Darstellung der Farben. Heute ist es besser, das Profil zum Bild zu speichern – sowohl bei sRGB als auch bei AdobeRGB. Von der höheren Sättigung der Fotos im AdobeRGB-Farbraum profitieren allerdings nur Wide Gamut-Monitore.
Wenn Fotos im AdobeRGB-Farbraum aufgenommen wurden, muss das Profil des Bildes auf jeden Fall gespeichert werden. Fotos im AdobeRGB wirken ansonsten flau und ungesättigt.
Links: AdobeRGB mit Profil (185 KB), rechts AdobeRGB ohne Profil (184 KB).
AVIF statt JPG
AVIF ist ein neues Dateiformat für digitale Fotos und tritt an, zum Nachfolger des altehrwürdigen JPG-Formats zu werden. Noch sind Anwendungen, die AVIF unterstützten, schlichtweg rar. Darktable hat allerdings in der letzten Version angekündigt, dass AVIF durch ein Plugin zum Speichern von Fotos benutzt benutzt werden kann.
AVIF komprimiert Fotos besser als JPG bei gleicher Qualität, und verfügt zudem über all die Merkmale, die wir bei JPG vermissen:
- HDR (High Dynamic Range), aber nicht als Serienfoto, sondern hohe Farbtiefe
- 8, 10, 12 Bit Farbtiefe
- Verlustfreie und verlustbehaftete Komprimierung
- Alpha-Kanäle für Freisteller
- Unterstützung für beliebige Farbräume: Wide Color Gamut, ISO/IEC CICP und ICC Profile
Wenn freigestellte Bilder auf der Webseite vor einem farbigen Hintergrund sitzen, müssen sie als PNG 24 gespeichert werden. PNG 24 ist ein verlustfreies Speicherformat, so dass die Freisteller einen hohen Speicherbedarf haben und zu langen Ladezeiten führen. Wer diese Seite mit Chrome oder Opera besucht, sieht die Orange bereits als Kreis mit farbigen Hintergrund. Safari, Internet Explorer und Firefox zeigen die JPG-Variante im eckigen Format.
Mit dem transparenten Hintergrund hat das AVIF 22 KB, JPG mit weißem Hintergrund 35 KB.
Photoshop / Lightroom / Darktable Für Web speichern
Lieber ein großes Bild mit starker Komprimierung als eine kleinere Bildgröße mit weniger Komprimierung wählen.
Eine Komprimierung auf 40 bis 60% ist gut genug. Ein Qualitätszugewinn tritt kaum noch ein, selbst wenn 100% eingestellt würde.
60% Qualität spart gut 30% Bildgröße gegenüber 80% Qualität.
Die Qualitätsstufen über 75% bringen keine Verbesserung der Schärfe oder Farben.
Der Workflow für Bilder im Internet
- Das Profil des Bildes speichern – gleich ob sRGB oder AdobeRGB.
- Speichern des Vorschaubildes deaktivieren.
- IPTC- und EXIF-Tag nicht speichern.
- Bildqualität beim Komprimieren mit Für Web speichern bei kleinen Bildern auf 50 bis 60 auf der Skala von 0 bis 100% einstellen. Mehr als 75% bringt bei der Betrachtung in Originalgröße keinen Qualitätsgewinn, die Bildgröße steigt aber ab 75% überproportional.
- Bei großen Bildern (~400 px Breite) darf die Qualität auf einen geringeren Wert eingestellt werden. Größere Fotos wirken auch bei 50% Qualität noch scharf mit brillanten Farben.
- Ein komprimiertes JPEG nicht mehr bearbeiten, sondern bei einer erneuten Bearbeitung wieder mit dem Original arbeiten.
Fotos ins Internet hochladen
Die Sozialen Medien von Facebook über Pinterest bis Flickr sowie Cloud-Dienste wie DropBox haben einen einfachen Bilder-Upload. Dort sorgt die Software auch für die Größenanpassung.
Blogs und Content Management Systeme wie WordPress haben ebenfalls eine Bilder-Upload, aber es hängt vom Design oder Theme ab, ob sich das Bild ohne Zuschneiden in das Design einpasst.
Bei HTML-Seiten im Eigenbau ist die Technik für Bilder in der HTML-Seite schon etwas komplizierter und neben dem HTML-Editor kommt ein FTP-Programm hinzu, mit dem das Bild auf den Server geladen wird. Und wenn das Foto im Browser nicht angezeigt wird, sondern nur ein Platzhalter zu sehen ist?
- Prüfen, ob der Pfad zum Bild korrekt eingegeben wurde und das Bild auf dem Webserver im richtigen Verzeichnis liegt.
- Wenn das Bild von der Werbeagentur kam und dort für den Druck aufbereitet wurde, ist es vielleicht im CMYK-Farbraum? Kaum ein Browser kann CMYK-Bilder anzeigen.
- Wenn der Pfad zum Bild mit C:\ oder file: anfängt, dann ist es der Pfad zum Bild auf dem eigenen Rechner und nicht zum Bild auf dem Webserver.
- Auf Groß- und Kleinschreibung bei Dateinamen achten.
Externe Quellen
- Ausführlich zu Fotos für das Internet, vor allem für Produktfotos: 10 Must Know Image Optimization Tips aber nur auf Englisch