Fotos für die Webseite optimieren

Hoch auflösend vs Ladezeit

Fotos sollen heute mit einer hohen Auflösung – sprich: groß – im Internet angezeigt werden. Sie sollen scharf sein, brillante Farben zeigen. Auch mit vielen und großen Fotos soll die Webseite schnell laden und den mobilen Geräten mit einer möglichst geringen Übertragungsgröße entgegenkommen.

Fotos für die Webseite optimieren

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.

Ein Pixel entsteht als elektrische Ladung und hat weder eine Größe noch eine Form. Form, Größe und Farbe bekommt der Pixel erst auf dem Monitor.


Zwischen 20 bis 24 Megapixel bringen die aktuellen APS-C-Kameras auf die Karte, bei Kameras mit Vollformatsensoren können es 36 Metapixel sein.

Der Monitor ist ein flexibleres Ausgabemedium als Papier. Wir können in das Bild hineinzoomen, aber erst in einer hohen Zoomstufe sehen wir die Pixel wie erwartet als Quadrate. Das Bild auf dem Monitor ist ein Mosaik aus kleinen Quadraten.

Größe von Fotos für den Druck – für die Webseite
Beim Druck haben wir handliche Größen in Zentimetern, der Monitor hingegen ist die große Unbekannte.

Größe und Auflösung von Fotos auf der Webseite

Die Pixel eines digitalen Fotos erreichen heute zwischen 4000 x 3000 Pixel bis 6000 x 4000 Pixel (und mehr!).

Die Monitore von Handys, Tabletts und selbst von großen Desktop-Monitoren hingegen nur 900 x 600 Pixel bis 2560 x 1600 Pixel bei 227 ppi.


Die dpi-Auflösung (z.B. 59 x 42 cm bei 150 dpi) richtet sich nur an den Drucker. Schließlich bedeutet die Abkürzung DPI Dots per Inch – Punkte pro Zoll.

Beim Monitor hingegen gelten Pixel per Inch – ppi. Gleich, was für die Auflösung beim Speichern eingesetzt wird – 300 dpi oder 72 dpi –, nichts ändert die Darstellung des Bildes auf dem Monitor. Welche Pixel-Abmessungen möglich sind, hängt vom Design der Webseite ab.

Alles über die Größe von Fotos auf Webseiten
Die Auflösung – hier 300 Pixel pro Zoll – richtet sich an den Druck und spielt bei Fotos für die Webseite keine Rolle

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 geringere Auflösung für die kleinen Monitore von Handys und Tabletts, eine höhere Auflösung 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 unterwegs.

Auf jeden Fall müssen wir Rücksicht auf die mobilen Geräte nehmen, die Seiten und Bilder nicht so schnell laden können wie der Rechner auf dem Schreibtisch und obendrein nur ein eingeschränktes Kontingent für Downloads haben.

Mehr zu unterschiedlichen Bildgrößen für Desktop-Rechner und mobile Geräte: img srcset – Alternative Bildgrößen

Fotos schärfen

Bei der Verkleinerung eines Fotos entsteht ein leichter Weichzeichnungseffekt, dem viele Webdesigner und Fotografen durch ein leichtes Schärfen entgegentreten.

Beim Verkleinern und auch beim Vergrößern eines Fotos werden die diagonalen Kanten weichgezeichnet, damit keine Treppenstufen entstehen – dieses Weichzeichnung nennt man Antialiasing.

Fotos schärfen mit Unscharf Maskieren – Screenshot
Unscharf Maskieren ist der Filter für das Nachschärfen von Fotos nach dem Verkleinern.

Fotos für Facebook, Twitter & Co. müssen selten geschärft werden. Die sozialen Medien verkleinern das Bild automatisch und schärfen es dabei, ebenfalls automatisch und in hoher Qualität.

Wenn das Foto für die eigene Webseite geschärft wird, dann erst am Ende der kompletten Bearbeitung und nach dem Verkleinern, weil sowohl bikubisches als auch bilineares Verkleinern einen Weichzeichnungseffekt mit sich bringen.

Für Fotos ist bikubisch die Technik der Wahl beim Verkleinern.

Für Web speichern

JPEG und PNG sind die Dateiformate das Internet

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.

Inzwischen 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.

sRGB: sichere Basis für Bilder im Web

Wenn Fotos im AdobeRGB-Farbraum aufgenommen wurden, muss das Profil des Bildes auf jeden Fall gespeichert werden. Ansonsten zeigt sich der Unterschied zwischen der Darstellung in Photoshop (mit Color Management) und in Internet Explorer auf dem PC durch einen Verlust der Brillanz. Fotos im AdobeRGB wirken dann flau und ungesättigt.

sRGB oder AdobeRGB
Fotos im AdobeRGB-Farbraum profitieren nur auf einem AdobeRGB-Monitor vom größeren Farbraum. Nur sRGB konnte eine verlässliche Farbwiedergabe versprechen.

Photoshop 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 50 bis 70% ist gut genug. Ein Qualitätszugewinn tritt kaum noch ein, selbst wenn 100% eingestellt würde.

Photoshop für Web speichern Speichern… Abbrechen Fertig Weichzeichnen: Qualität: Hintergrund: Vorgabe JPEG Hoch [Unbenannt] 60 0 In sRGB konvertieren JPEG 187,8 KB 8 Sek. bei 256 Kbit/s Progressiv Farbprofil einbetten

