So optimieren Sie Ihre Bilder für WordPress

Es gibt viele Gründe, warum Sie Bilder in Ihre WordPress-Inhalte aufnehmen würden (und sollten). Bilder helfen, Ihre Leser bei der Stange zu halten. Sie sind auch eine Möglichkeit, lange Inhalte aufzuteilen und die Suchmaschinenoptimierung (SEO) zu verbessern. Sie können Ihre Website jedoch auch verlangsamen.

Glücklicherweise stehen Ihnen einige Ressourcen zur Verfügung, mit denen Sie Ihre Bilder optimieren können. Dies bedeutet, dass Sie eher langsame Seitengeschwindigkeiten überwinden werden, die sich nachteilig auf den Gesamterfolg Ihrer Website auswirken können.

In diesem Artikel sehen wir uns an, warum große Bilder Ihre Website möglicherweise nach unten ziehen. Dann untersuchen wir, wie Sie Ihre Mediendateien effektiv komprimieren können, zusammen mit einigen grundlegenden Tipps zur Bildoptimierung, die die SEO Ihrer Website verbessern können.

Warum Sie Ihre Bilder für WordPress optimieren sollten

Bilder sind ein wertvoller und wichtiger Bestandteil jeder Content-Strategie. Sie können jedoch auch eine der Hauptursachen für langsame Seitenladezeiten sein.

Eine langsame Website ist ein Problem, da sie Benutzer vertreiben kann. Bei Seiten, deren Laden fünf Sekunden oder länger dauert, steigt die Wahrscheinlichkeit, dass ein Benutzer abspringt (d. h. er verlässt die Seite, nachdem er nur eine einzige Seite angesehen hat), im Durchschnitt um 90 Prozent.

Während es mehrere Faktoren gibt, die Ihre Website verlangsamen können, nehmen Bilder und Mediendateien auf modernen Websites satte 63 Prozent der Bandbreite ein. Daher ist es wichtig, die Bilder zu optimieren, die Sie auf Ihre Website hochladen.

Es ist auch erwähnenswert, dass die Website-Geschwindigkeit ein Google-Ranking-Faktor ist. Das heißt, wie schnell oder langsam Ihre Seite geladen wird, bestimmt in gewissem Maße, wie gut sie in den Suchergebnissen rankt. Es gibt viele Faktoren, die Ihren PageRank beeinflussen, und Bilder fallen in die Kategorie „Benutzerfreundlichkeit von Webseiten“.

Bei der Bildoptimierung geht es eigentlich darum, zwei Dinge zu verbessern:

• Die Anzahl der Bytes, die zum Codieren jedes Bildpixels verwendet werden
• Die Gesamtzahl der verwendeten Pixel.

Mit anderen Worten: Optimieren bedeutet, dass Sie mit den wenigsten Pixeln und Bytes die bestmögliche Qualität erzielen. Dies reduziert die Größe Ihrer Mediendateien und kann sich erheblich auf die Gesamtgeschwindigkeit Ihrer Website auswirken.

Optimieren Sie Ihre Bilder vor dem Hochladen auf WordPress

Letztendlich ist das beste Szenario für Ihre Website, dass Sie Ihre Bilder optimieren, bevor Sie sie hochladen. Auf diese Weise erhalten Sie am Ende keine Duplikate oder mehrere Versionen eines Bildes. Das würde den Zweck der Entlastung Ihrer Website durch Bildoptimierung zunichte machen.

Sehen wir uns vor diesem Hintergrund einige der Überlegungen an, die Sie anstellen müssen, wenn Sie entscheiden, wie Sie die Medien Ihrer Website optimieren können.

Bilddateiformate

Werfen wir zunächst einen Blick auf die verschiedenen Arten von Bildformaten, die es gibt. Wenn Sie verstehen, inwiefern sie unterschiedlich sind und wann sie am besten verwendet werden, können Sie auf eine rationalisiertere Verwendung von Bildern hinarbeiten.

