Archiv für das Tag 'fürs 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.

Dateigröße ändern

28. März 2008

Dateigröße ändern / Bildqualität bestimmen und Festlegung des Speicherformats

Wenn Sie sich den Für Web speichern-Arbeitsraum ansehen, sehen Sie rechts neben dem Vorschaubereich ein Feld mit vielen Optionen:

Dateigroesse digitaler Fotos aendern mit Adobe Photoshop 20.0

Dateigroesse digitaler Fotos aendern mit Adobe Photoshop 20.1

Mit OK leiten Sie den Speichervorgang ein.

Mit Abbrechen kehren Sie zum Arbeitsraum von Photoshop zurück, ohne Änderungen am Bild vorgenommen zu haben. Sie brechen den Vorgang Für Web speichern ab.

Ausgabe-Einstellungen sind für Sie erst einmal nicht wichtig (diese Einstellungen regeln allgemeine Einstellungen, die Photoshop bei der Generierung von Webseiten berücksichtigen soll.

Wichtig für Sie ist die Optionsgruppe Einstellungen:

Dateigroesse digitaler Fotos aendern mit Adobe Photoshop 20.2

Im obersten Feld können Sie zwischen GIF, JPG (JPEG) und PNG verschiedene Formattypen auswählen.

Dateigroesse digitaler Fotos aendern mit Adobe Photoshop 20.3

Sie können dieses Feld vernachlässigen, da Sie die gleichen Einstellungen auch einfacher vornehmen können.

Dateigroesse digitaler Fotos aendern mit Adobe Photoshop 20.4

Wichtig für Sie ist das Feld, mit dem Sie das Format auswählen. Die Auswahl des Formats ist wichtig, weil dadurch auch die Komprimierungsmethode festgelegt wird. Um die Komprimierungsmethode müssen Sie sich keine Gedanken machen, das erledigt Photoshop für Sie. Sie müssen an dieser Stelle nur entscheiden, welches Format gewählt werden soll (GIFJPEGPNG-8/PNG-24). Das PNG-­Format können Sie an dieser Stelle vernachlässigen. Sie müssen also grundsätzlich nur zwischen GIF und JPEG entscheiden.

Wie weiter oben im Tutorial schon ausgeführt, empfiehlt sich für die Optimierung das JPEG-Format (JPG). Da Sie zum jetzigen Zeitpunkt des Tutorials das GIF-Format nicht brauchen, müssen Sie eigentlich nur sicherstellen, dass in diesem Feld das Format JPEG eingestellt ist.

Neben dem Format-Feld sehen sie ein kleines gesetztes Häkchen bei Optimiert. Lassen Sie dieses Häkchen gesetzt!

Unter dem Optimiert-Häkchen sehen Sie ein Auswahlfeld mit dem Feldnamen Qualität. Voreingestellt ist der Wert 100 oder der letzte von Photoshop benutzte Wert. Dieser eingestellte Wert ist der Wert für die Bildqualität. Wenn Sie neben dem Auswahlfeld auf den kleinen Pfeil klicken, öffnet sich ein kleiner Schieberegler.

Dateigroesse digitaler Fotos aendern mit Adobe Photoshop 20.5

Mit diesem Schieberegler können Sie jeden beliebigen Wert einstellen, der zwischen 0 und einschließlich 100 liegt. Wenn Sie den Schieberegler bewegen, werden Sie bemerken, dass sich dadurch auch die Vorschaubilder im Vorschaufeld verändern.

Sie können den Wert für die Bildqualität auch ohne Schieberegler verändern, indem Sie in das Feld mit der Maus klicken, am besten dabei die voreingestellte Zahl markieren und dann per Tastatureingabe den Wert einsetzen, den Sie anstreben. Sollten Sie dabei versehentlich einen Wert eingeben, der größer als 100 ist, erhalten Sie die Aufforderung, einen Wert zwischen 0 und 100 einzugeben. Dezimalzahlen werden von Photoshop automatisch auf den nächst höheren ganzen Wert korrigiert. Die Eingabe schließen Sie ab, indem Sie mit der Maus außerhalb des Eingabefeldes irgendwohin klicken oder durch die Eingabe-Taste (Enter-Taste).

Dass die Änderungen von Photoshop übernommen werden, sehen Sie nicht nur daran, dass sich das Vorschaubild verändert, sondern auch an dem kleinen Fortschrittsbalken, der nebendem Zoomfeld kurz zu sehen ist.

Bei Bildern mit guter oder sehr guter Bildqualität können Sie in der Regel den Wert der Bildqualität auf 60% setzen, ohne dass dadurch sichtbare Qualitätsverluste auftreten.

Bei Werten unterhalb von 60% (gilt nicht für Bilder mit schlechter Bildqualität) sind die Veränderungen oft kaum wahrnehmbar. Sie können die Werte schrittweise immer tiefer (kleiner) stellen, bis Sie ein Vorschaubild sehen, das Ihnen in seiner Darstellungsqualität nicht mehr gefällt (zu unscharf/zu verwaschen/zu pixelig etc.). Sie haben damit die unterste Grenze der Optimierung unterschritten. Korrigieren Sie es einfach wieder, indem Sie den Wert leicht erhöhen (schrittweise), bis Ihnen die Ansicht wieder zusagt. Damit ist der Optimierungsvorgang abgeschlossen und Sie können den OK-Button drücken, um das Bild zu speichern.

Bedenken Sie, dass Sie bei einem optimierten Bild die originären Bilddaten verändern – speichern Sie das optimierte Bild deshalb stets unter einem anderen Namen ab, damit das Original erhalten bleibt (Empfehlung)!

Sollten Sie sich an die Empfehlung gehalten haben, wie sie zu Beginn des Tutorials zu lesen war, ist diese Vorsichtsmaßnahme nicht so wichtig, da sie ja mit einer Kopie der originären Datei arbeiten. Haben Sie jedoch an dieser Arbeitsdatei viele Änderungen vorgenommen und diese vor Aufrufen des Für Web speichern-Arbeitsraumes noch nicht gespeichert, so sollten Sie sicherheitshalber die optimierte Datei unter einem anderen Namen speichern, damit Sie sich die vielen Bearbeitungsschritte erhalten.

Sollten Sie beim Vorgang der Optimierung gleichzeitig auch die Bildgröße ändern wollen, so müssen Sie deshalb nicht erst wieder in den Arbeitsraum von Photoshop zurückkehren, sondern können dies im Arbeitsraum Für Web speichern tun.

Dateigroesse digitaler Fotos aendern mit Adobe Photoshop 20.6 Dateigroesse digitaler Fotos aendern mit Adobe Photoshop 20.7

Nachteil:
Photoshop zeigt Ihnen in der Vorschau dazu keine Veränderung an und die Größenangabe ist in Pixel.

Das Häkchen vor Proportionen erhalten sollte immer gesetzt und die Qualität dabei auf Glatt (Bikubisch) eingestellt sein. Haben Sie die Optimierung soweit fertig, dass Sie abspeichern wollen, klicken Sie den OK-Button. Es erscheint dann ein Dialog:

Dateigroesse digitaler Fotos aendern mit Adobe Photoshop 20.8

Im Feld Dateiname ist der Name der Datei so eingefügt, wie die Datei im geöffneten Photoshop Arbeitsraum heißt. Drücken Sie auf Speichern, wird die bereits vorhandene Datei gleichen Namens überschrieben. Es wird empfohlen,deshalb einen anderen Dateinamen zu wählen.

Sollten Sie die vorhandene Datei gleichen Namens überschreiben wollen, werden Sie von Photoshop nach Drücken des Speichern-Buttons noch einmal ausdrücklich gefragt, ob sie die vorhandene Datei ersetzen möchten.