Kontakt aufnehmen

Photoshop: Bilder für das WWW

Sind Bilder für das Internet vorgesehen, gelten andere Kriterien als für Bilder, die drucktechnisch veröffentlicht werden.

Allgemeines

Primär zu beachten bei der Bearbeitung von Internet-Bildern ist der Speicherbedarf sowie die Qualität der Bildanzeige, die von Auflösung, Größe des Bildes, der Farbtiefe und vom Dateiformat abhängig sind. Beides, Speicherbedarf sowie Bildqualität, sollten aufeinander abgestimmt sein.
Die Auflösung der Bilder sollte nach Abschluss der Bearbeitung 96 dpi betragen.
Web-Browser unterstützen die Dateiformate GIF, JPG sowie PNG (letztes wird jedoch von älteren Browsern nicht unterstützt). Diese Formate komprimieren automatisch die Dateigröße und reduzieren damit den Speicherbedarf. Beim Speichern von Dateien für das Internet sollten diese möglichst klein (Ladezeit) bei noch annehmbarer Qualität gehalten werden.
In Photoshop gibt es mehrere Möglichkeiten, abhängig vom Bildformat, den Speicherbedarf eines Bildes zu verringern und gleichzeitig die Bildqualität zu erhöhen.

Speichermöglichkeiten

Photoshop bietet zwei Möglichkeiten zum Speichern von Bildern.
Einfaches Speichern eines Bildes über "Datei - Speichern unter" mit Eingabe des entsprechenden Dateinamens ohne Leerzeichen und Auswahl des Dateiformates. Sollte das Bild nach abgeschlossener Bearbeitung noch nicht im PSD-Format vorliegen, so kann dies hier ebenfalls geschehen. Anschließend wird das Bild in einem browserverständlichen Format abgespeichert.
Abhängig vom Format werden Informationen zum Hintergrund, zur Farbpalette, zur Transparenz
abgefragt.
Da JPEG als eines der Formate für das Internet die Farbtiefe sowie Helligkeitsunterschiede eines Bildes beibehält, ist dieses Format für Bilder mit vielen Farben und Verläufen ideal. Dieses Format unterstützt eine Farbtiefe von 24 Bit, kann also Millionen von Farben darstellen. Im erscheinenden Dialogfeld wird durch Einstellung der Kompressionsrate über die Dateigröße entschieden. Bei allzu groß gewählter Kompressionsrate allerdings gibt es durch Datenwegfall einen mehr oder minder spürbaren Qualitätsverlust. Das JPEG-Format unterstützt keine Transparenzen.
Das GIF-Format mit einer Farbtiefe von 8 Bit (bis zu 256 Farben) eignet sich für einfache Grafiken, Logos, Schaltflächen und Textabbildungen; wichtig: Hintergrundtransparenz sowie Animation werden durch das GIF-Format unterstützt. Im erscheinenden Dialogfeld "Indizierte Farben" ("Datei - Speichern unter") können sowohl die Farbpalette definiert sowie verschiedene andere Einstellungen vorgenommen werden.
Weitaus mehr Funktionen für das Speichern von Dateien für das Web stehen über das Menü "Datei - Für Web speichern " zur Verfügung. Über dieses Dialogfenster können mit Klick auf das jeweilige Register entweder das Original-Bild, die optimierte Vorschau oder aber Ausschnitte beider Bilder angezeigt werden. Das Register "4-fach" gar bietet neben dem Original 3 unterschiedliche Vorschaubilder an.
Durch Klick in ein Vorschaubild können auf der rechten Seite des Dialogfeldes mittels Schaltflächen und verschiedener Eingabefelder diverse Einstellungen vorgenommen werden. Diese Einstellungen beziehen sich auf hauptsächlich auf Dateiformat sowie Komprimierungsfaktor (JPEG) und Anzahl der Farben (GIF). Änderungen werden sofort wirksam, ein visueller Vergleich aller Vorschaubilder und somit ein Abwägen zwischen Dateigröße und Bildqualität der verschiedenen Grafikformate mit unterschiedlichen Einstellungen ist somit möglich. Jedes Vorschaubild wird mit Dateigröße sowie Ladezeit angezeigt. Über das Listenfeld "Einstellungen" werden vordefinierte Optimierungseinstellungen für die einzelnen Formate angeboten. Weitaus differenzierter können Einstellungen über die anderen Eingabefelder getätigt werden.

Speichereinstellungen für das GIF-Format

