Zum Inhalt springen
Der Guide für ein smartes Leben.
VG Wort Pixel
Photoshop CS4

Größenanpassungen fürs Web

Autor: Tim Kaufmann • 5.8.2010 • ca. 4:55 Min

Inhalt
  1. Effiziente Bildbearbeitung mit Photoshop CS4
  2. Größenanpassungen fürs Web

Fast jedes Bild muss für die Darstellung im Web erst einmal verkleinert werden, denn riesige Fotos und Logos in Druckqualität haben im Webbrowser schlechte Karten. Auch für den E-Mail-Versand sollten die meisten Fotos aus Platzgründen erst einmal zurechtgestutzt werden.Das Wichtigste dabei: Die ...

image.jpg
Verkleinern und Schärfen kann Photoshop in einem Arbeitsgang erledigen. Wählen Sie im Dropdown Bikubisch schärfer aus.
© Internet Magazin

Fast jedes Bild muss für die Darstellung im Web erst einmal verkleinert werden, denn riesige Fotos und Logos in Druckqualität haben im Webbrowser schlechte Karten. Auch für den E-Mail-Versand sollten die meisten Fotos aus Platzgründen erst einmal zurechtgestutzt werden.Das Wichtigste dabei: Die verkleinerten Ausgaben sollten nicht schlechter aussehen als das Original. Wenn ein Bild verkleinert wird, wirkt es aber fast zwangsläufig unschärfer. Schuld daran sind Schwächen des Interpolationsalgorithmus, also der Funktion, die entscheidet, welche Pixel beim Verkleinern weggeworfen werden.

Schon aus diesem Grund sollten Sie es vermeiden, dasselbe Bild über mehrere Verkleinerungen auf die gewünschte Größe zu bringen, sondern immer nur mit einem einzigen Schritt arbeiten. Und Sie sollten das Bild nachträglich noch einmal schärfen.Photoshop bietet eine Funktion an, die die Arbeit des Verkleinerns und Schärfens in einem Rutsch erledigt. Im Menü unter Bild/Bildgröße können Sie nicht nur die gewünschten Abmessungen angeben, sondern auch bestimmen, dass das Bild geschärft wird. Die passende Option lautet Bikubisch schärfer (optimal zur Reduktion).Um etwas Zeit zu sparen, können Sie die Option als Standard definieren. Das erledigen Sie in den Photoshop-Einstellungen unter Allgemein. Sollen GIF- oder PNG-Bilder verkleinert werden, wandeln Sie diese der besseren Qualität wegen kurzzeitig in RGB um (Bild/Modus) und beginnen dann erst mit dem Verkleinern. Schließlich speichern Sie das Bildmaterial wieder als GIF oder PNG.

Weboptimiertes Speichern

image.jpg
Im Dialogfeld für weboptimiertes Speichern können Sie neben dem Bildtyp auch die Kompression und die Zahl der Farben einstellen.
© Internet Magazin

Die Bilder, die Sie im Web veröffentlichen wollen, kann Photoshop einer Spezialbehandlung unterziehen. Das Ziel: kleine, aber qualitativ hochwertige Fotos für den Browser erzeugen. Die Funktion dafür verbirgt sich unter Datei/Für Web und Geräte speichern. Sie lässt sich mit Strg+Alt+Shift+S aufrufen - umständlich und ist unter Bearbeiten/ Tastaturbefehle jederzeit änderbar.Auf den ersten Blick wirkt die Funktion sehr spartanisch, doch die Einstellungen haben es in sich. Hier können Sie nicht nur einstellen, ob die Grafik als JPEG, PNG oder GIF gespeichert werden soll, sondern auch die Kompression und die Transparenz sowie die Bildgröße justieren.Am besten aktivieren Sie den Reiter 4fach. Dann sehen Sie oben links das Original und in den drei anderen Fenstern das gleiche Bild in verschiedenen Varianten mit geringerer Dateigröße. Klicken Sie eines der Vorschaubilder an, dann können Sie über die Schaltflächen am rechten Rand dessen Einstellungen verändern.Speziell bei JPEG-Dateien hat der Regler Qualität den größten Einfluss auf die Datei-größe. Wenig Beachtung findet der Regler Weichzeichnen. Dabei kann man darüber bei starker Komprimierung (niedrige Qualität) entstehende Kompressionsartefakte zähmen, wenn auch auf Kosten der Bilddetails.Ausprobieren lohnt sich aber in jedem Fall. Bei GIF-Dateien bestimmt die Farbanzahl die Dateigröße, wobei 256 der höchste Wert ist. Als Farbreduktionsalgorithmus sollten Sie perzeptiv und kein Dither auswählen. Soll das Bild mit Transparenz erzeugt werden, wählen Sie im Reiter Farbtabelle die Farben des Hintergrundes aus und haken die Option Transparenz an. Mit der Pipette und gedrückter Umschalttaste fahren Sie mit der Maus über den Hintergrund, bis das Motiv freigestellt ist.Statt einzelne Bildparameter wie die Kompression (bei JPEGs) oder die Anzahl der Farben (bei GIFs) zu regeln, können Sie mit dem Pfeilknopf auf Höhe von Vorgabe das Bild auch auf eine bestimmte Dateigröße hin komprimieren. Es empfiehlt sich, hier ein paar eigene Einstellungs-Sets zu definieren, die sich dann später per Dropdown rasch aufrufen lassen. Das spart Tipp- und Justagearbeiten in den Dialogfeldern.Technisch steht auch einer Photoshop-Aktion für weboptimiertes Speichern nichts im Wege. Praktisch stößt man jedoch rasch an Grenzen, denn eine optimale, automatische Speicherung von unterschiedlichen Bildern ist kaum möglich.