Die beiden am häufigsten verwendeten Bildformate im Internet sind JPEGs und PNGs. Beide Formate bestehen aus Pixeln. Pixel dehnen sich, wenn Sie die Größe eines Bildes ändern, wodurch es manchmal unscharf werden kann. Diese Bildtypen haben jedoch unterschiedliche Stärken und Schwächen.

Wann Sie JPEGs verwenden sollten

JPEG-Dateien sind eine gute Wahl für Druck- und Webinhalte. Diese Art von Bilddatei verwendet ein sogenanntes „verlustbehaftetes“ Format. Wenn ein größeres Bild in ein JPEG konvertiert wird, gehen einige der in seiner Datei enthaltenen Informationen verloren.

Diese Informationen werden nicht benötigt, um das Bild einfach anzuzeigen. Es bedeutet jedoch, dass die Konvertierung in ein JPEG zu einer kleineren Dateigröße führt, aber es kann zu Abstrichen bei der Gesamtbildqualität kommen. Glücklicherweise ist der Qualitätsverlust nicht allzu auffällig, insbesondere bei kleineren Bildern.

Wann sollten PNGs verwendet werden?

PNG-Dateien sind auch für Webinhalte nützlich, genau wie JPEGs, aber auf andere Weise. Da PNGs beispielsweise transparente Hintergründe haben können, sind sie vielseitiger und praktischer für die Gestaltung von Webgrafiken.

PNGs verwenden ein „verlustfreies“ Dateiformat. Das bedeutet, dass beim Komprimieren der Datei alle Informationen über das Bild erhalten bleiben. Infolgedessen sind sie tendenziell von höherer Qualität, bieten jedoch eine geringere Verbesserung der Dateigröße und Seitengeschwindigkeit. Sie sind eine gute Option für Grafiken und Symbole sowie für Bilder in sehr hoher Qualität.

Bildgröße

Es ist Zeit, die Blähungen zu reduzieren. Die Bereitstellung skalierter Bilder ist eine der einfachsten und effektivsten Methoden zur Optimierung Ihrer Bilder. Warum so effektiv? Durch die Bildskalierung wird sichergestellt, dass Sie nicht mehr Pixel versenden, als zur Anzeige des Assets in seiner beabsichtigten Größe im Browser erforderlich sind.

Viele Websites versuchen, große, unskalierte Bilder bereitzustellen, und verlassen sich darauf, dass der Browser sie in der Größe ändert, was zu einem Verbrauch zusätzlicher Ressourcen und einer langsameren Websitegeschwindigkeit führt. Wenn die natürliche Größe des Bildes 820 x 820 Pixel beträgt und es vom Browser als 400 x 400 Pixel angezeigt wird, sind das 32.400 unnötige Pixel!

Die Klarheit und Geschwindigkeit, mit der eine Seite geladen wird, hat viel mit dem Gerät zu tun, auf dem das Bild angezeigt wird (Mobilgerät, Desktop usw.). Beispielsweise kann ein 4k-Bild auf Ihrem 27-Zoll-Monitor gut aussehen.

Wenn ein Besucher jedoch eine Seite mit diesem Bild lädt, rendert der Browser die Datei zuerst mit ihrer vollen Auflösung und skaliert sie dann so, dass sie auf ihren Bildschirm passt. Wenn sie ein mobiles Gerät verwenden, das nicht größer als 400 Pixel ist, werden sie wahrscheinlich Ihre Inhalte verpassen.

In Anbetracht dessen sind einige Best Practices beim Exportieren Ihrer Bilder:

• Halten Sie die Dateigröße Ihrer Bilder unter ein paar hundert Kilobyte, indem Sie sie als „weboptimierte“ JPEGs oder PNGs speichern.
• Der Webstandard für Bilder ist 72 Punkte pro Zoll (dpi), was erreicht werden kann, indem Bilder in dem oben vorgeschriebenen Format gespeichert werden.