60% Qualität spart gut 30% Bildgröße gegenüber 80% Qualität.

Photoshop für Web speichern Speichern… Abbrechen Fertig Weichzeichnen: Qualität: Hintergrund: Vorgabe JPEG Hoch [Unbenannt] 80 0 In sRGB konvertieren JPEG 312,6 KB 13 Sek. bei 256 Kbit/s Progressiv Farbprofil einbetten

Die Qualitätsstufen über 75% bringen keine Verbesserung der Schärfe oder Farben.

Bilder in den sRGB-Farbraum konvertieren

Die Monitore der meisten Besucher sind nicht kalibriert und wer installiert schon das Profil des Monitors?. Dageben hilft kein Profil. Wir können aber davon ausgehen, dass Monitore, die nicht älter als zwei oder drei Jahre sind, ein verlässliches sRGB zeigen (falls ihre Besitzer Helligkeit und Kontrast nicht verstellt haben).

Wer befürchtet, dass er durch die Transformation von AdobeRGB in sRGB seinem Bild »etwas wegnimmt«, kann sich entspannt zurücklehnen: Von einem Qualitätsverlust ist in Photoshop kaum etwas zu sehen – der entsprechende Rendering Intent sorgt dafür, dass der Farbeindruck erhalten bleibt.

Am Rande: Die wenigsten Monitore können AdobeRGB anzeigen. Bilder in 16 Bit Farbtiefe kann kein Monitor anzeigen. Dann ist die Aufbereitung von Fotos im Bildbearbeitungsprogramm sozusagen ein Blindflug …

sRGB- oder AdobeRGB-Monitor?

AdobeRGB sehen wir auf dem Monitor nur auf einem AdobeRGB-Monitor. Wenn der eigene Monitor ein sRGB-Monitor ist, sehen wir auch bei AdobeRGB nur eine Simulation der AdobeRGB-Farben.

Auf jeden Fall sehen wir das Bild jetzt in Photoshop so, wie es auf dem durchschnittlichen Monitor wirken wird.

Der Workflow für Bilder im Internet

  • Darauf achten, dass das Profil des Bildes mitgespeichert wird – gleich ob sRGB oder AdobeRGB.
  • Unter den Voreinstellungen von Photoshop das Speichern des Vorschaubildes deaktivieren. Das Vorschaubild macht den größten Teil des zusätzlichen Speichers aus, der durch den Befehl Datei/Speichern unter im Vergleich zu Für Web speichern verbraucht wird. Die verbleibende, relative kleine Differenz gebühren dem EXIF- und dem IPTC-Tag des Bildes.
  • Wenn IPTC- und EXIF-Tag erhalten bleiben sollen, das Foto in Photoshop mit „Datei/Speichern unter“ speichern. 
  • Bildqualität beim Komprimieren mit Für Web speichern bei kleinen Bildern auf 60 bis 75 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. Das gilt genauso für »Speichern unter«: Bildqualität auf 7 bis 10 einstellen, denn bei einer höheren Einstellung der Qualität geht die Bildgröße auf wie einen Hefeteig. Ein Qualitätsgewinn ist dabei aber nicht zu verzeichnen.
  • 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.
  • Wieder einmal gilt: Es kann nur Einen geben. Das Bild sollte nur einmal als JPEG gespeichert werden, denn es leidet, wenn es geöffnet, bearbeitet und ein weiteres Mal als JPEG gespeichert wird.

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

Mehr zum Thema Sport und spielende Kinder fotografieren

Die digitale Fotografie ist ein Segen für die Sportfotografie: Erst Serienfotos bringen zuverlässig gute Aufnahmen in den Kasten.

Bei Fußballspielen können wir uns die Zeit für die Fotos nicht aussuchen und müssen das Licht nehmen, wie es kommt.

Dez 2017

Fotos schärfen im Bildbearbeitungsprogramm

Es gibt keine Einstellung beim Schärfe, die auf alle Fotos passt.
Mar 2018

TIFF – Dateiformat für Bildarchive

TIF ist das universelle Dateiformt: mit ICC-Profil, Ebenen, unkomprimiert, wenig anfällig
Apr 2018

Bildarchive einrichten und organisieren

Fotos, Video, Grafik in Ordnern / Verzeichnissen organisieren

Ivent Fotokurse
Entdecken, was hinter dem Spiegel liegt …

Bildgröße: Maße: Einpassen: Breite: Höhe: Auflösung: Neu berechnen: 791,0 KB (war 41,5 MB) 3961Px x 2644Px Benutzerdefiniert 980 654 300 Bikubisch schärfer (Verkleinerung) Pixel/Zoll Bildgröße Abbrechen OK Pixel Pixel Speichern… Abbrechen Fertig Weichzeichnen: Qualität: Hintergrund: Vorgabe JPEG Hoch [Unbenannt] 60 0 In sRGB konvertieren JPEG 187,8 KB 8 Sek. bei 256 Kbit/s Progressiv Farbprofil einbetten Stärke Radius Schwellenwert Stufen 110 0.5 0 % Pixel OK Abbrechen Vorschau 100% Unscharf maskieren