Bilder fürs Web verkleinern und optimieren

Wie wir im ersten Teil des Kurses (in Bezug auf E-Mail und Office-Dokumente) schon gesehen haben, ist die optimale Ausgabegröße einerseits abhängig von den Bedürfnissen des Empfängers, andererseits von der Bildschirmgröße bzw. dem Bildschirmformat. Webdesigner müssen Fotos oft in ein pixelgenau definiertes Layout einpassen. Die Bilder werden dafür jeweils auf die gewünschte Größe gebracht, so dass es oft mehrere unterschiedlich große Variationen eines einzelnen Fotos gibt.

Das (bearbeitete, aber ungeschärfte) Bild in Originalgröße sollte im Archiv immer sicher aufbewahrt werden.

Viele Bildbearbeitungsprogramme verfügen über ein Modul, mit dem man automatisch Online-Galerien erzeugen kann. Diese Funktion sollten Sie vor allem dann nutzen, wenn Sie wenig Erfahrung haben. Meistens gibt es keine exakten Angaben, wie groß die Bilder tatsächlich werden, man hat vielleicht nur die Wahl zwischen klein - mittel oder groß. Sie müssen dann erst einmal ausprobieren, wie groß "klein" oder "groß" in Pixelmaßen tatsächlich sind. In jedem Fall erzeugt das Programm jedoch web-optimierte und verkleinerte Kopien Ihrer Bilddateien und eine eigene Verzeichnisstruktur, die Sie dann zusammen mit der Navigation und den dazugehörigen (HTML-)Seiten bequem ins Netz laden können.

Normalerweise werden die Fotos einer größeren Galerie auf einer Seite als kleine Übersichtsbilder, so genannte "Thumbnails", angeboten. Ein guter Seitengenerator erzeugt diese Fotos als Einzeldateien. Ein schlechter Seitengenerator greift nur auf die großen Fotos zu und lässt sie für die Anzeige auf Thumbnail-Größe herunter rechnen. Der Nachteil: Es dauert sehr viel länger, bis eine solche Thumbnail-Seite vollständig geladen ist. Zu diesem Zeitpunkt haben Sie die ersten ungeduldigen Surfer schon wieder verloren. Achten Sie deshalb darauf, dass Ihr Webseitengenerator sowohl Thumbnails als auch Galeriebilder erzeugt. Sowohl IrfanView als auch Photoshop Elements verfügen über einen solchen Webseitengenerator.

Dieser Webseitengenerator erzeugt eine Indexdatei mit der Bildübersicht sowie Unterordner für die Galeriebilder, Vorschaubilder und die einzelnen Seiten. In der Datei 'UserSelections' sind die Angaben darüber gespeichert, welche Farben und Formate für das Seitendesign ausgewählt wurden.

Wenn Sie nur einzelne Fotos für eine bereits vorhandene Galerie bereitstellen möchten, fragen Sie den Webdesigner nach der gewünschten Größe - am besten sind auch hier die genauen Pixel-Abmessungen. Das Laden eines Fotos auf einer Internetseite geht nicht nur schneller, sondern das Bild wird auch besser angezeigt, wenn es genau die richtigen Abmessungen hat. Wenn nicht, wird seine Anzeigegröße durch die Seitenprogrammierung angepasst. Das dauert nicht nur länger, sondern führt auch häufig zu einer unschön verzerrten Darstellung der Bilddatei.

Wenn auf einem Seitendesign wie z. B. XING die genauen Formate für Porträtfotos vorgegeben sind und das hochgeladene Bild diesem Format nicht entspricht, wird es durch die Seitenprogrammierung gestreckt und unschön verzerrt. Es ist deshalb ratsam, das Foto pixelgenau zu liefern.

Kleiner als 500 Pixel sollte heutzutage kein Galeriebild sein. Die ideale Größe liegt zwischen 600 und 1200 Pixel.

Falls Sie selbst der Seitengestalter sind und ratlos, welches Format Sie für Ihre Galerie am besten wählen sollten, dann orientieren Sie sich entweder an der Bildschirmgröße Ihrer potenziellen Besucher oder an der Seitenbreite Ihres gesamten Webdesigns. Fotos sollten auf jeden Fall vollformatig - ohne Scrollen - auf dem Bildschirm angeschaut werden können. Je größer das Foto, desto mehr Qualität erhält der Besucher. Bilder mit vielen feinen Details können im Web problematisch sein, weil die Verkleinerung einen Teil der Bildinformation zerstört.

