Für Web speichern

Für Web speichern

28. April 2008

Für Web speichern: Große Bilddateien „optimieren”, d.h. hier: in der Dateigröße reduzieren.Verwechseln Sie Dateigröße bitte nicht mit Bildgröße.

Mit Bildgröße sind die Abmessungen des Bildes gemeint, also Breite mal Höhe, während Dateigröße die Speichergröße der Datei meint.

Für Sie bedeutet das, dass Sie in einem ersten Arbeitsschritt die Bildgröße auf die Bildmaße gebracht haben, wie Sie sie benötigen (Kapitel Bildgröße ändern).

Im zweiten Arbeitsschritt geht es jetzt darum, die Speichergröße des Bildes zu verringern, damit Sie z.B. nicht übergroße Dateien per E-Mail an Freunde oder Bekannte versenden oder Bilder im Internet veröffentlichen, die viel Ladezeit benötigen.

Es gilt generell auch hier: der Zweck bzw. die Verwendung des Bildes bestimmt die Bearbeitung des Bildes.

Beispiel: Bei einer Verwendung des Bildes ausschließlich für den Monitor (E-Mail / Internet / Bildschirmpräsentationen) können Sie die Auflösung des Bildes auf 72 dpi setzen, was eine erhebliche Reduzierung der Dateigröße mit sich bringt), während Sie bei Verwendung des Bildes für einen Ausdruck darauf achten müssen, dass das Bild mindestens eine Auflösung von 150 dpi haben sollte, damit ein guter Druck das Ergebnis Ihrer Bemühungen ist.

Für Web speichern sollte, wie der Name schon nahelegt, dafür verwendet werden, Bilder für das Web (E-Mail / Internet / Monitor) zu optimieren, d.h. in der Dateigröße zu reduzieren. Das Bild kann hier entweder im jpg-, gif- oder png-Format gespeichert werden.

Öffnen Sie in Photoshop eine Bilddatei, die Sie in der Dateigröße optimieren wollen:

Bilder fuer das Web Internet speichern mit Adobe Photoshop 19.

Sollten Sie Änderungen am Bild vornehmen wollen, sollten Sie das stets vor Für Web speichern tun und dann die Datei erst einmal speichern! So stellen Sie sicher, dass Ihnen mühevolle Arbeitsschritte der Bildänderung nicht verlorengehen. Bildoptimierung ist immer der letzte Schritt in der Bearbeitung von Bildern. Mit Bildoptimierung ist hier nicht gemeint, Bilder oder Bilddateien optimal für den Druck vorzubereiten!

Klicken Sie Für Web speichern an. Es öffnet sich ein neuer Arbeitsraum:

Bilder fuer das Web Internet speichern mit Adobe Photoshop 19.1

Oben über dem angezeigten Bild finden Sie die Karteireiter

OriginalOptimiert2fach4fach

Standardmäßig ist die Bildansicht auf Optimiert eingestellt.

Bilder fuer das Web Internet speichern mit Adobe Photoshop 19.2

Bilder fuer das Web Internet speichern mit Adobe Photoshop 19.3

Bilder fuer das Web Internet speichern mit Adobe Photoshop 19.4

Bilder fuer das Web Internet speichern mit Adobe Photoshop 19.5

Die Karteireiter oberhalb des angezeigten Bildes können dafür benutzt werden, das Ergebnis der Optimierung in einem Vorschaubild zu begutachten, bevor man es abspeichert.

Das Vorschaubild zeigt in der Ansicht das Ergebnis der Optimierung, wie sie sich auf die Bildqualität auswirkt.

In der 2fach- oder 4fach-Ansicht lassen sich anhand der Vorschaubilder die Kompressionsrate und die Farbanzahl (wichtig bei den Formaten GIF oder PNG) ablesen. Durch Anklicken der Vorschaubilder werden diese ausgewählt, durch Klicken auf OK wird das ausgewählte Bild gespeichert.

