[Photoshop] Fürs Web Speichern (Dateigröße reduzieren)

elf4 · 6. Juni 2007

Fürs Web Speichern (Dateigröße reduzieren)

Vorwort:

Ich habe mich bereits im Vorfeld mit Finq über seine Anleitung unterhalten und bitte die Moderatoren diesem Beitrag mit dem von Finq ggf. zusammenzufügen.

Beschreibung:

In dieser Anleitung möchte ich euch erklären wie man die Dateigröße von Bildern reduzieren kann. Hingegen der Aussage von Finq das dies Verlustfrei geht merke ich an das jeder Reduzierung der Dateiengröße im Jpeg, und Gif Format verlustbehaftet ist. Das PNG Format ist für eine Reduzierung der Dateiengröße ungeeignet und wird deshalb ausgelassen.

Vorbereitung

Als Ausgangspunkt dient uns folgendes Bild:

Bild

Format: 500 x 382 Pixel, 72dpi, RGB, Jpeg, 198kb

Vor dem erstellen von Bildern für das Internet, sollte man darauf achten das man die Bildauflösung auf 72dpi runtergerechnet hat. Dies entspricht der Bildauflösung für Monitoren. Um zu überprüfen wie hoch die Bildauflösung des Bild ist geht man wie folgt vor:

Bild

Wenn im folgenden Fenster eine Auflösung von 72dpi angezeigt wird könnt ihr das Fenster wieder schließen. Ist dem nicht so dann sollte ihr im Feld Auflösung 72dpi eintragen und das Bild für die Monitoreinstellung runterrechnen.

Bild

Nachdem runterrechnen empfiehlt es sich noch einmal das Bild scharf zu zeichnen. Dies bedarf ein klick auf den Filter:

Bild

Speicherformat Gif:

max 256 Farben
speichert die Farben in eine Farbtabelle
ideal für Grafiken, Schriften und transparente Hintergründe

Speicherformat Jpeg:

max 16,7 Mio. Farben
speichert die Farben als RGB Werte
ideal für fotorealistischen Abbildung

Anleitung Fürs Web Speichern (Dateigröße reduzieren)

Um Bilder für das Web zu speichern gehen wir wie folgt vor:

Bild

Einstellungen für das Jpeg Format

Im Feld Qualität lässt sich per Schieberegler die Komprimierung des Bild stufenlos einstellen. Bei einer Qualität von 100 wird die Datei nur in das Jpeg Format umgewandelt ohne Farbanteile und Helligkeitswerte zu reduzieren. Dies geschieht dennoch mit Qualitätsverlust durch die Umwandlung von RGB in YUV Format.

Je mehr man den Schieberegler nach links schiebt desto mehr wird das Bild zusätzlich komprimiert. Dadurch wird die Dateigröße kleiner und die Qualität des Bild nimmt ab. Dies äußert sich zum Beispiel durch Reduzierung von Farbanteilen und Helligkeitswerte des Bildes, die aber bis zu einen gewissen Punkt kaum ins menschliche Auge fallen.

Das Feld Mehrere Durchgänge bezieht sich auf den Ladevorgang des Bildes im Browser. Manche Browser erlauben es Bilder in mehreren Durchgängen zu laden und so nach und nach die Details aufzubauen. Dies ist sehr arbeitsspeicherlastig und kann deshalb deaktiviert bleiben.

Ebenso das Feld ICC-Profil. Das aktivieren des Feldes bewirkt nur das dass aktuelle Farbprofil eingebettet wodurch die Datei größer wird. Das ICC-Profil spielt im Internet keine Rolle da die meisten Monitoren das RGB Profil benutzen.

Im Feld Weichzeichnen kann man Bildeffekte darunter zählen Verlaufe aber auch scharfe Konturen durch Weichzeichnung reduzieren. Davon würde ich aber abraten da dadurch sehr viele Details verloren gehen. Diese Option macht nur dann Sinn wenn es keine Rolle Spielt wie scharf das Bild sein soll. Falls man dieses Option wählt sollte man einen geringen Wert zwischen 0.1-0.25 wählen.

Da das Jpeg Format keine transparenten Bereiche ausgeben und dieses beim Speichern verloren gingen gibt es die Option Bassis. Hier kann man eine Farbe auswählen mit der transparente Bereiche gefüllt werden. Dazu empfiehlt sich eine websichere Farbe, Weiß oder Schwarz.

Haben wir keine transparenten Bereiche wählen wir Ohne aus.

Über die Option Optimiert wird die Kompatibilität reduziert und das jpeg in das Standard Jpeg-Format komprimiert dies reduziert weiterhin die Dateigröße und kann aktiviert sein.

Für ein gutes Verhältnis zwischen Komprimierung und Qualität benutze ich gern diese Einstellung.

Bild

Manchmal ist es aber wichtig die Dateigröße auf ein niedrigeres Verhältnis zu reduzieren da empfiehlt es sich diese knifflige Aufgabe Photoshop zu überlassen. Dies ist über einen klick auf dem Pfeil rechts neben Voreinstellung möglich.

Bild

Im Menüpunkt auf Dateigröße optimieren kann man Photoshop beauftragen selbstständig Einstellungen vorzunehen um die Datei auf die gewünschte Dateigröße zu komprimieren.

Bild

Einstellungen für das Gif Format

Dadurch das das Gif Format nur auf 256 Farben beschränkt ist spielt es beim Gif Format eine entscheidende Rolle für welche Farbtabelle man sich entscheidet. Fällt die Entscheidung auf Websichere Farben wird das Bild mit Hilfe der 217 websicheren Farben gespeichert.

Die Option Adaptiv verwendet die häufigsten Farben des Bildes. Wollen wir etwa ein Landschaftsbild in indizierte Farben verwandeln dann haben wir viele verschiedene Blau und Grüntöne aber wenig Rot im Bild. Entsprechend wird eine blau und grün betonte Tabelle angelegt. Damit kommt das Ergebnis der Echtfarbdatei viel näher als eine Konvertierung mit Web-Palette denn dort werden ja auf Kosten der Blau und Grüntöne überflüssige Rot und Gelbschattierungen parat gehalten.

Perzeptiv erzeugt ebenfalls eine Farbtabelle die sich an den Schwerpunkten im Bild orientiert. Betont werden Farben die vom menschlichen Auge besser wahrgenommen werden.

Selektiv funktioniert ähnlich wie Perzeptiv doch mit breiterem Farbumfang und besserer Erhaltung der Webfarben. Deshalb benutze ich für meine Gif's hauptsächlich Selektive Farbpaletten.

Über die Option Lossy lässt sich stuffenlos der zulässige Datenverlust steuern wobei ein hoher Wert hier zu hohen Qualitätsverlust führt.

Da das Gif nur max 256 Farben speichern kann müssen Farben reduziert werden. Um sehr harte Farbübergänge zum Beispiel bei Verläufen abzumildern gibt es die Dithering-Option. Das Dithering schafft optische weichere Übergänge in Bildbreichen mit großen Farbunterschieden. Als Dithering Option stehen folgende Methoden zur Auswahl:

Diffusion die eine Zufallsverteilung simuliert (verwende ich am meisten)

Muster dithert nach einen muster

Störung reduziert Muster entlang von Kanten und Konturen

Bei Dithering-Stärke kann man einstellen wieviel Farben gedithert werden. Die Erfahrung zeigt das es vom Bild zu Bild variert. Ich gehe dazu wie folgt vor: Als erstes schiebe ich den Regler kann nach links und merke mir den Wert. Dann schiebe ich den Regler soweit nach Rechts bis die Dateigröße wesentlich ändert. Bei diesem bild wähle ich eine Dithering-Stärke von 60.

Die Option Interlaced ist mit der Option Mehrere Durchgänge vergleichbar und bleibt bei mir deaktiviert.

Im Feld Ausrichtung kann man ähnliche Farben ausschießen was aber nicht zu empfehlen ist.

Weißt das Bild transparente Bereiche auf so kann durch die Option Tansparenz diese im Gif übernommen werden.

Basis verhält sich genauso wie bei Jpeg.

Meine Empfehlung für diese Bild sieht dann so aus:

Bild

Bilder im direkten Vergleich:

Ausgangsbilde:
Format: 500 x 382 Pixel, 72dpi, RGB, Jpeg, 198kb
Bild

Jpeg Bild
Format: 500 x 382 Pixel, 72dpi, RGB, Jpeg, 53,6kb
Bild

Gif Bild
Format: 500 x 382 Pixel, 72dpi, RGB, Jpeg, 110kb
Bild

Gruß elf4

Anzeige

Nützliche Suchen

[Photoshop] Fürs Web Speichern (Dateigröße reduzieren)

Videos zum Themenbereich