Ein detailreiches Motiv enthält mehr Informationen und benötigt mehr Speicherplatz. Es muss, um etwaige Upload-Limits zu erfüllen, stärker verkleinert werden, als ein flächiges Motiv. Problematisch für den Betrachter ist dabei, dass viele Details verloren gehen.

Ein flächiges Motiv mit wenigen Farben und Details kann auch mit hohen Qualitätseinstellungen gespeichert werden. Die hier gezeigten Fotos haben eine Seitenlänge von 400 Pixeln (längere Kante).

Bei Wettbewerben oder bei Online-Galerien wie der Fotocommunity gibt es bestimmte Bildmaße, die nicht unter- oder überschritten werden dürfen. Hier hat der Anwender einen gewissen Spielraum, innerhalb dessen er seine Fotos präsentieren kann.

Lautet die Vorgabe bei einem Wettbewerb z.B. maximal 2400 Pixel (längere Seitenkante), so bedeutet das, dass bei einem Hochformatbild die Höhe des Bildes 2400 Pixel betragen darf; die Breite ist beim Hochformat ohnehin geringer und kann bei einer proportionalen Skalierung vernachlässigt werden. Bei einem Querformatbild gilt analog, dass das Foto 2400 Pixel breit sein darf, die Höhe wird automatisch (proportional) angepasst und liegt unter 2400 Pixel.

Bei Wettbewerben sollten Sie die Maximalvorgaben erfüllen, um Ihre Chancen zu erhöhen. Die Fotocommunity empfiehlt eine Seitenlänge von 1000 Pixel. Damit ist sowohl im Hoch- wie auch im Querformat sichergestellt, dass das Foto auf den meisten gängigen Bildschirmen vollständig angezeigt werden kann.

Häufig sind die Abmessungen (in Pixel) der Bilder mit einer maximalen Dateigröße verknüpft, z. B. 400 KB (Kilobyte). Will man diese Anforderungen erfüllen, muss man abwägen, an welcher Stelle man sinnvoll sparen kann: bei der Kantenlänge, der Auflösung des Bildes oder über Komprimierungsrate beim Speichern eines JPGs. Detailreiche Motive und Fotos, die mit einem höheren ISO-Wert aufgenommen wurden, benötigen etwas mehr Speicherplatz.

Die Auflösung eines digitalen Bildes wird in dpi (dots per inch) bzw. ppi (pixels per inch) angegeben. Je höher die Auflösung eines Bildes, desto mehr Bildpunkte befinden sich auf einer Strecke von 2,54 cm (= 1 inch). Je mehr Bildpunkte vorhanden sind, desto genauer und detailreicher ist das Bild, desto mehr Informationen stehen einem Bildbearbeitungsprogramm für Korrekturen zur Verfügung. Ein Bild mit hoher Auflösung benötigt aber auch mehr Speicherplatz und die Bearbeitungen dauern länger.

Die Bildgrößen-Angaben zeigen anschaulich, wie unterschiedlich die Bildmaße bei unterschiedlichen dpi-Werten ausfallen.

Wenn man ein Foto aus einer Digitalkamera am PC öffnet,sieht man sie i.d.R. in einer Auflösung von 72 ppi (der üblichen Bildschirmauflösung). Für den Druck der meisten Magazine und Zeitschriften oder andere handelsübliche Druckprodukte sind 300 ppi Standard, in einigen Ausnahmefällen kann sogar eine höhere Auflösung erforderlich sein. Tageszeitungen kommen mit weniger aus.

Wenn man seine Fotos in einem Print-Medium drucken möchte, muss das Originalfoto von den 72 ppi auf die höhere Auflösung umgerechnet werden. Dabei verringert sich die maximale Ausgabegröße in Zentimetern.

Die Bildauflösung kann rechnerisch zwar auch nach oben verändert werden, ausschlaggebend für die Qualität ist aber die vorhandene Bildinformation, also die ursprünglich beim Fotografieren oder Scannen erzeugte Menge an Pixeln.