Webdesign-Tutorial: Bilder-Optimierung für das WWW GIF / JPG

Das passende Grafikformat Der Hauptgrund für zu langsame Homepages ist häufig die Wahl des falschen Grafikformats. Es gibt im Webdesign zwei Haupt-Grafikformate: JPG (oder JPEG) und GIF. Jedes Bild einer Homepage sollte im passenden Format aufbereitet werden.

Das GIF-Format GIFs werden für Grafiken bis maximal 256 Farben verwendet. Große einheitliche Farbflächen sind ein Indikator für das Verwenden von GIFs. Reduzieren Sie die Farbzahl so weit wie möglich. Sie variiert je nach Grafik normalerweise zwischen 4 und 64 Farben. Die Wahl der passenden Farbzahl ist das wichtigste Kriterium für möglichst geringe Dateigrößen. Die meisten GIFs kommen ohne das die resultierende Datei vergrößernde Dithering aus. Experimentieren Sie auch mit der Lossy-Einstellung. Dabei können Artefakte auftreten, Daten werden unwiderruflich vernichtet. Trotzdem kann die Lossy-Einstellung durchaus sinnvoll genutzt werde, wenn sehr große GIFs mit vielen Farben verwendet werden.

Das Format JPG JPGs verwendet man im Normalfall für Fotos und sehr farbige Grafiken. Ein guter Durchschnittswert für das Speichern von gut für das Web optimierten JPG-Fotos ist eine Qualität von 40%. Beachten Sie, dass JPG kein verlustfreies Kompressionsverfahren ist. Ihre Bilder werden von Speicherung zu Speicherung schlechter. Eine Möglichkeit, die Dateigröße von JPG-Bildern elegant zu reduzieren ist der Einsatz von Unschärfe. Verwenden Sie die Unschärfe in Ihrem Grafikbearbeitungsprogramm entweder bei der Ausgabe des JPGs oder als Filter. Mit einem ringförmigen Unschärfefilter lassen sich bestimmte Bereiche gezielt verunschärfen!

Beispiele Bilderoptimierung für das www mit JPG und GIF:

Webdesign-Lehrmaterial Zu diesem Tutorial gibt es weiterführendes Lehrmaterial im ff-webdesign-Download-Bereich. Dort finden Sie jedes Tutorial als Acrobat Reader .pdf- Datei zum Offline-Studium oder zur Verwendung im Rahmen von Seminaren. Außerdem bieten wir dort zu jeder Webdesign-Anleitung umfangreiches Studienmaterial wie z.B. komplette Webprojekte, HTML-Seiten, CSS-Dateien, Templates, Bilder, oder Photoshop- Aktionen - und Homepagelayouts.

Hat Ihnen diese Webdesign-Anleitung weitergeholfen? Wir hoffen, Ihnen mit diesem Workshop bei den Arbeiten rund um Ihre eigene Homepage weitergeholfen zu haben. Sollten Sie noch Fragen oder Anregungen zu diesem Webdesigner-Tutorial haben, schreiben Sie uns! Falls Sie trotz dem Tutorial mit Ihrer Homepage nicht mehr weiterkommen sollten, freuen wir uns natürlich über jeden Webdesign-Auftrag.