Weboptimiertes Speichern

TP Login

TP Intern

Weboptimiertes Speichern in Photoshop

Ihre Grafik wurde in Photoshop erstellt. Diese Grafik soll nun für das Web optimiert und exportiert werden. Wie geht man vor und was ist zu beachten ...

Autor:: (tw)
Arbeitsmaterial:: download
Schwierigkeit:: Anfänger

1für Web speichern

Hierfür nutzen Sie die Funktion -> Datei -> für Web speichern.

TIPP: merken Sie sich den Shortcut hierfür: [Strg-Alt-Shift-S]
Es öffnet sich ein Fenster mit 4 Reitern: original, optimiert, 2-fach, 4-fach. Schalten Sie auf die 4-fach-Darstellung. Oben links sehen Sie Ihre originale, unkomprimierte Grafik, in den drei anderen Fenstern sehen Sie das gleiche Bild in verschiedenen Kompressionsstufen.

2als .jpg speichern

Je nach Ausgangsbild (Grafik oder Foto) wählen Sie nun unter Einstellungen in dem Pull-Down-Menü zwischen gif und jpg.

- an dieser Stelle arbeiten wir nun mit dem jpg-Format weiter, zu den etwas anderen Einstellungen bei gif kommen wir später -

3Kompression

Durch Mausklick in eines der Vorschaufenster aktivieren Sie dieses und wählen unter "Qualität" eine Kompressionsstufe. Im jpg-Format wird diese in % Qualität angegeben, Sie können also zwischen 0 und 100 einstellen. Dieses geschieht entweder mit dem Schieberegler, der sich unter dem Pfeil rechts neben "Qualität" öffnet (siehe Abb. 3) oder per Tastatureingabe direkt in das Feld.

4Verschiedene Kompressionsstufen

Aktivieren Sie durch Mausklick ein anderes der noch verbliebenen beiden Vorschaufenster, achten Sie darauf, dass ebenfalls jpg gewählt ist und probieren Sie einen anderen %-Wert. Mit dem letzten Fenster genauso verfahren.

Nun haben Sie 4 Bilder in verschiedenen Kompressionen und Qualitäten auf dem Monitor, oben links das Original, die drei anderen mehr oder weniger gut.

5Auswahl

Jetzt müssen Sie sich entscheiden, welche Variante für Sie der beste Kompromiss zwischen Dateigröße und optischer Qualität ist. Die Dateigröße in kb und Ladezeit in Sekunden können Sie unter jedem Vorschaubild ablesen. Um Details zu beurteilen, benutzen Sie die Lupe in der Werkzeugpalette, damit können Sie Ihr aktiviertes Vorschaubild stufenlos zoomen. Eine Vergrößerung ist oft hilfreich bei der Entscheidung zwischen zwei Kompressionsstufen.

Tipp: Zurückzoomen funktioniert mit gedrückter Alt-Taste, Originalgröße wieder herstellen mit einem Doppelklick auf das Lupensymbol

6speichern unter

Haben Sie sich entschieden, aktivieren Sie das entsprechende Vorschaubild und bestätigen oben rechts ok. Der übliche "speichern unter" - Dialog erscheint und Sie speichern Ihr Bild am gewünschten Ort.

Tipp: Wegen der Kompatibilität zur html-Sprache vergeben Sie am besten Dateinamen ohne Leerzeichen. Verwenden Sie stattdessen Unterstriche oder Bindestriche. Bei einigen Betriebssystemen und Browsern könnte es sonst später zu Fehlern kommen.

7Das gleiche mit dem gif-Format

Prinzipiell genauso funktioniert das optimieren und speichern im gif-Format. Einziger Unterschied sind die Kompressionsstufen und Zusatzeinstellungen. Statt wie bei jpg in %-Qualität steuern Sie bei gif die Kompressionsstärke und damit Dateigröße durch die Anzahl der gespeicherten Farben. Möglich sind zwischen 1 und 256 Farben. PHOTOSHOP bietet dazu ein Pull-Down-Menü mit den Stufen 2,4,8,16,32,.... Farben, per Tastatureingabe können Sie aber auch jede beliebige Zahl eingeben.

8Experimentieren

Experimentieren Sie ruhig ein wenig mit den verschiedenen Varianten, so entwickeln Sie am besten ein Gefühl für die optimalen Einstellungen. Die dargestellten Farben werden zu jedem aktiviertem Vorschaubild in einer Farbpalette dargestellt. Auch diese Palette können Sie noch bearbeiten. Scheinen Ihnen z.B. in einer 64er-Farbpalette noch einige Farben überflüssig zu sein, können Sie diese gezielt löschen und dadurch die Dateigröße verringern. Dazu markieren Sie die Farbe und klicken dann auf das Mülleimersymbol.

-Weitere gif-Optionen

9Tranzparenz

Haben Sie Ihre Grafik (z.B. ein Firmen-Logo) in PHOTOSHOP freigestellt bzw. auf transparentem Hintergrund angelegt, klicken Sie das entsprechende Häkchen an. Das Bild wird nun im gif-Format auch freigestellt gespeichert (mit jpg ist dies nicht möglich!). Sie können es dann auf Ihrer Website auf beliebigen Hintergründen einsetzen.

10Dither

Können Sie von 0 - 100% einstellen (siehe Abb.), Zwischentöne werden dadurch gerastert dargestellt. Verzichten Sie nach Möglichkeit darauf! Auf Systemen mit älteren Grafikkarten kann diese Darstellung zu unschönen Ergebnissen führen.

11Grundsätzliches

Bearbeiten und speichern Sie Ihre Ausgangsgrafiken immer in einem verlustfreien Format, z.B. dem PHOTOSHOP eigenen psd. Nur so können Sie bei späteren Korrekturen oder Änderungen wieder von einer guten Qualitätsbasis aus weiterarbeiten. Bilder im jpg-Format verlieren bei jedem Speichern einen Teil der Bild-Informationen!

12Achten Sie auf den Farbmodus!

Eine Monitordarstellung erfolgt immer im RGB-Modus. Vor allem Bilder, die aus der Druckvorstufe stammen, liegen oft im cmyk-Modus vor. Vor Weiterbearbeitung für's Web solche Grafiken in RGB umwandeln. (-> Bild -> Modus -> RGB-Farbe)

Alle Monitore stellen mit 72 dpi Auflösung dar, ein höher aufgelöstest Bild hat bei der Monitordarstellung also keinerlei Qualitätsvorsprünge.

13Ladezeit

Die Gesamtdateigröße einer einzelnen schnellen Webseite sollte bei 50 - max. 80 kb liegen. Diese setzt sich zusammen aus der Größe der html-Datei und der Summe aller auf dieser Seite verwendeten Grafiken. Denken Sie beim optimieren Ihrer Webgrafiken daran!

14Vorarbeit

Schon in der Vorbereitung Ihrer Grafikdaten zur Veröffentlichung im Web können Sie die Weichen für ein optimales Ergebnis legen:

Wenn Sie eine Grafik, z.B. ein Logo, ausschließlich für's Web erstellen - also nicht an vorgegebene Farben gebunden sind (Stichwort CI/CD), arbeiten Sie nach Möglichkeit von Anfang an mit den sogenannten "websicheren" Farben. In PHOTOSHOP geht dies sehr einfach, in dem Sie im Farbwähler die entsprechende Checkbox anklicken. Diese Farbauswahl garantiert auf nahezu allen Betriebssystemen und mit den meisten Grafikkarten eine identische Darstellung der Farben Ihrer Website.

15Zuletzt ein Praxistipp für jpg's

Zur optischen Qualitätsverbesserung hat sich folgendes bewährt:

Sie bearbeiten Ihre Grafik, bis sie Ihnen gefällt. Fertig beschnitten benutzen Sie nun den Filter "Unscharf maskieren" (-> Filter -> Scharfzeichnungsfilter -> Unscharf maskieren) mit folgenden Einstellungen (siehe Abb.):

Stärke: 400 - 450 %

Radius: 0,2 -0,3 Pixel

Schwellenwert: 0

Als Ergebnis erhalten Sie ein Bild, welches Sie bei hoher optischer Qualität relativ stark komprimieren können.

Zu beachten ist hierbei:

Vor dem "Unscharf maskieren" alle sichtbaren Ebenen Ihrer psd-Datei auf eine Ebene reduzieren (sonst wirkt der Filter nur auf die aktive Ebene). Die Ebenenreduzierung und das "Unscharf maskieren" sollten Sie nicht in Ihrer psd-Datei speichern, wenn Sie diese eventuell später noch benötigen.

Grundlagen zu den Vor- und Nachteilen der verschieden Web-Grafikformaten finden Sie hier