In der 2fach- bzw. 4fach-Ansicht teilt sich das Vorschaufenster in 2 bzw. 4 Bereiche.

Bilder fuer das Web Internet speichern mit Adobe Photoshop 19.6

Bilder fuer das Web Internet speichern mit Adobe Photoshop 19.7

Diese geteilten Vorschaufenster haben die Funktion, Ihnen alternative Vorschaubilder im Vergleich mit dem nicht komprimierten Original anzuzeigen, damit Sie leichter die Größe der Dateigrößenreduzierung bestimmen und gleichzeitig die Auswirkungen auf die Bildqualität sehen können.

Bilder fuer das Web Internet speichern mit Adobe Photoshop 19.8

Bilder fuer das Web Internet speichern mit Adobe Photoshop 19.9

Das Vorschaubild Original zeigt Ihnen die Dateigröße des unkomprimierten Bildes an. Das Vorschaubild daneben zeigt Ihnen zum einen die Dateigröße ( A ) des komprimierten, also des in seiner Dateigröße reduzierten Bildes an, zum anderen die Kompressionsrate, die Sie gewählt haben ( B ).

Bei der 4fach-Anzeige wird Ihnen im Prinzip das gleiche wie bei der 2fach-Ansicht angezeigt, zusätzlich jedoch noch 2 andere Vorschaubilder mit den voreingestellten Anzeigewerten (die Hälfte und das Viertel der eingestellten Kompressionsrate). Ändern Sie die Kompressionsrate, ändert Photoshop automatisch die Werte der beiden anderen Vorschaufenster.

Zur Kontrolle hinsichtlich der ausgewählten Kompressionsrate haben Sie zusätzlich die Möglichkeit, sich das Vorschaubild in Ihrem Browser anzeigen zu lassen ( C ):

Bilder fuer das Web Internet speichern mit Adobe Photoshop 19.10

Durch Klicken auf eines dieser Vorschaubilder wählen Sie es aus. Klicken Sie anschließend auf den OK-Button. Es erscheint dann ein Speichern-Dialog, mit dem Sie das Verzeichnis / den Ordner auswählen, in dem das Bild gespeichert werden soll. Sie können dazu einen Dateinamen vergeben, unter dem das Bild gespeichert werden soll. Ist eine Datei gleichen Namens bereits vorhanden, werden Sie zusätzlich gefragt, ob Photoshop die vorhandene Datei überschreiben (ersetzen) soll.

Wenn Sie den Karteireiter Optimiert anklicken bzw. angeklickt haben, dann wird kein zusätzliches, sondern nur ein einziges Vorschaubild angezeigt. Es zeigt das Bild in der Vorschau entsprechend der eingestellten Bildqualität.

Unterhalb des Vorschaubildes werden Ihnen nicht nur die Dateidaten genannt, sondern auch die voraussichtliche Ladezeiten des Bildes. Ladezeit ist die Zeitdauer, die vergeht, bis ein im Internet bereitgestelltes Bild in Ihrem Browser vollständig angezeigt wird (Übertragungszeit).

Bilder fuer das Web Internet speichern mit Adobe Photoshop 19.11

Die erste Angabe ist das Bildformat, die zweite Angabe nennt die Größe der Datei, die dritte Angabe schließlich nennt die Ladezeit (im Bildbeispiel hier sind es 534 Sekunden bei einer Downloadgeschwindigkeit von 28,8 Kilobyte per second). 28,8 Kbps ist eine sehr langsame Internetverbindung. Sie können diesen Wert auf schnellere Verbindungen einstellen, indem Sie oben rechts über dem Vorschaubild den eingekreisten Pfeil anklicken.

Bilder fuer das Web Internet speichern mit Adobe Photoshop 19.12

Es öffnet sich dann ein neues Dialog-Feld mit angeklickten Optionen, unterteilt in 3 Bereiche:

Bilder fuer das Web Internet speichern mit Adobe Photoshop 19.13

