Optimieren Sie Ihre Bilder und verschwenden Sie keine Zeit mehr

Laut HTTPArchive hat sich die durchschnittliche Website-Größe in 5 Jahren fast verdoppelt, von 1 MB im Jahr 2014 auf 2 MB im Jahr 2019. Sicher, der Internetzugang ist schneller als je zuvor, aber warum sind Websites jetzt so groß? Die Antwort liegt teilweise in Multimedia-Assets im Allgemeinen und Bildern im Besonderen.

Längst sind Webseiten keine einfachen Textseiten mehr. Sie sind jetzt dynamisch, voller Bilder, Videos, GIFs … und wir möchten, dass all diese Assets auf Bildschirmen mit riesigen Auflösungen schön und knackig aussehen.

Wenn Ihre Website sehr langsam lädt und Sie Ihre Bilder nie optimiert haben, habe ich eine gute Nachricht: Heute erfahren Sie, was Sie tun können, um Ihr WordPress zu beschleunigen. Sehen wir uns die Tools an, mit denen Sie die Leistung Ihrer Website verbessern und verhindern können, dass Bilder die Benutzererfahrung beeinträchtigen.

Warum Bildoptimierung wichtig ist

Bevor ich die verschiedenen verfügbaren Methoden zur Optimierung von Bildressourcen und zur Beschleunigung Ihrer Website erkläre, möchte ich Sie ein paar Minuten davon überzeugen, wie wichtig dies ist.

Bilder haben einen großen Einfluss auf die Gesamtgröße einer Webseite

Wie ich eingangs sagte, macht das Gewicht der Bilder auf einer Website einen wichtigen Prozentsatz der Gesamtzahl aus. Betrachten Sie zum Beispiel diesen Blogbeitrag: DevTips – How to Stop WordPress From Guessing URLs. Dies ist ein ziemlich kurzer Beitrag mit weniger als 400 Wörtern, der eine schnelle Lösung für ein klares Problem bietet.

Laut GTMetrix verbraucht das Laden dieses Beitrags 850 KB an Daten. Aber warum verbraucht ein so kurzer Beitrag so viele Daten? Nun, Bilder sind teilweise für dieses Problem verantwortlich: Das Beitragsbild allein wiegt mehr als 200 KB, was 25 % der Gesamtmenge ausmacht.

Mobiler Datenverkehr

Laut den Daten von statcounter kommen 52 % des Web-Traffics von Mobilgeräten und 45 % von Desktops. Aus diesem Grund wird heute so viel Wert darauf gelegt, responsive Designs zu verwenden, die auf kleinen Bildschirmen gut funktionieren.

Wie Sie sicherlich selbst erlebt haben, ist die Internetverbindung auf dem Handy nicht immer gut (besonders wenn Sie pendeln oder in der U-Bahn sind). Laut Statistia liegt die Durchschnittsgeschwindigkeit im Jahr 2019 bei etwa 14 Mbit/s. Wenn wir also unsere Websites auf Mobilgeräten beschleunigen wollen, müssen wir ihr Gewicht so weit wie möglich reduzieren, einschließlich des ihrer Bilder.

Speicher- und Datenübertragungskosten

Ein weiterer Grund, warum Sie sich Gedanken über die Verwendung von Bildern mit den entsprechenden Abmessungen machen sollten, ist Geld. Zu den Kriterien, nach denen Hosting-Anbieter ihre Pläne anbieten, gehören die Menge an Speicherplatz, die Ihre Website verwendet, und die Menge an Daten, die Sie von ihren Servern an Ihre Besucher senden. Je mehr Speicherplatz belegt und je mehr Daten gesendet werden, desto mehr zahlen Sie.

Indem Sie die Größe Ihrer Bilder reduzieren, reduzieren Sie beide Faktoren und sparen jeden Monat etwas Geld ?

Aktionen zur Bildoptimierung

Nachdem Sie nun wissen, warum Sie sich Gedanken über die Optimierung Ihrer Bilder machen sollten, sehen wir uns an, was Sie tun können, um Ihre WordPress-Site zu beschleunigen.

#1 Richtig skalierte Bilder hochladen

Die Anzahl der Leute, die Bilder hochladen, die direkt von ihrer brandneuen DSLR-Kamera entfernt wurden, ist überraschend. Das Problem ist, dass jedes mit einer DSLR-Kamera aufgenommene Foto wahrscheinlich zu groß und schwer für eine Website ist.

Das erste, was Sie tun müssen, ist, die Bilder auf eine angemessene Größe zu reduzieren, bevor Sie sie auf Ihre Website hochladen. Auf unserer Website sind beispielsweise die größten Bilder, die wir normalerweise hochladen, die vorgestellten Bilder unserer Posts. Wir haben uns entschieden, diese Bilder auf nur 1200 x 800 Pixel zu beschränken. In diesem anderen Beitrag habe ich eine Methode zum schnellen Skalieren und Komprimieren von Bildern vor dem Hochladen erklärt.

#2 Optimieren Sie Ihr Design, um geeignete Thumbnails zu generieren

