Möchten Sie erfahren, wie Sie Bilder für das Web optimieren?
Die Bildoptimierung ist ein entscheidender Teil der Website-Verwaltung, der von neuen Blog- und Websitebesitzern oft übersehen wird.
In diesem Beitrag zeigen wir Ihnen, wie Sie Bilder für Ihre Website optimieren, wobei wir uns hauptsächlich darauf konzentrieren, wie Sie dies mit kostenlosen Tools erreichen.
Warum Sie Bilder für das Web optimieren müssen
Die Optimierung von Bildern für das Web ist aus mehreren Gründen wichtig, nämlich wegen der Benutzererfahrung und der Suchmaschinenoptimierung.
Alle Webseiten bestehen aus Dateien unterschiedlicher Größe, die alle zur Gesamtgröße einer Seite beitragen. Je größer eine Seite ist, desto länger dauert das Laden.
Bilder tragen erheblich zur Gesamtgröße einer Seite bei. Wenn Sie nicht auf die Bildgrößen achten, dauert das Laden Ihrer Seiten länger.
Dies führt zu einer schlechten Benutzererfahrung und in der Folge zu höheren Absprungraten.
Nicht nur das, Seitengeschwindigkeit und Leistung Sind Ranking-Faktoren, sodass Ihre Site in den Suchmaschinen-Rankings immer weiter nach unten rutscht, was zu weniger organischem Verkehr führt.
Glücklicherweise ist die Bildoptimierung einfach und kostengünstig, wenn Sie die richtigen Bildoptimierungstools verwenden.
So optimieren Sie Bilder für Webseiten mit kostenlosen Tools
Lassen Sie uns über Tools sprechen, mit denen Sie Bilder auf folgende Weise optimieren können:
- Komprimieren von Bildern vor dem Hochladen.
- Komprimieren von Bildern beim Hochladen.
- Komprimieren bereits hochgeladener Bilder.
Komprimieren von Bildern vor dem Hochladen
Wenn Sie das Bild selbst aufgenommen oder erstellt haben, sollte Ihre Bildbearbeitungssoftware über Komprimierungseinstellungen verfügen, die Sie anpassen können, bevor Sie das Endergebnis exportieren.
Beachten Sie jedoch, dass die Bildkomprimierung tut zu einer schlechteren Bildqualität führen.
Das ultimative Ziel der Bildkomprimierung besteht darin, die Größe einer Bilddatei zu reduzieren, ohne die Qualität des Bildes selbst zu verringern.
Informieren Sie sich vor dem Exportieren über Ihre Bildbearbeitungssoftware, wenn Sie dies selbst tun möchten.
Wenn nicht, verwenden Sie ein Bildkomprimierungstool, das Bilder ohne Beeinträchtigung der Bildqualität komprimiert.
Ein solches Werkzeug ist WinzigesPNG. Dieses Tool komprimiert kostenlos bis zu 20 PNG-, JPEG- oder WebP-Dateien gleichzeitig, solange ihre Gesamtgröße kleiner als 5 MB ist.
Optimizilla ist eine weitere großartige Option. Es komprimiert JPEG-, GIF- und PNG-Bilder.
Jetzt komprimieren Und JPEG-Optimierer sind auch großartig. Sie komprimieren PNG-, GIF- und JPEG-Bilder. Sie können jedoch auswählen, wie stark ihre Tools Bilder komprimieren sollen.
Dies ist zwar eine nette Funktion, kann die Bildkomprimierung für Anfänger jedoch etwas komplizierter machen. Glücklicherweise können Sie diese Tools problemlos in ihrer Standardkonfiguration belassen.
Kurzes Pixel ist eine fantastische Option für größere Projekte. Sie können damit bis zu 50 JPG-, PNG- oder GIF-Dateien kostenlos komprimieren, solange ihre Gesamtgröße weniger als 10 MB beträgt.
Sie können außerdem eine Komprimierungsstufe auswählen.
Komprimieren von Bildern beim Hochladen
Glücklicherweise gibt es Ist Eine Möglichkeit zur Automatisierung der Bildkomprimierung, und zwar indem die Bilder beim Hochladen auf Ihre Website komprimiert werden.
Ein Plugin wie NitroPack wendet die Bildkomprimierung auf Ihrer gesamten Site an und konvertiert Bilder gleichzeitig in WebP für eine bessere Leistung.
Die Hauptfunktion von NitroPack besteht darin, Seiten-Caching und Browser-Caching auf Ihre Website anzuwenden, um deren Leistung erheblich zu verbessern.
Wie effektiv das Plugin in dieser Hinsicht ist, können Sie in unserem Testbericht zu NitroPack nachlesen. Darin sind Daten aus realen Tests enthalten.
Die Bildoptimierung ist eine sekundäre Funktion des Plugins, ist aber in den kostenlosen Plänen verfügbar.
Sie können eine Bildqualität wählen, die das Plugin bei der Komprimierung der Bilder beibehalten soll. Google empfiehlt eine Bildqualität von 80 %, daher ist diese Einstellung bei NitroPack standardmäßig eingestellt.
Dies bedeutet, dass Sie NitroPack hinsichtlich der Bildkomprimierung problemlos installieren können, ohne es zu konfigurieren.
Wie Sie sehen, implementiert das Plugin auch Lazy Loading.
Wenn Sie den Growth-Plan oder höher haben, kann auch eine adaptive Bildgröße implementiert werden. Diese Funktion passt die Größe größerer Bilder an, sodass sie in die Containerabmessungen Ihrer Site passen, ohne die Bildqualität zu beeinträchtigen.
Sie sollten sich jedoch angewöhnen, die Bildabmessungen zu optimieren, bevor Sie sie auf Ihre Site hochladen. Dadurch wird die Bildoptimierungsfunktion von NitroPack wesentlich effektiver.
Zu den anderen beliebten Bildoptimierungs-Plugins, die die von Ihnen auf WordPress hochgeladenen Bilder automatisch komprimieren, gehören EWWW Image Optimizer, Smush, ShortPixel, Optimole und TinyPNG.
Wenn Sie eine All-in-One-Plattform wie Shopify oder Wix verwenden, stellen Sie möglicherweise fest, dass diese die Bildkomprimierung für Sie implementiert.
Dies bedeutet, dass Sie sich weder um die Komprimierung der Bilder vor dem Hochladen noch um die Installation von Add-Ons, Plug-Ins, Tools oder Apps kümmern müssen.
Komprimieren alter Bilder
Wenn Sie eine WordPress-Site haben, komprimieren NitroPack und viele der anderen genannten Plugins Bilder, die bereits auf Ihre Site hochgeladen wurden.
Wenn Ihre älteren Bilder relativ groß sind, also deutlich größer als 1000 x 1000 Pixel, möchten Sie möglicherweise alle Bilder offline skalieren und ersetzen.
Sie können sie beliebig komprimieren, aber wenn sie von Anfang an schon recht groß sind, wird eine Komprimierung um 20 % wahrscheinlich nicht viel bewirken.
Nachfolgend finden Sie Richtlinien, mit denen Sie die Effektivität Ihrer Bildoptimierungsbemühungen messen können. Befolgen Sie diese, um zu bestimmen, ob Sie die Größenanpassung aller Ihrer Bilder durchführen müssen.
Sie können auch einige der anderen unten aufgeführten Tipps zur Bildoptimierung ausprobieren.
Weitere Möglichkeiten zum Optimieren von Bildern für Webseiten
Verwenden Sie den richtigen Bilddateityp
Es gibt zwei Hauptdateitypen, die Sie für Webseiten verwenden sollten: JPEG (oder JPG) und PNG.
Im Folgenden erfahren Sie, wann Sie was verwenden:
- JPEG – Verwenden Sie diesen Dateityp für Fotos mit realen Motiven sowie Bilder mit tiefen, satten Farben.
- PNG – Verwenden Sie diesen Dateityp für Screenshots, Bilder mit viel Text, Bilder mit transparentem Hintergrund, Grafiken und Infografiken sowie flache Illustrationen.
Es gibt auch den Dateityp GIF, der sich hervorragend für animierte Bilder eignet, aber für alles andere empfehlen wir, bei einem der beiden anderen Formate zu bleiben.
Was ist WebP?
WebP ist ein neueres Bildformat mit der Möglichkeit zur verlustfreien und verlustbehafteten Komprimierung, die effektiver als PNG und JPEG ist, aber dennoch reichhaltig und hochwertig aussieht.
Gängige Browser und WordPress unterstützen das Dateiformat WebP, allerdings wird es nicht so umfassend unterstützt wie JPEG und PNG. Es dauert also einige Zeit, bis das neuere Format weltweit angenommen wird.
Sie können Ihre Bilder trotzdem mit einem WordPress-Plugin in WebP konvertieren und so eine bessere Leistung erzielen.
Wenn Sie selbst Bilder erstellen, sollten Sie diese als WebP exportieren können.
Komprimieren Sie Bilder, bevor Sie sie exportieren
Wenn Sie Ihre Bilder selbst erstellen, informieren Sie sich über die von Ihnen verwendete Bearbeitungssoftware, ob und wie Bilder komprimiert werden können.
Jede Bearbeitungssoftware ist anders und unterschiedliche Bilder haben unterschiedliche Anforderungen. Daher ist es am besten, ein wenig zu recherchieren und herumzuprobieren, bis Sie einen Bildbearbeitungsprozess finden, der für Ihre Website optimiert ist.
Optimierte Bildabmessungen verwenden
Wenn Sie Bilder in WordPress hochladen, erstellen WordPress und Ihr Design mehrere Versionen davon, die reaktionsschnell genug sind, um ihre Größe automatisch an die Bildschirmgröße Ihres Benutzers oder die Containerabmessungen in Ihrem Design anzupassen.
Dies bedeutet, dass Sie Ihre Bilder größtenteils in der Größe hochladen können, in der Sie sie erstellt haben, solange sie nicht viel größer sind als die Breite des Containers, in den Sie sie hochladen.
Sehen Sie in der Dokumentation Ihres Designs nach oder wenden Sie sich an den Entwickler Ihres Designs, wenn Sie die optimale Bildgröße für Dinge wie vorgestellte Bilder, Blogbilder, Kopfzeilenbilder usw. erfahren möchten.
Das Gesamtziel besteht hier darin, Bildgrößen zu verwenden, die nur geringfügig größer sind als die Containerbreite Ihres Designs. Dies führt zu kleineren Bildern, was wiederum zu kleineren Bilddateien führt, die Ihren Webseiten nicht zu viel Gewicht verleihen.
Dadurch können Sie auch die Effektivität Ihres Bildoptimierungstools steigern.
Lazy Load-Bilder
Ein Grund für das langsame Laden von Webseiten liegt darin, dass sie so konzipiert sind, dass für jeden einzelnen Benutzer, der sie besucht, alles geladen wird.
Dies bedeutet, dass, wenn Sie 12 Bilder auf einer Seite haben, der Browser Ihres Besuchers versucht, alle 12 zu laden, selbst wenn sich Ihr Besucher noch ganz oben auf der Seite befindet.
Lazy Loading ist eine Funktion, die Sie Ihren Bildern hinzufügen können, um das Laden dieser Bilder zu verhindern, bis sie im Ansichtsfenster des Browsers Ihres Besuchers sichtbar sind.
Mit anderen Worten verhindert Lazy Loading, dass Bilder auf Ihrer Site geladen werden, bis Ihr Besucher zu ihnen scrollt.
WordPress tut Lazy Loading ist nativ verfügbar, aber Ihr Design muss diese Funktionalität nutzen.
Die effektivste Möglichkeit, Lazy Loading zu implementieren, ist die Verwendung eines Plugins zur Leistungsoptimierung, beispielsweise NitroPack oder WP Rocket.
Diese Plugins optimieren Ihre Site in vielerlei Hinsicht.
Implementieren Sie Caching auf Ihrer Site
Das Zwischenspeichern von Seiten ist eine unglaublich nützliche Methode, um das Laden von Bildern auf Ihrer Site unabhängig von ihrer Größe zu beschleunigen.
Beim Caching werden Bilder und Ressourcen im Browser Ihres Besuchers gespeichert, sodass gespeicherte Inhalte wie Bilder bereits verfügbar sind, wenn dieser weitere Seiten aufruft oder bereits durchsuchte Seiten erneut besucht.
Das Endergebnis ist eine Seite, die viel schneller geladen wird als zuvor.
Viele moderne Caching-Lösungen ermöglichen auch Funktionen wie das Vorladen und Vorabrufen zwischengespeicherter Inhalte, die den nächsten Schritt Ihres Besuchers vorhersehen und eine zwischengespeicherte Version Ihrer Webseite herunterladen, bevor der Besucher sie überhaupt besucht, sodass sie schneller geladen wird.
NitroPack ist eine der besten verfügbaren Caching-Lösungen für WordPress und OpenCart. Es funktioniert auch für Magento und ist speziell für das beliebteste E-Commerce-Plugin von WordPress, WooCommerce, optimiert.
Speziell für WordPress bieten bestimmte Hosts ihre eigene Caching-Lösung an. Einige verwaltete WordPress-Hosts wie WP Engine und Kinsta erlauben grundsätzlich keine externen Caching-Plugins. WP Rocket ist jedoch bei beiden die Ausnahme.
Verwenden Sie ein Content Delivery Network
Durch das Zwischenspeichern von Seiten wird vor allem die Leistung für Besucher verbessert, die andere Seiten Ihrer Website aufrufen oder dieselben Webseiten erneut aufrufen.
Ein Content Delivery Network (CDN) kann Bilder für alle Benutzer viel schneller laden, unabhängig davon, wo auf der Welt sie sich befinden.
Mit einem CDN speichern Sie Bilder auf Edge-Servern, die auf der ganzen Welt verteilt sind. Wenn ein Benutzer Ihre Webseite besucht, wird dieser Inhalt vom nächstgelegenen Edge-Standort und nicht von Ihrem eigenen Webserver bereitgestellt.
Dadurch wird Ihr Webserver entlastet und die Seite wird schneller geladen.
NitroPack bietet ein CDN, das in allen Tarifen verfügbar ist, auch im kostenlosen Tarif. Es ist außerdem vorkonfiguriert, sodass Sie nur das Plugin installieren und Ihre Website damit verbinden müssen.
Das CDN von NitroPack wird von Cloudflare betrieben, einer der leistungsstärksten verfügbaren CDN-Lösungen für das Web.
Es verwendet AWS, eine weitere leistungsstarke CDN-Lösung, als Fallback, sodass Sie Inhalte immer von einem Edge-Standort bereitstellen, selbst wenn es bei Cloudflare zu einem Ausfall kommt.
So messen Sie die Effektivität der Bildoptimierung
Sobald Sie mit der Bildoptimierung begonnen haben, können Sie auf verschiedene Weise die Effektivität Ihrer Bemühungen messen.
Für den Anfang können Sie ein SEO-Tool wie SE Ranking verwenden, um Ihre Rankings im Laufe der Zeit zu überwachen.
Sie können auch Leistungsmetriken für Ihre Top-Seiten aufzeichnen, bevor Und nachdem Sie die Bildoptimierung implementiert haben.
Verwenden Sie Ihre Homepage sowie die drei am häufigsten besuchten Seiten Ihrer Website und führen Sie sie durch Pingdom, GTmetrix und Google PageSpeed Insights.
Für Pingdomgeben Sie die URL Ihrer Homepage in die Leiste ein und wählen Sie einen Serverstandort, der dem Aufenthaltsort Ihrer Zielgruppe am nächsten ist.
Sobald das Tool Ihre Seite analysiert hat, notieren Sie sich die folgenden Kennzahlen Vor Sie führen eine Bildoptimierung durch:
- Leistungsbewertung**
- Seitengröße*
- Ladezeit*
- Anfragen*
*Sie möchten, dass dieser Messwert niedriger ist.
**Sie möchten, dass dieser Messwert höher ist.
Wenn Sie etwas weiter nach unten scrollen, merkt sich Pingdom auch, wie viel von der Größe Ihrer Seite und der Anzahl der Anfragen auf Bilder entfallen. Notieren Sie sich auch diese Kennzahlen. Ihr Ziel ist es, sie zu senken.
Für GTmetrixnotieren Sie sich die folgenden Kennzahlen:
- GTmetrix-Qualität**
- Leistung**
- Struktur**
- Vollständig geladene Zeit*
- Zeit bis zur Interaktivität*
*Sie möchten, dass dieser Messwert niedriger ist.
**Sie möchten, dass dieser Messwert höher ist.
Wenn Sie auf Ihrer Ergebnisseite auf GTmetrix wie bei Pingdom etwas weiter nach unten scrollen, finden Sie Bildmetriken basierend auf der Gesamtgröße Ihrer Seite und der Anzahl der Anfragen.
Google PageSpeed Insights ist das wichtigste Tool auf dieser Liste, da es Ihnen Einblick in einige der Daten gewährt, die Google bei der Bewertung Ihrer Seiten durch seine Webcrawler heranzieht.
Wenn Sie das Tool verwenden, wechseln Sie zur Registerkarte „Desktop“ und notieren Sie sich die folgenden Messwerte:
- Größtes inhaltsreiches Gemälde*
- Interaktion zum nächsten Anstrich*
- Kumulative Layoutverschiebung*
- Erstes zufriedenes Gemälde*
- Erste Eingabeverzögerung*
- Zeit bis zum ersten Byte*
*Sie möchten, dass dieser Messwert niedriger ist.
Sie können auch einfach die Leistungswerte aufzeichnen, die Google PageSpeed Insights für Mobilgeräte und Desktops bereitstellt, wenn Sie die Daten von Google auf einfachere Weise aufzeichnen möchten.
Durch das Testen der oben aufgeführten Messwerte können Sie jedoch möglicherweise leichter Leistungsprobleme ermitteln, die über die Bildoptimierung hinausgehen.
Die nächsten Schritte
Sie sollten alle diese Kennzahlen inzwischen in einer Tabelle oder einem Dokument für Ihre Homepage gespeichert haben.
Gehen Sie in Ihre Analysen und notieren Sie sich die Absprungrate Ihrer Homepage. Ihr Ziel ist es, diese Kennzahl zu senken.
Hier ist eine Zusammenfassung aller Kennzahlen, deren Erfassung wir empfehlen:
- Pingdom
- Leistungsbewertung**
- Seitengröße*
- Ladezeit*
- Anfragen*
- Gesamtgröße der Bilddatei (plus Prozentsatz der Gesamtgröße Ihrer Seite)*
- Gesamtzahl der bildbasierten Anfragen (plus Prozentsatz der Gesamtanfragen Ihrer Seite)*
- GTmetrix
- GTmetrix-Qualität**
- Leistung**
- Struktur**
- Vollständig geladene Zeit*
- Zeit bis zur Interaktivität*
- Gesamtbildgröße*
- Prozentsatz der Anfragen, die auf Bildern basieren*
- Google PageSpeed Insights
- Größtes inhaltsreiches Gemälde*
- Interaktion zum nächsten Anstrich*
- Kumulative Layoutverschiebung*
- Erstes zufriedenes Gemälde*
- Erste Eingabeverzögerung*
- Zeit bis zum ersten Byte*
- Analytics (wie Google Analytics oder Clicky)
*Sie möchten, dass dieser Messwert niedriger ist.
**Sie möchten, dass dieser Messwert höher ist.
Notieren Sie diese Kennzahlen auch für Ihre drei am häufigsten besuchten Webseiten.
Nachdem Sie die Bildoptimierung implementiert haben, führen Sie diese vier Webseiten erneut durch diese Tools und zeichnen Sie alle Messwerte auf.
Vergleichen Sie die Ergebnisse vor und nach der Bildoptimierung, um zu sehen, ob sich die Gesamtleistung Ihrer Site verbessert hat und ob Sie die Gesamtgröße jeder Seite reduziert haben.
So optimieren Sie Bilder für SEO
Da Bilder einen so großen Einfluss auf die Leistung haben und die Leistung wiederum einen so großen Einfluss auf die Suchmaschinenoptimierung (SEO) hat, hielten wir es für wichtig, einige Tipps zur Optimierung von Bildern für Suchmaschinen weiterzugeben.
Dies sind unsere wichtigsten Tipps zu diesem Aspekt der Bildoptimierung:
- Verwenden Sie kurze, aber aussagekräftige Namen für Ihre Bilder.
- Fügen Sie Ihren Bildern einen alternativen Text hinzu, der mit dem Namen des Bildes identisch oder genauso kurz und beschreibend ist.
- Verwenden Sie Bilder, die Ihre Marke oder den Ton Ihrer Website repräsentieren.
- Beziehen Sie Ihre Bilder immer von hochwertigen Stock-Fotografie-Websites.
- Erstellen Sie Grafiken und Infografiken für Ihre Website.
- Verwenden Sie die Google Search Console, um defekte Bilder zu erkennen.
Abschließende Gedanken
Das Erstellen optimierter Bilder für Ihre Website muss nicht schwierig sein.
In den meisten Fällen können Sie eine Lösung wie NitroPack installieren, Ihre Website damit verbinden und fertig.
NitroPack komprimiert Ihre Bilder, speichert und stellt sie über ein CDN bereit und passt ihre Größe sogar so an, dass sie zur Containerbreite Ihres Designs passen.
Es kann auch wichtig sein, zu wissen, wie man Bilder selbst für das Web optimiert. Dabei geht es meist darum, sie in kleineren Abmessungen zu speichern und sie selbst mit Tools von Drittanbietern zu komprimieren.
Lesen Sie unseren Leitfaden zu den Auswirkungen der Seitengeschwindigkeit auf die SEO, um mehr darüber zu erfahren, warum Sie sich über Dinge wie die Bildoptimierung Gedanken machen sollten.
