Fotos und Bilder werden immer wichtiger auf Websites. Doch ohne eine gute Komprimierung werden diese gerade auf mobilen Geräten einfach zu langsam geladen und schaden mehr, als dass sie helfen.
Warum die Foto- und Bild-Komprimierung auf Websites so wichtig ist, erfahrt ihr im Folgenden.
Zudem stelle ich Tools und WordPress-Plugins vor, die euch dabei helfen. Und ich gebe noch ein paar zusätzliche Performance-Tipps.
Warum Foto- und Bild-Komprimierung so wichtig ist
Die Ladezeiten von Websites sind ein Thema, mit dem man sich als Website-Betreiber, Blogger und Co. beschäftigen sollte. In den letzten Jahren ist das Thema immer wichtiger geworden, da die steigende mobile Nutzung dafür sorgt, dass die Menschen auch auf dem Smartphone schnell auf Website-Inhalte zugreifen wollen.
Das Tool Google PageSpeed ist sicher nicht perfekt, aber es stammt von Google und deshalb sollte man dessen Ergebnisse ernst nehmen. Ein häufiges Problem, welches dort beim Testen einer Website angezeigt wird, sind nicht optimierte Bilder. Gerade bei der mobilen Analyse wird das häufig angemerkt.
Aber auch durch den verstärkten Fokus von Google auf holistische Inhalte, bei denen Bilder und Fotos wichtig sind, kommt es auf eine gute Bild-Komprimierung an, damit die Seiten nicht zu lange laden. Schließlich machen Bilder bei vielen Websites 50% oder mehr der zu übertragenden Daten aus. Da kann man also sehr gut ansetzen, um die Ladezeiten zu verbessern.
Manuelle Komprimierung mit Photoshop
Mein übliches Vorgehen auf vielen meiner Blogs ist es, Fotos und Bilder mit Photoshop zu erstellen bzw. zu bearbeiten. Beim Export kann man die Bilder dann extra für das Internet verkleinern lassen. Das bringt schon sehr gute Ergebnisse.
Beim Export als JPEG wähle ich meist eine Qualität von 70 oder 80 % aus. Das verringert die Dateigröße deutlich, schadet aber nicht wirklich der Bildqualität.
Dagegen speichere ich Grafiken, Screenshots und Textbilder meist als PNG Datei mit 8 Bit Tiefe (256 Farben). Das ist dann ähnlich einem GIF, nur die moderne Variante davon.
Damit kommen schon gut optimierte Bilder und Fotos raus, die ich dann auf meinen Blog oder meine Website hochlade.
Andere Bildbearbeitungsprogramme können solche Komprimierungen beim Speichern natürlich auch.
Komprimierungs-Tools
Wer nicht Photoshop nutzt oder ein Programm einsetzt, dass keinen solchen optimierten Web-Export anbietet, kann stattdessen ein Online-Tool nutzen. Davon finden sich im Web einige.
Ich finde z.B. das Tool compressor.io sehr gut. Hier kann man ein Bild hochladen und dieses wird dann komprimiert. Unterstützt werden die Formate JPEG, PNG, GIF und SVG.
Als Ergebnis bekommt man eine sehr schöne Vergleichsansicht des Originals und der komprimierten Version. Ich kann da kein Unterschied erkennen, obwohl in diesem Beispiel 81% Datengröße eingespart worden ist.
Hiermit kann man also sehr viel herausholen, vor allem, wenn das Bild vorher nicht optimiert war.
Weitere Online-Alternativen sind z.B. compressnow.com oder tinypng.com. Letzteres optimiert neben PNG auch JPEG Dateien und es gibt den Service auch als WordPress-Plugin.
Aber es ist natürlich etwas aufwändig, wenn man sehr viele Fotos und Bilder hat.
WordPress-Plugins
Eine Automatisierung der Foto- und Bild-Komprimierung ist mit speziellen WordPress-Plugins möglich. Hier liegt der Vorteil unter anderem darin, dass auch alle in WordPress automatisch erstellten Bildversionen optimiert werden.
Es gibt kostenlose und kostenpflichtige Plugins. So kostet Optimus zwar 29 Euro im Jahr, es bietet aber eine sehr gute Leistung bei der Komprimierung.
Neben der automatischen Optimierung von hochgeladenen Bildern, kann man bei der Erstinstallation auch eine Massenoptimierung der vorhandenen Fotos vornehmen. Zudem kann das Plugin WebP Bilder erzeugen, die besonders schnell laden.
Kostenlose Alternativen sind z.B. WP Smush oder das Imagify Image Optimizer Plugin. Auch diese Plugins erzielen gute Ergebnisse.
Alles ist besser, als die eigenen Bilder nicht zu komprimieren.
Weitere Performance-Tipps für Bilder und Fotos auf Websites
Zum Schluss noch ein paar allgemeine Tipps zur Performance-Optimierung von Bildern und Fotos auf Websites:
- Wählt immer das richtige Format. Fotos werden in der Regel als JPEG gespeichert, während Grafiken, Textbilder und andere Bilder mit gleichfarbigen Flächen als PNG gespeichert werden sollten.
- Ein CDN (Content Delivery Network) zu nutzen ist für Bilder an sich eine gute Idee. So wird der eigene Server ein wenig entlastet. Allerdings könnte das in Zukunft durch die DSGVO zu einem Datenschutz-Problem werden. Hier muss man noch abwarten, was die genauen Regelungen dann sein werden.
- Mit „Lazy Load“ bezeichnet man eine JavaScript Lösung, die Bilder erst dann anzeigt, wenn der Nutzer diese im Sichtfenster sieht. Damit werden Bilder, die am Ende einer Seite sind, beim Aufrufen der Seite erstmal nicht geladen, was die Seite auf jeden Fall schneller macht. Es gibt „Lazy Load“-Plugins, die es sehr einfach ermöglichen dies in WordPress umzusetzen.
- „So viel wie nötig, so wenig wie möglich“ ist ein Leitspruch, der auch hier ganz gut passt. Natürlich bereichern Fotos und Bilder einen Artikel, aber man muss es auch nicht unnötig aufblähen. Eine gute Balance ist hier wichtig.
- In den Einstellung der WordPress-Mediathek solltet ihr die optimale Größe für die einzelnen Bild-Versionen einstellen. Diese sollten sich an der Breite eures Content-Bereichs oreintieren. Wer Fotos und Bilder manuell auf den Server bei seinem Hoster hochlädt, sollte die optimale Größe im Bildbearbeitungsprogramm festlegen. Es ist nicht gut, wenn in der Website das Bild per CSS verkleinert werden muss, weil man es zu groß hochgeladen hat.
Was nutzt ihr?
Wie geht ihr die Bild-Komprimierung an? Macht ihr das alles schon in Photoshop oder einem anderen Bildbearbeitungsprogramm oder nutzt ihr ein WordPress-Plugin dafür? Ich freue mich auf euer Feedback.