Sie können Photoshop, Lightroom oder einen ähnlichen Editor verwenden, um die Bildgröße auf etwa 1.500 Pixel oder weniger Breite zu reduzieren. Gehen Sie in Photoshop einfach zu Bild > Bildgröße , um die Abmessungen und Auflösung Ihres Bildes manuell anzupassen. Sie können auch zu Datei > Exportieren > Für Web speichern gehen, um Ihre Bilder für den Web-Upload zu optimieren:

Wenn Sie keine scharfen und lebendigen Fotos auf einem größeren Monitor anzeigen möchten, können Sie das Bild noch weiter verkleinern.

Wenn Sie mit Lightroom arbeiten, gehen Sie zu Datei > Exportieren , um die Bildgröße beim Exportieren manuell anzupassen:

Bildgröße und Auflösung sind nur ein Teil des Puzzles. Wenn es um die Optimierung Ihrer Bilder geht, sollten Sie auch die Komprimierung verstehen und effektiv einsetzen.

Bildkompression

Kurz gesagt ist die Bildkomprimierung eine Möglichkeit, die Größe (in Byte) einer Grafikdatei zu minimieren, ohne die Bildqualität auf ein inakzeptables Niveau zu verschlechtern. Wie wir bereits besprochen haben, können hochauflösende Bilder, die eine unnötig große Dateigröße haben, die Seitengeschwindigkeit dramatisch beeinflussen.

Andererseits sind optimierte Bilder im Durchschnitt um 40 Prozent heller als nicht optimierte Bilder. In der Regel sollten Sie alle Bilder und andere Medien, die Sie auf Ihre Website hochladen, entweder vor oder während des Upload-Vorgangs optimieren.

Verlustbehaftete vs. verlustfreie Komprimierung

Wie bereits erwähnt, verwenden JPEGs und PNGs zwei verschiedene Arten der Bildkomprimierung. Bei der verlustfreien Komprimierung bleiben alle Daten der Originaldatei ohne Qualitätseinbußen erhalten.

Bei der verlustfreien Komprimierung zerlegen Sie eine Datei in der Regel in eine „kleinere“ Form für die Übertragung oder Speicherung. Dann werden die Informationen am anderen Ende wieder zusammengesetzt, sodass sie wieder verwendet werden können.

Andererseits werden bei der verlustbehafteten Komprimierung einige der in der Bilddatei enthaltenen Daten entfernt. Dies kann zu einem größeren Qualitätsabfall, aber auch zu einer deutlicheren Verbesserung der Seitengeschwindigkeit führen. Sie können sogar die Stärke der Komprimierung anpassen, um ein Gleichgewicht zwischen Qualität und Leistung zu erreichen.

Bildkomprimierungs-Plugins

Schnell geladene Bilder bedeuten eine schnellere Website und besseres SEO. Hier sind einige verschiedene Plugins zur Bildoptimierung, die Ihnen bei der Bildkomprimierung helfen.

Smush-Bildkomprimierung und -optimierung

Das Bildkomprimierungs-Plugin von Smush ändert die Größe, optimiert und komprimiert alle Ihre Bilder für das Web, sodass sie schneller als zuvor geladen werden. Wenn Ihre Website reich an Fotos ist, dann ist dieses Plugin ein Muss.

ShortPixel-Bildoptimierung

Das Bildoptimierungs-Plugin von ShortPixel komprimiert alle vergangenen und zukünftigen Bilder und PDFs, die in Ihre Medienbibliothek hochgeladen wurden. Das Plugin bietet sowohl verlustbehaftete als auch verlustfreie Komprimierung für die meisten Dateitypen. Wenn Sie ein Fotograf sind, können Sie sich für die Hochglanz-JPEG-Komprimierung entscheiden, die einen hochwertigen verlustbehafteten Optimierungsalgorithmus verwendet.

Komprimieren Sie JPEG- und PNG-Bilder