Sollte dem GIF-Format aufgrund der besseren Grafikqualität und geringerer Dateigröße der Vorzug gegeben werden, so bewirkt die Auswahl "Perzeptiv" aus dem mittleren linken Kombifeld unterhalb der Formatfestlegung eine Farberzeugung, die der Wahrnehmung des menschlichen Auges weitestgehend entspricht. ("Selektiv" beinhaltet mehr Web-Farben, "Adaptiv" bezieht sich auf die am meisten im Bild vorkommenden Farben, "Windows" sowie "Mac Os" benutzen eigene Farbpaletten)
Unterhalb des GIF-Dialoges wird über die Pixelgröße des Bildes informiert bzw. kann diese angepasst werden, sollte es diesbezüglich Vorgaben einer HTML-Seite geben. Zusätzlich wird eine Farbpalette der verwendeten Farben angezeigt.
Ein Herabsetzen der Farbanzahl bewirkt eventuell eine deutliche Reduzierung des Speicherbedarfes. Wird dabei allerdings die Bildqualität zu sehr beeinträchtigt, kann man allenfalls versuchen, einige wichtige Farben im Bild auszuwählen und in der Farbpalette - quasi im Farbspiegel des Bildes - zu fixieren, damit diese bei reduzierter Farbanzahl dem Bild erhalten bleiben. Dazu diese Farben mittels Pipette im optimierten Vorschaubild aufnehmen und in der Farbpalette durch Klicken auf das Symbol "Farbe fixieren" an der Unterseite der Farbpalette vor Entfernung durch Farbreduzierung schützen. So fixierte Farben sind an einem kleinem Rechteck im Farbfeld zu erkennen. Ein neuerlicher Klick auf das Symbol "Farbe fixieren" entfernt die Fixierung der Farbe in der Farbpalette.
Dithering wird angewandt, wenn ein Web-Browser mit begrenzter Farbwiedergabe ein Bild mit größerer Farbtiefe darstellt, fehlende Farben werden dabei simuliert. Besteht das Bild aus einigen wenigen einheitlichen Farbflächen ohne Verlauf, ist eventuell die Einstellung "kein Dither" angebracht. Durch Einsatz websicherer Farben über die jeweiligen Farbwerkzeuge kann die Dithering-Stärke beeinflusst werden. Sollen etwaige transparente Bereiche übernommen werden, so geschieht dies durch Aktivieren des Feldes "Transparenz".

Einstellungsfeld für das Gif-Format
Darstellung: Einstellungsfeld für das Gif-Format

Speichereinstellungen für das JPEG-Format

Alternativ zu den vordefinierten Optimierungseinstellungen (Listenfeld "Einstellungen") besteht die Möglichkeit einer individuellen Einstellung. Nach Aktivieren eines Vorschaubildes und Auswahl des JPEG-Formates kann über das Eingabefeld "Qualität" der Wert für die Komprimierung individuell angegeben werden. JPEG unterstützt verlustreiche Komprimierung; ein hoher Wert unterdrückt zu viele Bildinformationen bei andererseits relativ kleiner Dateigröße. Ein Abwägen zwischen Dateigröße und Bildqualität ist jederzeit möglich. Die Bildauflösung wird durch die Komprimierung nicht reduziert.
Mit Aktivieren des Kontrollfeldes "mehrere Durchgänge" wird das Bild in mehreren Durchgängen heruntergeladen, wobei die Qualität des Bildes mit jedem Durchgang ansteigt.

Einstellungsfeld für das JPEG-Format
Darstellung: Einstellungsfeld für das JPEG-Format

Auch unterhalb des JPEG-Dialoges wird über die Pixelgröße des Bildes informiert; eine Eingabe neuer Maße bezüglich der Einbindung in eine vorhandene HTML-Seite ist möglich.

Über das Pfeilsymbol neben dem Dialogfeld "Einstellungen" gibt es die Möglichkeit, das Bild auf eine fest definierte Dateigröße zu reduzieren, wahlweise über die festgelegten Einstellungen oder aber über einen von Photoshop benutzten Automatismus.
Eventuell ist ein Vergrößern des Bildes über das Zoom-Menü an der linken unteren Seite des Dialogfeldes hilfreich. Durch Klicken in das gezoomte Bild mit gedrückter linker Maustaste und Handwerkzeug kann der Bildausschnitt beliebig bewegt und so spezielle Problemzonen des Bildes in den Focus geschoben werden. Eine Kontrolle des Bildes im Internet Explorer ist über die Schaltfläche am rechten unteren Rand des Dialogfeldes möglich. Alternativ kann über daneben liegenden Pfeil der jeweils installierte Browser angegeben werden.
Wenn alle Einstellungen zum Optimieren der Datei getroffen wurden - gerade auch beim Komprimierungsfaktor - können diese mit OK bestätigt werden. Im folgenden Dialogfeld "Optimiert - Version speichern unter" wird nach Eingabe des Speicherortes sowie des Dateinamens - ohne Leerzeichen - die Datei gesichert und das Fenster geschlossen.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Verbessern der Bildqualität

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern