Bilder via Photoshop fürs Web optimieren

Transkript

1 Bilder via Photoshop fürs Web optimieren Nachdem das Bild in Photoshop geöffnet wurde, sollte man erst einmal kontrollieren, in welchem Farbmodus es sich befindet. Bilder im Web sollten den Farbmodus RGB nutzen. Am schnellsten sieht man den eingestellten Modus oben in der Titelzeile des Bildes. Die zweite Möglichkeit befindet sich unter Image/Mode hier ist ein Haken vor dem eingestellten Farbmodus. In diesem Menü kann man den eingestellten Farbmodus auch verändern, sollte der CMYK-Modus o.ä. eingestellt sein. Als nächstes schneidet man das Bild auf die passende Größe (im Beispiel 1200x800 px) zu. 1. Schneidewerkzeug auswählen durch klicken oder den Shortcut c (Windows und Mac). 2. Schneidewerkzeug auf die gewünschte Größe anpassen (hier: Höhe: 1200 px, Breite: 800 px). 3. Auflösung einstellen (diese sollte für Bilder im Web immer 72 pixels/inch (dpi) betragen). Tipp: Sollen die Bilder auch für Retina-Displays optimiert werden, so müssen sie doppelt so groß angelegt werden. Für dieses Beispiel also 2400x1600 px bei 72 dpi. 1. Nun mit dem Mauszeiger die gewünschte Fläche (Ausschnitt) aufziehen. 2. Wenn der Ausschnitt in Ordnung ist, bestätigen. Seite 1

2 Nun kann das Bild noch etwas bearbeitet werden. Über den Shortcut cmd + L (Mac) oder strg + L (Windows) wird die Tonwertkorrektur aufgerufen. 1. Beim Klick auf Auto passt Photoshop bei Bedarf den Tonwert automatisch etwas an. 2. War das Ergebnis von Punkt 1 nicht zufriedenstellend, so kann über die beiden markierten Felder der Tonwert manuell angepasst werden. Tipp: Macht man den Haken bei Preview weg, so sieht man das Bild wie es im Original ausgesehen hat, macht man den Haken wieder rein sieht man die Veränderung. Ist der Tonwert in Ordnung so kann man anschliessend noch den Farbton und die Sättigung bei Bedarf etwas anpassen. Das Menü ruft man über den Shortcut cmd + u (Mac) oder strg + u (Windows) auf. Über Hue kann der Farbton angepasst werden. Über Saturation kann man die Sättigung des Bildes anpassen und über Lightness die Belichtung des Bildes. ( Lightness ist jedoch meistens eine schlechte Wahl. Nehmen Sie statt dessen den mittleren Pfeil/Schieber im Feld Tonwertkorrektur und ziehen Sie ihn nach links oder rechts.) Sieht das Bild nun gut aus, so muss es für das Web optimiert gespeichert werden. Dies geht über den Punkt File/ Save for Web & Devices auf Deutsch Datei/Für Web & Geräte speichern. Seite 2

3 Ein guter Richtwert für die meisten Bilder im Web ist die Einstellung JPEG mit der Qualität 60, dies kann jedoch von Bild zu Bild variieren. In den beiden Fenstern des Dialoges sieht man nun links das Originalbild und rechts das optimierte Bild. Ebenfalls sieht man die unterschiedlichen Dateigrößen der Bilder. Im Beispiel wurde die Qualität des JPEG auf 40 herunter gesetzt da ein Unterschied der Bildqualität mit dem Auge nicht erkennbar war und die Dateigröße dadurch nochmal etwas reduziert wurde. Ist alles wie gewünscht, einfach unten auf den Save-Button klicken. Nun kann der Speicherort und der Dateiname gewählt werden. Dann ist die gespeicherte Datei fürs Web optimiert und kann auf den Server oder in das CMS hochgeladen werden. Tipp: Am besten immer aussagekräftige Dateinamen verwenden, da die Wörter im Dateinamen auch als Keywords für die Bildersuche von Google dienen. Ausserdem dürfen die Dateinamen keine Sonderzeichen, Umlaute oder Leerzeichen enthalten und sollten immer klein geschrieben werden. Seite 3

4 JPEG vs PNG Auf dieser Seite sieht man, dass sich für Fotos im Web am Besten das JPEG-Format eignet. JPEG: Hier haben wir bei kleiner Dateigröße eine sehr gute Bildqualität. JPEG Qualität 60 Dateigröße: 58 kb PNG8 mit 256 Farben: Man sieht trotz höchster Einstellung, dass Verläufe nicht richtig dargestellt werden (sehr gut am Himmel zu sehen oder dem Rücken der Kuh). Keine gute Bildqualität, aber trotzdem eine größere Dateigröße als JPEG. PNG8 256 Farben Dateigröße: 88 kb PNG24: Komprimiert Bilder verlustfrei, d.h. in Original Qualität. Allerdings ergibt sich hieraus auch eine z.t. sehr große Dateigröße. Große Bilddateien sind auf Grund ihrer langen Ladezeiten nicht fürs Web geeignet. PNG24 Dateigröße: 317 kb Seite 4

5 Auf dieser Seite sieht man, dass sich für Grafiken wie Logos etc. am Besten das PNG-Format eignet. Da dieses Logo keine aufwändigen Verläufe oder viele Farben beinhaltet, sollte man sich für das PNG8-Format entscheiden. JPEG: Bei einer Qualität von 25 hat es eine sehr schlechte Auflösung, die Ränder sind unscharf. Die Datei ist größer als bei PNG8. Man sieht deutlich die Spuren der JPEG-Kompression, die sog. Kompressionsfragmente. JPEG Qualität 25 Dateigröße: 9,5 kb PNG8: Für diese Grafik ist das die beste Einstellung. Man sieht, dass das Logo trotz geringer Dateigröße sehr gut dargestellt wird. Das PNG 8 kann bis zu 256 Farben darstellen. In diesem Beispiel haben 32 Farben zur fürs Auge perfekten Darstellung gereicht. PNG8 32 Farben Dateigröße: 7,7 kb PNG24: Sieht vom Ergebnis gleich aus wie das PNG8 mit nur 32 Farben, hat aber eine deutlich größere Datei. Deshalb wäre hier auf jeden Fall das PNG8 mit 32 Farben vorzuziehen. PNG24 Dateigröße: 43,2 kb Seite 5