Möchten Sie nur JPEGs und PNGs optimieren? Dieses Plugin verwendet die Bildkomprimierungsdienste TinyJPG und TinyPNG, um Ihnen bei der Bildkomprimierung zu helfen. Im Durchschnitt werden JPEG-Bilder um 40-60 Prozent und PNG-Bilder um 50-80 Prozent komprimiert, ohne sichtbaren Qualitätsverlust.

EWWW Bildoptimierer

EWWW Image Optimizer hat eine doppelte Aufgabe. Es optimiert sowohl vorhandene Bilder auf Ihrer Website als auch neue, die Sie hochladen. Darüber hinaus bietet es Ihnen viel Kontrolle darüber, wie (und wie stark) Ihre Bilder komprimiert werden.

Kraken.io Bildoptimierer

Nicht zuletzt ist Kraken.io Image Optimizer auch praktisch, um sowohl neue als auch bestehende Medien zu optimieren. Es unterstützt verlustfreie und „intelligente“ verlustbehaftete Komprimierung, wodurch es einfacher wird, qualitativ hochwertige Bilder mit geringeren Dateigrößen zu erzielen.

Vorgestelltes Bild

Das vorgestellte Bild wird nicht in den Hauptteil eines WordPress-Beitrags eingefügt, sondern strukturell in Ihrem gesamten Design verwendet. Es kann beispielsweise als Miniaturansicht neben dem Titel des Beitrags oder in der Kopfzeile angezeigt werden, wenn Sie einen bestimmten Beitrag anzeigen.

Die meisten Themen und Widgets basieren auf vorgestellten Bildern, daher sollten Sie darauf nicht verzichten. Ausgewählte Bilder ermöglichen eine größere Anpassung; Sie haben die Möglichkeit, einzigartige benutzerdefinierte Header-Bilder für bestimmte Beiträge und Seiten anzuzeigen oder Miniaturansichten für spezielle Funktionen Ihres Themas festzulegen.

Sobald Sie sich für die gewünschte Größe Ihres Beitragsbildes entschieden haben, bleibt diese Größe für alle zukünftigen Beitragsbilder festgelegt. Die Größe, die Sie auswählen sollten, hängt vom Thema Ihrer WordPress-Site und dem Layout Ihrer Beiträge ab.

Ausgewählte Bilder sind normalerweise breiter als hoch und reichen von 500 bis 900 Pixel Breite. Es ist auch am besten, ein hochauflösendes Bild zu wählen und keins, das verpixelt ist.

Profi-Tipp: Um die Medien zu steuern, die angezeigt werden, wenn ein Beitrag oder eine Seite auf Facebook oder Twitter geteilt wird, installieren Sie das Yoast SEO-Plugin. Sie können nicht nur den Titel und die Beschreibung anpassen, sondern auch die richtigen Bildgrößen für jeden sozialen Kanal hochladen.

Optimieren Sie Ihre Bilder nach dem Hochladen auf WordPress

Wir empfehlen Ihnen, Ihre Bilder vor dem Hochladen zu optimieren. Wenn dies jedoch nicht möglich ist oder Sie die Bilder optimieren möchten, die sich bereits auf Ihrer Website befinden, können Sie dies dennoch tun. Es gibt einige Methoden, mit denen Sie Ihre Live-Inhalte optimieren können.

Lazy Load-Bilder

Wenn jemand eine Webseite besucht, beginnt normalerweise der gesamte Inhalt zu laden. Das bedeutet, dass es bei einer inhaltsreichen Seite eine Weile dauern kann, bis alles angezeigt wird.

„Lazy Loading“ beinhaltet die Optimierung der Art und Weise, wie Ihre Website Inhalte lädt. Es weist Ihre Website an, sich darauf zu konzentrieren, zuerst den Text, die Bilder und andere Elemente zu laden, die sofort sichtbar sind. Erst danach werden Inhalte geladen, auf die nur durch Herunterscrollen der Seite zugegriffen werden kann. Dies ist eine großartige Möglichkeit, Ihre Website zu beschleunigen und das Erlebnis Ihrer Besucher zu verbessern.

