Bilder für die Seiten-Geschwindigkeit optimieren

Spätestens seit dem Google Pages-Speed Update, welches am 09. Juli 2018 ausgerollt wurde, solltest du dir einmal die Bildgrößen deiner Website ansehen und eventuell deine Bilder optimieren. Diese können nämlich einen großen Einfluss auf deine Seiten-Geschwindigkeit haben. In diesem Artikel zeige ich auf, welche Möglichkeiten der Optimierung es gibt und worauf du bei den Bildgrößen achten solltest.

Das Problem ist eigentlich schon etwas älter: Seit dem Smartphones Fotos auch in hohen Auflösungen und mit Abmessungen jenseits der 3000 Pixel erzeugen, steigt das Datenvolumen und natürlich auch der -Verbrauch. Werden diese Fotos dann unbearbeitet direkt auf die Website gestellt, sind lange Ladezeiten vorprogrammiert. Das betrifft natürlich nicht nur Fotos von Smartphones, sondern auch diverser andere Digitalkameras oder auch Bilddatenbanken. Das Smartphone ist allerdings die gängige Variante, Fotos für die Website oder den Blog zu erstellen.

Die Bilder optimieren – Abmessungen

Kein Dienst und keine Social-Media Plattform verlangt nach Bildgrößen jenseits 2000 oder mehr Pixeln. Als erstes solltest du also hingehen, und deine Bilder in der Abmessung reduzieren. Ich nehme in den meisten Fällen eine Kantenlänge von 1600 Pixeln. Damit deckst du schon die meisten Auflösungen ab. Tools zum Bearbeiten von Bildern gibt es genügend (auch online, dazu benötigst du keine Software). Falls du Photoshop benutzt, kannst du die Bilder zusätzlich noch „für Web speichern“. Achte beim Speichern immer auf das richtige Dateiformat (PNG, JPG, GIF).

Experimentiere ruhig mit unterschiedlichen Abmessungen herum. Diese haben immer Auswirkungen auf die Dateigröße. Du solltest die Abmessungen allerdings nicht zu klein wählen. Teilst du (oder jemand anderes) einen Artikel oder ein Bild von deiner Website, kann dies für die Plattform zu klein sein und sieht dann nicht mehr schön aus (Facebook „holt“ sich zum Beispiel keine Bilder die kleiner als 200×200 Pixel sind).

Hast du das neue Bild mit den geringeren Abmessungen gespeichert, wirst du sehen, dass sich die neue Dateigröße erheblich von dem Originalbild unterscheidet. Nutzt du für deine Website WordPress oder ein anderes Content-Management-System, werden in der Regel beim Hochladen des Bildes schon weitere Bildgrößen erzeugt (AutoImages) und in bestimmten Bereichen der Website verwendet.

Dateigröße des Bildes weiter verringern

Es gibt noch weitere Möglichkeiten, die Dateigröße deiner Bilder weiter zu verringern. Ich nutze dazu gern das Online-Tool TinyPNG (https://tinypng.com). Hier kannst du PNGs oder JPGs hochladen. Maximal 20 Stück oder 5 MB. Willst du viele Bilder optimieren, musst du den Vorgang mehrfach ausführen. TinyPNG komprimiert die Bilder weiter und reduziert die Anzahl der Farben. Das ist in den meisten Fällen nicht sichtbar, verringert aber die Dateigröße. Hast du mehrere Bilder hochgeladen, kannst du diese einzeln oder gepackt in einer ZIP-Datei herunterladen.

WordPress-Plugin für die automatische Bearbeitung

Möchtest du noch weniger Aufwand mit der Bearbeitung deiner Bilder haben, bietet TinyPNG auch ein WordPress-Plugin an. Hier werden die Bilder bereits beim Upload optimiert. Existierende Bilder kannst du auch in einem „Rutsch“ optimieren und brauchst diese so nicht erneut hochzuladen. Im Dashboard wird dir die gesamte Reduzierung der Daten angezeigt – ganz nett.

Zusammenfassung

Schnelle Webseiten sind heute Voraussetzung für ein gutes Benutzer-Erlebnis und fürs Ranking in Suchmaschinen. Bilder können einen hohen Anteil dazu beitragen, das Internet (gefühlt) noch schneller zu machen, wenn man sie denn optimiert. Mit diesen Tipps ist der Aufwand auch gar nicht so groß und lässt sich schnell in den eigenen Workflow integrieren.