Bildoptimierung

häufiger Verursacher von langsamen Webseiten
Vor ein paar Jahren habe ich eine Website für eine Wandergruppe in China erstellt. Das Tool meiner Wahl war damals Site Origin. Ja, Sie haben Recht. Was habe ich mir nur dabei gedacht? Jedenfalls lud der Webmaster jede zweite Woche einen neuen Beitrag mit vielen Bildern hoch.

Sind kostenlose Plugins zur Bildoptimierung effizient?

Ich hatte eines der Bildoptimierungs-Plugins installiert, ich glaube, es war Ewww Optimizer. Natürlich war es die kostenlose Version, denn niemand will für Premium-Plugins auf einer nicht-kommerziellen Website bezahlen.

Das Problem mit diesen Bildoptimierungs-Plugins ist, dass sie die Bilder um einen bestimmten vordefinierten Prozentsatz komprimieren. Die hochgeladenen Bilder können jedoch sehr unterschiedlich groß sein und erfordern verschiedene Komprimierungsstufen oder Größenänderungen.

Der Webmaster hatte nicht auf die Bildgröße geachtet. Als sie sich schließlich über die langsame Ladegeschwindigkeit - auch im Backend - beschwerte, stellte ich fest, dass sie eine ganze Reihe von Bildern mit 15 MB und mehr hochgeladen hatte. Mit mehr als 3.000 lokal gespeicherten Bildern wog die gesamte Website bereits fast 20 GB.

Das verlangsamte nicht nur die Website, sondern beanspruchte auch eine große Menge an Speicherplatz auf meinem Server. Das musste sich ändern.

Oxygenbuilder als Retter in der Not

Ich hatte gerade angefangen, mit Oxygen Builder herumzuspielen, und so beschloss ich, eine Pro-Bono-Oxygen-Website von grundauf neu für die Wanderer zu erstellen. Normalerweise entwickle ich auf einer Live-Subdomain und nicht auf einer Staging-Domain. Das ist schneller und sieht im Frontend 100% realistisch aus.
Das erste Problem, auf das ich stieß, war, dass der Webmaster die Originalbilder nicht aufbewahrt hatte. Weder auf ihrem PC, noch auf dem Telefon, noch in der Cloud.

Die nativen WordPress-Tools zu verwenden, war nicht wirklich eine Option. Viele Dateien werden während des Ex- und Importvorgangs beschädigt oder gehen sogar verloren. Außerdem speichert WP Bilder in monatlichen Ordnern, während ich sie für bestimmte Beiträge benötigte. Nicht zuletzt hätten mir die meisten Plugins auch nicht bei der Komprimierung und Größenänderung der großen Bilddateien geholfen, sondern sie lediglich in die neue WordPress-Installation migriert. Ich wollte diese Bilder auf meiner Festplatte haben, damit ich sie bearbeiten kann.

Hoverify - ein universelles Webentwicklungs-Tool

Zum Glück gibt es Hoverify, mein Allround-Tool. Mit einem Klick kann ich damit alle Bilder auf einer bestimmten Webseite speichern. Das heißt, ich könnte eine Galerieseite öffnen, alle Bilder überfliegen und sie in einem bestimmten Ordner speichern. Die Dateigröße der Bilder wäre immer noch dieselbe, aber ich könnte sie jetzt problemlos bearbeiten.

Wie kann man Bilder am besten komprimieren?

Es gibt viele Websites, auf denen man Bilder komprimieren und in der Größe verändern kann. Meiner Meinung nach eignen sich https://compressimage.toolur.com/ und https://resizeimage.net/ am besten für diese Aufgabe. Sie können bis zu 25 Bilder auf einmal hochladen. Die Standardeinstellung ist eine Komprimierungsrate von 70 %, aber ich gehe manchmal auf 10 bis 30 % herunter. Dies kann jedoch die Qualität der Bilder stark beeinträchtigen, und Sie müssen abwägen, wie viel Verlust Sie akzeptieren können. Ich habe viele Bilder gelöscht, die von vornherein einfach zu groß waren.

Wenn Sie jedoch ein wichtiges Bild nicht einfach löschen können, und wenn es ein wirklich großes Bild ist, senden Sie es über Facebook. Posten Sie es dort und speichern Sie es dann (Rechtsklick auf Bild speichern). Facebook weiß, wie man Bilder ohne Qualitätsverlust verkleinert. Ich selbst benutze Wechat Messenger. Ich schicke ein großes Bild zwischen meinem Mobiltelefon und meinem PC hin und her, und die Bildgröße kann von z. B. 12 MB auf 500 KB schrumpfen, ohne dass die Qualität wesentlich beeinträchtigt wird. Dann lade ich dieses Bild zur Komprimierung auf https://compressimage.toolur.com/ hoch. Der ganze Prozess ist recht zeitaufwändig, daher mache ich das nur bei Bildern, die den Aufwand wirklich wert sind.

Was ist das webp-Format? Taugt es etwas?

Da heutzutage die meisten Browser das webp-Format erkennen und anzeigen können, konvertiere ich mit https://anyconv.com/jpg-to-webp-converter/ auch Bilder in dieses Format. Obwohl die Dateigröße nicht immer kleiner ist als die ursprüngliche jpg-Dateigröße, verwende ich ausschließlich dieses Format. Google bevorzugt es, weil es von ihnen erfunden wurde. Die meisten Bilder sind kleiner und ich denke, dass die Website ein klein wenig schneller geladen wird. Und das gefällt auch Google.

Titel und Alt-Texte für bessere SEO

Bei Websites, die SEO benötigen, würde ich optimierte Titel und alt-Texte zu den Bildern hinzufügen. Titel vor dem Hochladen der Bilder, alt-Texte, wenn sie in der WordPress-Mediathek sind. Aber in diesem Fall war SEO nicht erforderlich.

Kumulierte Layout-Verschiebung

Ein weiterer wichtiger Punkt ist die Kontrolle der Bildgrößen. In diesem Fall war es einfach, denn die Galerie in Oxygen kümmert sich darum. Aber wenn Oxygen dies nicht tut, ist es wichtig, sie zu definieren, da es sonst zu einer Layoutverschiebung kommen kann, was sowohl von den Nutzern als auch von Google verschmäht wird.
Zurück zu meiner Oxygen-Installation. Was habe ich gelernt? Nun, vor allem, dass es sehr mühsam ist, große Websites zu migrieren. Daher würde ich beim nächsten Mal zuerst ein Bild pro Galerie hochladen, dann die Website migrieren und dann den Großteil der Bilder an den definitiven Ort der Website hochladen.
Kampot Web Solutions
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram