Bilder sind allgegenwärtig, ob bei Facebook, Flickr, Instagram und Co., bei Präsentationen, bei Vorträgen oder eben auch auf Internetseiten. Bilder haben den Vorteil, dass wir in der Regel sofort erkennen, worum es geht.
Der Spruch "Ein Bild sagt mehr als tausend Worte" wird daher nicht an Gültigkeit verlieren. Bilder werden auf privaten Websites und Social Media Accounts genutzt, sind aber natürlich ebenso oft auf geschäftlichen Websites zu finden. Die Verwendung von Bildern gehört zum Standard im Internet. Die Digitalisierung der Kameras, die Möglichkeit mit Smartphones Fotos zu schießen, die Option Screenshots am Rechner zu machen usw. sorgen für eine Bilderflut im Internet.
Ein Problem, z.B. bei einer Software, mit Bildern zu verdeutlichen, fällt leichter als mit einer reinen Textbeschreibung. Sie machen einen Screenshot, ergänzen evtl. noch ein oder zwei Pfeile, die auf das ganz bestimmte Problem hinweisen und schon verstehen alle, was gemeint ist. Screenshots bzw. Bilder verdeutlichen aber nicht nur evtl. Probleme, sondern können natürlich auch für Präsentationen z.B. von Software genutzt werden.
Wir haben also Bilder in großer Fülle zur Verfügung. Jetzt stellt sich allerdings noch die Frage, sollten die Bilder so genutzt werden, wie sie im Ursprung vorliegen?
Es gibt zahlreiche Gründe, warum eine Bildoptimierung ein gute Idee ist:
-
Geringerer Bandbreitenverbrauch für Server
Dies ist sehr wichtig, da einige Server nicht über eine unbegrenzte Bandbreite verfügen und die Betreiber pro Gigabit gesendetem Datenpaket zahlen müssen.
-
Geringerer Bandbreitenverbrauch für einen Benutzer
Optimierte Bilder werden schneller geladen. Bei der Verwendung von optimierten Bildern auf einer Internetseite ist das Risiko geringer, dass der Nutzer den Seitenladevorgang vor Beendigung abbricht.
-
Mehr Speicherplatz auf Ihrem Server
Es gerät mittlerweile oft in Vergessenheit bei dem zur Verfügung stehenden Speicherangebot mit Cloud-Servern, aber trotzdem ist die Optimierung von Speicherplatz, Code und Ressourcen ein wichtiger Aspekt, zumindest ökonomisch.
-
SEO-Vorteil
Mit der Bildoptimierung kann die Ladegeschwindigkeit der Internetseite gesteigert werden. Das ist zwar ein nachgeordneter SEO-Aspekt, aber es ist trotzdem möglich, dass Internetseiten, die schneller laden, in den Suchergebnissen einen höheren Rank einnehmen als Seiten mit vergleichbaren Inhalt, die eine höhere Ladezeit haben.
Die Bildoptimierung hilft also, dass der Browser die wirklich wichtigen Seiteninhalte schneller herunterladen kann und sie schneller auf dem Bildschirm dargestellt werden können.
Bei den optimalen Einstellungen für Ihr Bild werden dann Faktoren wie die Eigenschaften des Formats, die Qualität, die Abmessungen des Bildes etc. analysiert und ggfs. geändert. Ziel ist schlicht und einfach gesagt, alle nicht benötigten Bildinformationen zu verwerfen und das für das Bild passende Bildformat zu verwenden.
Wir haben uns bis hierhin damit beschäftigt, warum eine Bildoptimierung sinnvoll ist, jetzt beschäftigen wir uns mit der Frage, wie wir das aufgeführte Problem der Bildoptimierung lösen können.
Da wir bereits zum Eingang des Artikels ein Zitat herangezogen haben, können wir hier auf den Spruch "Alle Wege führen nach Rom" verweisen. Selbstverständlich gibt es mehrere Möglichkeiten Bilder zu optimieren.
-
Sie optimieren die Bilder, wenn Sie sie mit Ihrer Bildbearbeitungssoftware bearbeiten und dann speichern - diese Lösung kann bei großen Bildsammlungen sehr problematisch sein, da sie viel Zeit in Anspruch nimmt und ein Grafiker eine zusätzliche Aufgabe hat, die er erledigen muss.
-
Sie setzen ein Skript ein, das hin und wieder nicht optimierte Bilder überprüft und bearbeitet! Das ist bereits eine bessere Lösung als Lösung A, allein schon deswegen, weil die Optimierung automatisiert erfolgt. Sie müssen jedoch alle Ihre Dateien in einer Datenbank aufzeichnen, ihren Status ändern und die Arbeit ist nach einigen Stunden erledigt.
-
Sie haben ein Skript, das ausgeführt wird, wenn das Image auf Ihrem Server erstellt oder geändert wird! Das ist die Lösung, die wir für SoftGuide ausgewählt haben, da das Skript vollautomatisch ausgeführt wird und keine zusätzlichen Ressourcen (Personen) beansprucht und noch dazu in Echtzeit ausgeführt wird.
Auch wenn Lösung A und B recht einfach zu implementieren sind, ist die komplett automatisierte Lösung C zu bevorzugen. Was müssen Sie hierfür tun?
Für den Erkennungsprozess nutzen wir inotify-tools, das uns nach einer entsprechenden Recherche über mögliche Tools am geeignetsten erscheint. Inotify setzt sich aus inode (index node) notify zusammen. inotify-tools erkennt eventbasiert Änderungen im Dateisystem über den Linuxkernel. Die Tools eignen sich für den Einsatz in Skripten und auf der Befehlszeile. Zu den Vorteilen dieses Tools zählt beispielsweise, dass auch einzelne Dateien und nicht nur komplette Verzeichnisse überwacht werden können.
Auf diese Weise bekommen wir Meldung über die Dateien, die tatsächlich optimiert werden müssen. Ein Problem dabei war, dass inotify-tools das Ereignis sofort nochmal auslösen wollte, nachdem wir die optimierte Version gespeichert hatten. Das hätte eine Schleife ergeben. Sobald die inotify-Tools feststellen, dass eine Datei erstellt oder geändert wurde, verwenden wir entweder optipng (PNG), gifsicle (GIF) oder imagemagic (JPEG), um sie zu optimieren.
Ein Unterschied in der Ansicht ist kaum zu erkennen, da die Optimierung als sogenannte Lossless Compression, also verlustfrei, erfolgt.
Als wir sahen, wie perfekt es für unsere Bilder funktioniert, haben wir die inotify-tools um eine weitere Option ergänzt, so dass auch unser CSS und Javascript on fly optimiert wird. Dadurch können unsere Programmierer evtl. Optimierungsnotwendigkeiten außer Acht lassen und wenn das Projekt fertig ist, alles hochladen. Das System erledigt den Rest und optimiert den Code.
Autor: Patryk Rydlewski