Es ist schon fast eine Wissenschaft, wie man Bilder fürs Web aufbereiten soll. Auch wenn man denkt, dass heutzutage die Bandbreite keine grösseren Probleme mehr darstellen sollte, so stimmt das nicht ganz. Insbesondere auch dadurch, dass mobile Geräte wie iPhone und Konsorte auf dem Vormarsch sind spielt die Bandbreite wieder eine entscheidende Rolle. Auch ist die Dauer, wie lange eine Seite zum Laden braucht, ein bedeutender Faktor, um Besucher nicht zu verlieren.
Es gibt schon einige Möglichkeiten, das Laden der Bilder jenseits von Photoshop und Co. zu optimieren. Durch die Verwendung von Javascript können Medien im Hintergrund vorgeladen werden oder der Client (Webbrowser) wird erst veranlasst, Bilder zu laden, wenn diese auch wirklich im Blickfeld des Benutzers sind (sog. Lazy Load).
In diesem Post möchte ich jedoch nicht auf diese Techniken eingehen – vielleicht in einer Fortsetzung – sondern euch eine Möglichkeit vorstellen, wie man auf dem Mac sehr einfach Bildoptimierungen durchführen kann.
Erster Schritt ist es, jedes Bild einzeln zu optimieren. Es führt kein Weg daran vorbei, jedes Bild genau zu kontrollieren und beim Export abzuwägen, wie weit ein Bild komprimiert werden muss, um trotzdem noch genügend gut dargestellt zu werden. Auch das Bildformat spielt eine entscheidende Rolle. PNG-24 führt beispielsweise zu relativ hohen Dateigrössen. Dafür bietet dieses Format wohl in der Regel die beste Qualität und es können auch Alpha-Transparenzen (also z.B. “Halb-Transparenzen) verwendet werden. Für Fotografien und Bilder mit vielen unterschiedlichen Farbtönungen und -mischungen ist JPG erste Wahl. Die Kompressionsrate muss hier manuell überprüft werden, um das beste Ergebnis zu erzielen (womit ich das optimale Verhältnis von Bildqualität und Dokumentengrösse meine). Das GIF-Format soll dann verwendet werden, wenn nur eine bestimmte Anzahl an Farben im Bild vorkommen, also zum Beispiel bei Logos, Schriften, …
ImageOptim wählt für jedes Bild das beste Komprimierungs-Tool. Das Programm ist enorm einfach in der Anwendung: man kann einzelne Bilder oder gar ganze Ordner mit Bildern einfach darauf ziehen und das Programm erledigt den Rest. In den Voreinstellungen kann man noch angeben, ob man die Dateien überschreiben will, oder ob zuerst eine Sicherungskopie der Bilder erstellt werden sollte.
Im Schnitt fabriziert dieses Utility um die 25% kleinere Dateigrössen. Natürlich sollte man anschliessend die Bilder noch begutachten, aber in der Regel sind die erstellten Bilder erfreulich gut.
Ich habe es mir jedenfalls angewöhnt, alle Bilder vor dem Upload zuerst durch ImageOptim laufen zu lassen.
Und hier gibt es das Tool: http://imageoptim.pornel.net/
Interessanter Beitrag. Würde gern mehr Posts zu dem Thema lesen. Freu mich auf die naechsten Posts.
hallo,
ist es denn nicht so, dass PNG mittlerweile sämtliche Vorteile von gif und jpg vereinnahmt hat und man damit immer zum besten Ergebnis kommt?
Wenn man die resultierende Dateigrösse ausser acht lässt: ja. Das PNG-24 Format wäre ideal für praktisch sämtliche Webgrafiken. Doch leider ist ein PNG-24 Bild im Vergleich zu GIF und JPG meist um ein Vielfaches grösser. Bilder fürs Web zu optimieren bedeutet aber insbesondere auch, dass man das bestmögliche Resultat betreffend Dateigrösse UND Qualität zu erreichen versucht. Wie auch im Artikel erwähnt, spielt die Dateigrösse wieder eine wichtigere Rolle, da die Besucherzahl, welche über ein Mobiles Datennetz Webseiten besucht, enorm angestiegen ist. Da gibt es noch kein DSL und meist sind die Kosten für die heruntergeladene Datenmenge enorm hoch.