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.
Wer wir sind und wie wir arbeiten. In unserem Büro im Zentrum von Köln arbeiten ausgebildete Redakteur/innen an der Ausarbeitung erstklassiger Inhalte, auf die du dich verlassen kannst. Sämtliche Artikel werden nach dem Vier-Augen-Prinzip publiziert: Nach Fertigstellung der Rohfassung werden die Texte von (mindestens) einem/r anderen Redakteur/in auf orthografische und inhaltliche Richtigkeit hin überprüft.
Diese Seite ist ein Angebot der 4pub GmbH mit Sitz in Köln. Wir haben uns auf den Betrieb hochwertiger redaktioneller Online-Portale spezialisiert und berichten stets redaktionell unabhängig.
- Danke für 16 tolle Jahre - 13. Juli 2023
- So erstellst du deine erste Newsletter-Mail in 10 Schritten mit CleverReach - 13. Juli 2023
- Die 5 besten Features des Amazon Affiliate WordPress Plugin – AAWP - 12. Juli 2023
Es gibt auch Serverseitig per .htaccess Möglichkeiten, hier etwas zu optimieren, Beispielsweise Gzip Komprimierung und Cache Einstellungen.
Oder der “deflate”-Mod (mod_deflate.c) bei Apache Webservern, der den älteren Gzip Mod abgelöst hat und von den meisten Webservern unterstützt wird. Gzip wird leider nicht mehr überall unterstützt.
Danke für die Auflistung. Die Bilder machen wirklich viel aus. Konnte alleine durch die Optimierung meiner Bilder bei der Desktopbewertung bei Google von Rot zu Grün wechseln.
Ich selbst nutze Bulk Image Optimization by ShortPixel
Ich nutze Google Pagespeed. Der bietet auch komprimierte Ergebnisse an. Gr
Vielleicht etwas umständlich, aber Pagespeed Insights bietet auch die Dateien, die es als zu groß moniert, in optimierter Form zum Download an. Einfach unten auf Details klicken und es wird ein zip-Folder mit den komprimierten/optimierten Dateien geöffnet.
So muss man nicht extra ein Optimierungs-Plugin installieren, was auch Verarbeitungszeit kostet.
Wie gedsagt, etwas umständlich und nur zweckmässig wenn man wirklich wenige Bilder oder CSS/JS Dateien optimieren will
Ich kann als Mac-User das Tool “imageoptim” SEHR empfehlen. Rechtsklick aufs Bild im Finder und das Bild mit einem Klick optimiert fürs Web. Unabdingbar, wer Bilder für Websites erstellt.
Ich nutze eine Mischung aus alle den Dingen. Besonders bei größeren Bilder verwende ich Photoshop und compressor.io. Bei kleineren Bilder unter 50Bb achte ich nicht so sehr darauf.
Ich nutze tinypng.com das Tool ist kinderleicht zu benutzen und die Einsparungen manchmal enorm.
Die anderen Seiten kannte ich bisher noch nicht und werde sie einmal testen.
Vielen Dank für die Auflistung.
Da ich viel unterwegs am iPad arbeite, nutze ich tinypng. So muss ich mir nicht extra ein Programm laden und kann recht schnell das entsprechende Bild komprimieren. Mit den Ergebnissen bin ich super zufrieden.
Ich nutze ShortPixel Image Optimizer. Macht seine Arbeit sehr gut. Bestehende Bilder werden optimiert und neu hinzugefügte werden automatisch erledigt. 10.000 Bilder kosten nur 10 Euro. Bin bestens damit zufrieden und Google PageSpeed meckert auch nicht mehr rum =)
Weiter bietet es auch eine API mit der ich meine anderen selbstprogrammierten Webseiten bedienen kann.
Hallo Peer,
ich nutze auf meinen WP-basierten Websites immer das WordPress-PlugIn von TinyPNG. Der einzige Schritt, den ich noch vor dem Upload erledige ist das Zuschneiden auf die maximale Breite des Contents. Damit bin ich bis jetzt immer ganz gut gefahren und werde das so weiter beibehalten.
Sollte ich für eine Seite nicht auf WP setzen, dann setze ich das komandozeilentool “ImageMagick” ein.
Hallo,
ich nutze häufig http://www.jpegmini.com.
Gruß
Daniel