Tipp:

Ladezeiten simulieren

Unter jedem Vorschaubild sehen Sie die Dateigröße und die Ladezeit mit der jeweiligen Leitungsgeschwindigkeit. Letztere können Sie ganz oben über den Reitern mit dem Pfeil-Button ändern und so Modems, ISDN- und DSL-Verbindungen simulieren.

Droplets - fit für den Desktop

Die Automatisierungsfunktionen von Photo- shop sind mit den Aktionen noch lange nicht ausgeschöpft. Unter Windows können Sie aus den Aktionen Droplets erzeugen, die dann als Miniprogramme auf dem Desktop gespeichert werden können. Das funktioniert dann so: Zieht man eine oder mehrere Bilddateien auf diese Droplets, wird die damit verbundene Aktion automatisch ausgeführt. Das funktioniert auch, wenn Photoshop noch nicht im Hintergrund läuft.Wir zeigen Ihnen nun anhand einer der am häufigsten benötigten Stapelverarbeitungen, wie Sie ein Droplet erzeugen: mit einer Bildverkleinerung für Thumbnails.

image.jpg
Mit Droplets platzieren Sie Photoshop-Aktionen als Icons auf Ihrem Desktop. Ziehen Sie Bilder darauf, wird die Aktion ausgeführt.
© Internet Magazin

Zunächst erzeugen Sie dafür eine Photoshop- Aktion. Öffnen Sie dazu die Aktionspalette (Alt+F9) und erzeugen Sie mit dem Neu-Knopf eine leere Aktion. Den Namen können Sie dabei beliebig vergeben. Klicken Sie den Aufnahmeknopf an, gehen Sie im Menü Bild auf den Eintrag Bildgröße und geben Sie die gewünschte Bildgröße ein - beispielsweise 120 x 90 Pixel.Speichern Sie anschließend das Bild im passenden Format zum Beispiel als JPEG und mit einem Dateinamen, der es als Thumbnail kennzeichnet (zum Beispiel Originalname_k.jpg). Dann stoppen Sie die Aktions-Aufnahme.Das Droplet selbst wird unter dem Menüpunkt Datei/Automatisieren/Droplet erstellen generiert.Im Einstellungsfenster sollten Sie die Punkte Keine Optionsdialogfelder für Datei öffnen anzeigen sowie Farbprofil-Warnungen unterdrücken ankreuzen und beim Ziel Ordner auswählen. Sonst dürfen keine Häkchen gesetzt sein.Nun müssen Sie das Droplet nur noch unter einem beliebigen Namen speichern, am besten auf dem Desktop, wo es leicht wiedergefunden wird.Wenn Sie fortan Bilder auf 120 x 90 Pixel verkleinern wollen, genügt es, das Bildmaterial per Drag and Drop auf das Droplet zu schieben. Es bietet sich an, ein ähnliches Droplet auch noch für die große Bildvariante zu erzeugen - zum Beispiel im Format 800 x 600 Pixel.Bei der Vergabe des Dateinamens können Sie zum Beispiel nach dem Schema Bildname_g.jpg vorgehen, um die Bilder später auch leicht wiederzufinden.

Sind websichere Farben out?

Im Photoshop-Dialog zum weboptimierten Speichern von GIFs findet sich die Funktion für websichere Farben - immer noch. Diese Farbpalette stammt aus den Anfangstagen des Web, als verschiedene Browser nicht in der Lage waren, alle Farben darzustellen.Dies betrifft Monitore, die mit einer heute fast obsoleten Farbtiefe von acht Bit angesteuert werden und so nur 256 Farben zeigen. Auf diesen Systemen zeigen Browser nur 216 Farben an, was zu hässlichen Farbverschiebungen führt, sofern man von der websicheren Farbpalette abweicht.Heute ist kaum noch ein Nutzer ohne True-Color-Farbeinstellung (16,7 Millionen Farben) im Web unterwegs. Deshalb muss man auf websichere Farben beim Design normaler Websites keine Rücksicht mehr nehmen.Doch ganz aus der Welt ist die Einschränkung auch heutzutage noch nicht. Gerade beim Webdesign für mobile Endgeräte muss man aufpassen, die kleinen Displays nicht zu überfordern. Zwar kommen Geräte wie Apples iPhone auf eine Farbtiefe von 24 Bit (rund 16,7 Millionen Farben), doch schon das Nexus One (Google-Handy) erreicht nur 16 Bit (rund 65.000 Farben). Ältere oder einfachere Handys mit kleineren Bildschirmen liegen teilweise noch darunter.