Wenn Sie ein Bild in WordPress hochladen, generiert WordPress mehrere Miniaturansichten. Diese Miniaturansichten werden durch Ihr Thema definiert, da es Ihr Thema ist, das weiß, wann es eine größere oder eine kleinere Version eines Bildes benötigt.

Beispielsweise sind unsere vorgestellten Bilder 1200 x 800 Pixel groß. Diese Abmessungen funktionieren hervorragend, wenn Sie den Beitrag selbst anzeigen:

das ist eindeutig zu viel für so etwas:

Aus diesem Grund registriert unser Design für diesen speziellen Fall eine neue Thumbnail-Größe, die nur 480 x 320 Pixel beträgt und auf dem Bildschirm mit der Liste der Beiträge verwendet wird.

Wenn Sie der Meinung sind, dass Ihr Design keine geeigneten Thumbnails generiert, empfehle ich Ihnen, die WordPress-Dokumentation zu lesen, um zu erfahren, wie Sie die Größe eines Thumbnails mit set_post_thumbnail_size oder sogar zusätzliche Thumbnails mit add_image_size definieren.

Und wie immer, wenn Sie dabei Hilfe benötigen, lassen Sie es mich einfach im Kommentarbereich unten wissen, und ich helfe Ihnen gerne (oder schreibe sogar einen Beitrag darüber?)

#3 Verwenden Sie Bildgrößen geschickt

WordPress generiert mehrere Miniaturansichten der Bilder, die Sie in Ihrer Medienbibliothek haben, damit Ihr Design in jedem möglichen Szenario das beste Bild verwenden kann. Aber hier kommt der interessante Teil: Auch Sie können Thumbnails verwenden, wenn Sie Bilder in Ihre Seiten und Beiträge einfügen.

Wenn Sie ein Bild in einen Beitrag einfügen, werfen Sie einen Blick auf die Seitenleiste und wählen Sie die Größe, die Ihren Anforderungen am besten entspricht:

Wenn Sie beispielsweise ein schmales und kleines Bild wie dieses einfügen möchten, ist ein kleines Bild (300 x 200 Pixel) möglicherweise perfekt:

aber die Verwendung desselben Thumbnails für ein größeres Bild führt zu schrecklichen Ergebnissen:

Verwenden Sie besser eine Version mit mehr Auflösung:

#4 Verwenden Sie das geeignete Bildformat

Es gibt verschiedene Bildformate, jedes mit seinen Stärken und Schwächen, um Bilder zu komprimieren. Die am häufigsten verwendeten Formate sind:

• PNG. Tolles Bildformat zum Teilen von Screenshots, die keine Bilder enthalten, wie zum Beispiel ein Screenshot des WordPress-Editors.
• JPG. Eines der am weitesten verbreiteten Formate der Welt. Es funktioniert sehr gut mit praktisch jeder Art von Fotografie und ermöglicht sehr hohe Komprimierungsraten. Es ist jedoch nicht perfekt: Wenn das Foto sehr scharfe Kanten hat (z. B. wenn Text oder Zeichnungen vorhanden sind), müssen Sie niedrigere Komprimierungsraten verwenden oder riskieren, dass das Bild hässliche Artefakte aufweist.
• GIF. König des Internets (und der Social-Media-Plattformen). Es ist ein Formattyp, der Animationen zulässt. Um ehrlich zu sein, denke ich, dass alle „GIFs“, die wir jetzt verwenden, eigentlich (kurze) Videos sind, die bessere Komprimierungsraten und eine höhere Qualität bieten…

#5 Löschen Sie nicht verwendete Bilder

Im Laufe der Zeit ist es einfach, viele alte Bilder auf Ihrer WordPress-Site zu behalten, die niemand irgendwo verwendet. Wer sie schnell löschen möchte, Toni erklärt in diesem Beitrag wie.

#6 Lazy Loading aktivieren

Bilder verlangsamen also Ihre Websites, richtig? Warum weisen wir Websites nicht einfach an, keine Bilder zu laden, es sei denn, es ist absolut notwendig? Das würde die Sache beschleunigen, oder? Geben Sie Lazy Loading ein.

Lazy Loading ist eine ziemlich einfache Idee: Ein Bild wird erst geladen, wenn es im Browser des Besuchers sichtbar sein soll. Wenn unsere Website zum Beispiel ein bestimmtes Bild in der Fußzeile hat, warum müssen wir es uns die Mühe machen, es zu laden, bevor der Benutzer das Ende unserer Website erreicht hat? Warten Sie, bis sie dort ankommen, und laden Sie das Bild, wenn sie es tun (und wenn nicht, speichern Sie das Laden eines Bildes!).

Es gibt viele Lazy Loading-Plugins für WordPress. Einige Hosting-Anbieter wie SiteGround Event integrieren diese Option in ihre Installationen. Suchen Sie einfach in Ihrem Dashboard nach der Option und aktivieren Sie sie.

Ich hoffe, der heutige Beitrag hilft Ihnen, Ihre Webladegeschwindigkeit ein wenig zu verbessern. Es gibt nur wenige Dinge, die so einfach zu beheben sind und so gute Ergebnisse liefern. Prost und Glück!

Vorgestelltes Bild des Icons8-Teams auf Unsplash.