Die ersten 2 Bereiche sollen an dieser Stelle unerklärt bleiben, der dritte Bereich ist derjenige, wo Sie eine schnellere Internetverbindung einstellen können. Photoshop 6 kennt allerdings nicht die modernen Entwicklungen auf diesem Gebiet und stellt als höchsten Wert lediglich 256,0 Kbps zur Verfügung. Durch Anklicken des entsprechenden Wertes setzen Sie das Häkchen neu. In der Anzeige des Vorschaubildes werden Sie sehen, dass Photoshop die Ladezeit neu berechnet hat.

Bilder fuer das Web Internet speichern mit Adobe Photoshop 19.14

Die Angabe der voraussichtlichen Ladezeit ist lediglich interessant, um abzuschätzen, ob die Größe der Datei auch nach der Optimierung evtl. zu groß ist und deshalb die Ladezeit des Bildes zu groß. Web-Designer werden immer anstreben, möglichst geringe Ladezeiten zu haben, damit sich der Bildaufbau einer Webseite nicht zu lange hinauszögert.

Lassen Sie sich an dieser Stelle nicht verwirren. Für den normalen Hausgebrauch von Photoshop ist die Angabe von Ladezeiten nicht wesentlich wichtig!

Oben links neben dem angezeigten Bild sehen Sie eine Werkzeugleiste. Dabei sind für Sie erst einmal nur das Hand- und das Lupe-Werkzeug wichtig.

Bilder fuer das Web Internet speichern mit Adobe Photoshop 19.15

Bilder fuer das Web Internet speichern mit Adobe Photoshop 19.16

Mit dem Hand-Werkzeug können Sie das angezeigte Bild bewegen – das ist hilfreich, wenn das Bild sehr groß oder in der Ansicht sehr groß gezoomt worden ist, so dass nicht alle Bereiche des Bildes im Vorschaufenster sichtbar sind. Wenn Sie das Hand-Werkzeug ausgewählt haben, um damit das Bild hin und her bewegen zu können, gleichzeitig die Strg-Taste gedrückt halten, verwandelt sich das Hand-Werkzeug in ein Zoom-Werkzeug (= Lupe – das sichtbare Plus-Zeichen in der Lupe zeigt an, dass Sie das Bild beim Klicken mit dem Werkzeug vergrößern werden; halten Sie hingegen statt der Strg-Taste die Alt-Taste gedrückt, zeigt die Lupe ein Minus-Zeichen an, d.h., dass Sie beim Klicken mit dem Werkzeug die Ansicht verkleinern werden. Wählen Sie das Lupe-Werkzeug aus, so ist es mit einem inneren Plus-Zeichen zu sehen, d.h., beim Klicken auf das Bild vergrößern Sie die Ansicht. Wollen Sie die Ansicht (wieder) verkleinern, halten Sie vor dem nächsten Klicken mit dem Werkzeug die Alt-Taste gedrückt, innerhalb der Lupe wird dann ein Minus-Zeichen sichtbar. Klicken Sie auf das Bild, verkleinert sich die Ansicht.

Lassen Sie sich nicht verwirren. Mit dem Hand- bzw. dem Lupe-Werkzeug ändern Sie nichts am Bild, sondern haben damit lediglich Ansichtsoptionen, die Ihnen die Arbeit am Bild erleichtern sollen!

Es gibt noch eine andere Möglichkeit, die Ansicht in der Größe zu bestimmen. Unten links finden Sie dazu ein kleines Feld mit einem kleinen Pfeil.

Bilder fuer das Web Internet speichern mit Adobe Photoshop 19.17

Der Zoom-Bereich reicht von 1600% mit verschiedenen Zwischenschritten bis zu einer Zoomgröße von 12,5%. Beim Aufruf Für Web speichern ist der Zoom-Wert auf 100% voreingestellt.

Die für den Für Web speichern-Arbeitsraumes vorgesehenen Ansichtsoptionen sind Ihnen nun bekannt.