Der einfachste Weg, Ihrer Website Lazy Loading hinzuzufügen, ist ein Plugin wie Lazy Load.

Dies ist ein Tool von WP Rocket, das hilft, das Volumen der Anfragen zu reduzieren, die gleichzeitig an den Webserver Ihrer Website gesendet werden. Es ersetzt sogar Platzhalterbilder für YouTube-Videos, sodass das eigentliche Video nur bei Bedarf geladen wird.

Bilder zwischenspeichern

Eine weitere Möglichkeit, die Geschwindigkeit Ihrer Website zu verbessern, ist das „Caching“. Dies beinhaltet das Speichern einiger Daten Ihrer Website an einem Ort, auf den ein Besucher einfacher und schneller zugreifen kann, häufig entweder auf einem Server eines Drittanbieters, der näher an seinem Standort liegt, oder in seinem Browser.

Es gibt viele Möglichkeiten, das Caching durch Codierung, Plugins und andere Tools zu erreichen. Hier bei WP Engine implementieren wir standardmäßig robustes Caching auf allen unseren Websites. Dies ist vorteilhaft, um die Auswirkungen aller Ihrer Inhalte auf die Seitengeschwindigkeit zu reduzieren, nicht nur Ihrer Bilder.

EXIF-Daten entfernen

EXIF-Daten werden als Teil einer Bilddatei gespeichert und enthalten Informationen darüber, wo und wie ein Bild aufgenommen wurde. Es wird von Kameras automatisch zu Bildern hinzugefügt und ist für Ihre Webdateien im Allgemeinen nicht erforderlich.

Daher kann das Entfernen dieser Daten aus Ihren Bildern Ihre Seiten beschleunigen, obwohl die Auswirkungen wahrscheinlich nicht sehr groß sind. Leider gibt es derzeit keine aktualisierten Plugins, die Ihnen dabei helfen können. Wenn Sie also viele Fotos auf Ihrer Website verwenden und sich Sorgen um EXIF-Daten machen, sollten Sie sich an einen Entwickler wenden, um Hilfe zu erhalten.

Vermeiden Sie Weiterleitungen von Bild-URLs

Ein weiteres Element, das Ihre Seiten verlangsamen kann, ist schließlich, wenn Ihre Bilder Weiterleitungen verursachen. Dies passiert am häufigsten, wenn sie woanders verlinken.

Aus diesem Grund sollten Sie es vermeiden, Bilder aus externen Quellen auf Ihrer Website einzubetten. Speichern und laden Sie stattdessen nach Möglichkeit jedes Bild oder Medienelement direkt auf Ihre Website hoch. Sie sollten auch sicherstellen, dass Ihre Bilder nicht mit irgendetwas verlinkt sind, wie z. B. einer separaten Medienseite.

Bilder für Suchmaschinen optimieren

Das Formatieren von Bildtiteln ist ein weiterer wichtiger Schritt bei der Bildoptimierung. Das bedeutet, dass der Bilddateiname für seinen Inhalt relevant ist. Wenn Sie dies tun, ist es wahrscheinlicher, dass sie in den Suchergebnissen für ähnliche Bilder über Suchmaschinen angezeigt werden.

Dies erhöht die Sichtbarkeit und Zugänglichkeit Ihrer Marke sowie den Traffic auf Ihrer Website, indem die Bilder Ihrer Website häufiger in der Google-Bildsuche aufgeführt werden. Die Bildoptimierung nimmt sehr wenig Zeit in Anspruch und kann einen großen Unterschied im Traffic Ihrer Website bewirken.

Hier sind ein paar zusätzliche Tipps, die Ihren Bildern helfen, einen höheren Rang zu erreichen.

Alt-Text

Alternativtext, auch bekannt als „Alt-Text“ oder „Alt-Tag“, ist ein Attribut, das einem Bild in HTML hinzugefügt wird. Alt-Text hilft Suchmaschinen zu verstehen, worum es in Ihrem Bild geht, indem er beschreibt, was es enthält und was sein Zweck ist.

Google verlässt sich auf Alt-Text, um zu bestimmen, was ein Bild ist, da alles, was es „sieht“, das ist, was im HTML-Tag steht. Wenn Sie aussagekräftigen, beschreibenden Alternativtext für Ihre Bilder verwenden, ist es wahrscheinlicher, dass Ihre Website in den Suchergebnissen angemessen aufgeführt wird.

In WordPress können Sie Ihren Bildern auf zwei Arten Alt-Text hinzufügen. Erstens können Sie es zu Bildern hinzufügen, die in Beiträgen platziert wurden, indem Sie auf das Bild klicken und die Option Bildeinstellungen auf der rechten Seite des Bildschirms verwenden.

Alternativ können Sie einem Bild auch Alt-Text hinzufügen, indem Sie zu Medien > Bibliothek gehen und das gewünschte Bild auswählen. Fügen Sie dann einfach Ihren Alt-Text zum Feld Alternativer Text für dieses Bild hinzu.

Titel-Tags

Titel-Tags ähneln Alt-Tags, aber sie sind für menschliche Leser und nicht für Suchmaschinen-Bots. Eine gute Titel-Tag-Optimierung kann sehbehinderten Benutzern den Zugriff auf Ihre Website erleichtern.

Erstellen Sie XML-Image-Sitemaps

Eine weitere Möglichkeit, Ihre Bilder bei Google hervorzuheben, besteht darin, eine Sitemap zu erstellen und diese einzureichen. Dies ist eine gute Option für Bilder, die nicht von Suchmaschinen gecrawlt werden können.

Wir sprechen zum Beispiel von Bildern, die von JavaScript geladen werden. Sitemaps geben Suchmaschinen mehr Informationen über die auf Ihrer Website verfügbaren Bilder, damit sie Ihre Inhalte besser verstehen und indizieren können.

In WordPress können Ihnen die folgenden Plugins beim Erstellen einer Sitemap helfen:

• Google XML-Sitemaps
• Yoast-SEO
• All-in-One-SEO-Paket
• Udinra All Image Sitemap

Für Nicht-WordPress-Websites gibt es auch Tools, die beim Erstellen einer Sitemap helfen können, darunter Screaming Frog, Dynomapper und mehr. Sobald Sie eine Sitemap erstellt haben, sollten Sie sie über die Webmaster-Tools von Google einreichen.

Bildplatzierung und Bildunterschriften

Lassen Sie uns zu guter Letzt einen Blick auf die Platzierung von Bildmaterial innerhalb eines Blogbeitrags oder einer Webseite werfen. Wo Sie Ihre Bilder in einem Beitrag platzieren, kann einen erheblichen Einfluss darauf haben, wie er bei Google gerankt wird.

Wenn Sie beispielsweise ein Bild näher an Ihren Keyword-Phrasen platzieren, wird es wahrscheinlich besser ranken. Beachten Sie auch, dass das Hinzufügen einer schlüsselwortreichen Bildunterschrift zu Ihrem Bild als Suchtext zählt und zu einer besseren Bild-SEO beitragen kann.

Optimieren Sie Ihre WordPress-Website mit WP Engine

Die Bildoptimierung deckt viele Bereiche ab, wenn es darum geht, Ihre Website zu verbessern. Die Optimierung kann dazu beitragen, die Benutzererfahrung zu verbessern und Ihre Ladezeiten unter der Fünf-Sekunden-Marke zu halten. Hier bei WP Engine verstehen wir den Wert, den die Bildoptimierung für Ihre Website bringt. Aus diesem Grund bieten wir spezialisierte verwaltete WordPress-Hosting-Umgebungen an. Das bedeutet, dass Sie Expertenunterstützung und umfassende Optimierungstools und -ressourcen zur Hand haben!