Wie können Sie Ihre Website beschleunigen, indem Sie Ihre Bilder reparieren?

Nicht optimierte (oder schlecht optimierte) Bilder sind der häufigste Grund für die langsame Ladegeschwindigkeit Ihrer Website.

Vielleicht lädt Ihre Website schnell, aber 39 % der Leute können NOCH aufhören, sich damit zu beschäftigen, wenn die Bilder nicht geladen werden oder zu lange zum Laden brauchen.

Und Bilder machen 68 % des gesamten Seitengewichts aus (was eine Menge ist!).

Daher können wir nicht riskieren, Bilder nicht optimiert zu lassen.

Befolgen Sie also diese schnellen Techniken, um Ihre Bilder zu optimieren und eine schnellere Seitenladegeschwindigkeit sicherzustellen.

Bevor du anfängst…

Überprüfen Sie, ob Bilder wirklich für die langsame Ladegeschwindigkeit Ihrer Website verantwortlich sind oder ob es weitere Probleme gibt.
Verwenden Sie Google PageSpeed ​​Insights, um die Ladegeschwindigkeit Ihrer Website zu analysieren.

Scrollen Sie dann nach unten zu „ Diagnose “ und „ Gelegenheiten “.

Hier können Sie JEDEN Parameter, der Ihre Ladegeschwindigkeit beeinflusst, detailliert analysieren und Verbesserungsmöglichkeiten aufdecken.

Der Bericht erwähnt auch bildbezogene Probleme.

Dies ist der schnellste Weg, um bildbezogene (und andere) Probleme zu finden und zu beheben, die sich auf die Ladegeschwindigkeit Ihrer Website auswirken.

ABER es gibt einen Haken – das Tool kann solche Probleme erst einige Wochen nach dem Hochladen einer Seite finden. Und es ist nicht ratsam zu warten, da die Ladegeschwindigkeit ein Google-Ranking-Faktor ist und Ihre SERP-Rankings sinken könnten, wenn Ihre Seite langsam geladen wird.

Warum also nicht die Bilder vor dem Hochladen optimieren? Schließlich ist Vorbeugen besser als Heilen.

Diese Techniken werden Ihnen GENAU sagen, wie es geht. Lass uns anfangen.

1. Wählen Sie das richtige Bildformat

Websitebesitzer bevorzugen die Verwendung dieser vier Bildformate:

• JPEG (oder JPG – Joint Photographic Experts Group)

Es ist ein komprimiertes Bildformat mit leicht reduzierter Qualität. JPEGs eignen sich am besten für Fotos oder Bilder mit vielen Details und Farben.

Komprimiertes Bild = geringere Dateigröße = schnellere Ladegeschwindigkeit

• PNG (Portable Network Graphics)

Es ist ein unkomprimiertes Bildformat mit höherer Qualität, das für Bilder mit transparentem Hintergrund wie Logos und weniger Farben geeignet ist.

PNGs sind in zwei Formaten verfügbar:

• PNG-8

Es hat eine begrenzte Palette von 256 Farben, aber eine reduzierte Dateigröße, wodurch es schneller geladen werden kann.

• PNG-24

Es hat keine begrenzte Farbpalette; Daher ist es eine schwerere Datei, deren Laden länger dauert.

• GIF (Graphics Interchange Format)

GIFs verwenden eine begrenzte Palette von 256 Farben und gewährleisten gleichzeitig eine verlustfreie Komprimierung. Es eignet sich am besten für animierte Bilder.

GIFs brauchen Zeit zum Laden. Es ist ratsam, PNG-8-Bilder anstelle von GIFs zu verwenden.

• SVG (Skalierbare Vektorgrafiken)

JPEG, PNG und GIF sind Rastergrafiken (aus Pixeln) und SVGs sind Vektorgrafiken (aus Pfaden). SVGs benötigen also keine HTTP-Anfrage, um eine Bilddatei zu laden.

Welches ist das richtige Bildformat für Ihre Website?

Es hängt von Ihrem Zweck ab.

Statistisch gesehen sind PNG und JPEG die beliebtesten Formate, die Websites verwenden. Und sie sind die ideale Wahl aufgrund des Gleichgewichts zwischen Bildqualität und Ladegeschwindigkeit.

2. Ändern Sie die Größe von Bildern, bevor Sie sie hochladen

Wenn Sie Bilder hochladen, ohne ihre Abmessungen zu ändern, sind sie möglicherweise größer als erforderlich.

Damit Ihre Bilder auf Bildschirmgrößen mit unterschiedlichen Abmessungen passen, muss der Browser die Größe Ihrer Bilder anpassen, was Zeit kostet und die Ladegeschwindigkeit Ihrer Website beeinträchtigt.

Die Größenanpassung vor dem Hochladen hilft Ihren Bildern, in den angegebenen Bereich auf dem Bildschirm zu passen und in den Browsern schneller geladen zu werden.

Nun, die optimale Größe von Bildern variiert von Website zu Website. Dies hängt vom Thema oder Design Ihrer Website ab.

Mit den integrierten Prüfwerkzeugen, über die die meisten Browser verfügen, können Sie die genaue Größe der auf Ihrer Website verwendeten Bilder ermitteln.

Wenn Sie die Größe von Bildern überprüfen möchten, die auf der Website Ihres Konkurrenten verwendet werden, können Sie dies auf die gleiche Weise tun.

Untersuchen Sie einfach die Elemente einer Webseite, klicken Sie auf das Bild, und der Browser zeigt Ihnen die genaue Bildgröße an.

Die Bildgrößen können je nach Zweck variieren, z. B. Banner, Pop-ups, Schaltflächen usw. Hier sind einige beliebte Bildgrößen (in Pixel), die von den meisten Websites verwendet werden:

Sie können sie als Referenz für die Größenänderung von Bildern behalten, die Sie auf Ihre Website hochladen.

Die Breite und Höhe von Blog-Beiträgen oder anderen Inhaltsbildern sollte 1500 px bzw. 1000 px nicht überschreiten.

Es gibt mehrere Möglichkeiten, die Größe Ihrer Bilder effektiv zu ändern:

• Mit Photoshop

Photoshop ist eine spezielle Bildbearbeitungssoftware. Es behält die Details und die Schärfe von Bildern bei der Größenänderung bei.

Wählen Sie Bild > Bildgröße aus . Ein Dialogfeld wird angezeigt. Es zeigt Ihnen die Größe des aktuellen Bildes.

Geben Sie Ihre erforderlichen Abmessungen (Breite und Höhe) ein, um die neue Bilddateigröße anzuzeigen. Klicken Sie auf OK, und die Größenänderung ist abgeschlossen.

Sie können die Datei im gewünschten Format speichern und auf Ihre Website hochladen.

• Malen verwenden

Windows Paint ist eine einfachere Alternative zum Ändern der Größe von Bildern vor dem Hochladen.

Öffnen Sie das Bild, dessen Größe Sie ändern möchten, in Paint. Wählen Sie Größe ändern aus den Optionen in der Symbolleiste.

Geben Sie die neuen Abmessungen gemäß Ihrer Anforderung ein. (Paint behält standardmäßig das Seitenverhältnis bei.) Klicken Sie auf OK und ändern Sie die Größe Ihres Bildes.

Speichern Sie Ihre Datei in einem geeigneten Format und laden Sie sie dann auf Ihre Website hoch.

• Verwendung des WordPress-Plugins

Wenn Sie WordPress verwenden, können Sie ein Plugin wie Imsanity verwenden, um die Größe Ihrer Bilder zu ändern.

Das Plugin passt die Größe eines Bildes, das die von Ihnen festgelegten Größenbeschränkungen überschreitet, automatisch an und ersetzt es durch das hochgeladene Bild.

3. Komprimieren Sie ALLE Bilder

Die Komprimierung minimiert die Dateigröße in Byte, ohne die Qualität Ihrer Bilder zu beeinträchtigen.

Es hilft, die Übertragung von Bildern zu beschleunigen und ihren Speicherplatz auf den Servern zu reduzieren.

Stellen Sie also sicher, dass Sie jedes Bild komprimieren, bevor Sie es auf Ihre Website hochladen.

Es gibt zwei Möglichkeiten, die Dateigröße Ihres Bildes zu verkleinern:

• Verlustbehaftet

Die verlustbehaftete Komprimierung reduziert die Dateigröße erheblich. Einige Pixeldaten und Bildmetadaten wie Datum, Auflösung, Abmessungen, Farbe, Gerät usw. werden entfernt.

Die Bildqualität wird verringert, aber das menschliche Auge kann nicht zwischen unkomprimierten und komprimierten Bildern unterscheiden.

• Verlustfrei

Die verlustfreie Komprimierung bietet relativ größere Dateigrößen. Die Pixeldaten werden nicht verändert, aber die Details in den Metadaten entfernt. Es gibt also keinen Verlust an Bildqualität.

Sie können auch die Komprimierungsstufe für Ihre Bilder auswählen.

Je höher die Komprimierungsstufe (oder der Prozentsatz), desto schlechter die Qualität…

…und je kleiner die Dateigröße.

Jetzt müssen Sie sich fragen, wann Sie welche Art von Komprimierung verwenden sollten.

Entscheiden Sie sich für verlustfreie Komprimierung, wenn Sie bei der Qualität keine Kompromisse eingehen können. Sie können die geeignete Komprimierungsstufe nach Bedarf auswählen. Es funktioniert am besten für Fotos und Website-Bilder.

Wenn die Qualität jedoch von geringerer Bedeutung ist, entscheiden Sie sich für eine verlustbehaftete Komprimierung. Sie können es jederzeit für Screenshots oder ähnliche Bilder verwenden.

Hier sind einige Web-Tools, die eine effiziente Bildkomprimierung bieten:

• TinyPNG
• Kraken.io
• JPEGmini
• Trimage

Wenn Sie WordPress verwenden, finden Sie hier einige beliebte Plugins zur Bildkomprimierung:

• Schmusen
• Optimol
• EWWW Bildoptimierer
• TinyPNG
• Kraken.io

4. Verwenden Sie CDNs für Bilder (und andere Inhalte)

Ein CDN ist ein geografisch verteiltes Netzwerk von Servern, das eine schnellere Bereitstellung von Inhalten im Web ermöglicht. Es verbessert die Leistung und Geschwindigkeit der Websites und bietet eine großartige Benutzererfahrung.

Die Verwendung eines CDN für Ihre Bilder (und andere Inhalte) beschleunigt Ihre Website auf zwei Arten.

Erstens werden Ihre Bilder (standardmäßig) optimiert, um weniger Speicherplatz auf den Speicherservern zu belegen.

Und zweitens werden Ihre Bilder auf mehreren Servern an verschiedenen geografischen Standorten gespeichert.

Wenn also Benutzer Ihre Website besuchen, müssen sie keine Bilddateien von Ihrem Ursprungsserver laden. Stattdessen können sie sie vom nächstgelegenen Server Ihres CDN herunterladen.

Die Verwendung eines CDN hilft, die Ladegeschwindigkeit Ihrer Seite zu verbessern, da die Wissenschaft die Datenübertragungsrate immer noch begrenzt. Die Entfernung zwischen Ihrem Ursprungsserver und dem Standort des Benutzers wirkt sich auf die Datenübertragungsrate aus.

Wenn sich ein Benutzer weit entfernt von Ihrem Ursprungsserver befindet, wird er viel Zeit damit verbringen, die Bilder (und andere Inhalte) herunterzuladen. Und selbst wenn das Laden ein paar Sekunden länger dauert, kehren die Benutzer von Ihrer Website zurück.

Aber mit einem CDN können Benutzer die Bilder vom nächsten Netzwerkserver herunterladen. Es geht schneller, da sich die Entfernung zwischen dem Netzwerkserver und dem Standort des Benutzers erheblich verringert.

Sie müssen also ein CDN für Bilder verwenden.

Es gibt mehrere hochwertige CDNs, die kostenlos im Internet verfügbar sind. Sie können jede davon verwenden und ein schnelleres Laden von Bildern erreichen.

Hier sind einige beliebte und effiziente CDNs für Ihre Hilfe:

• Cloudflare-CDN
• Amazon CloudFront
• Google Cloud-CDN
• Imperva-CDN
• CDN77.com
• Gumlet
• Schnell
• CacheFly
• Lack-Software
• Bunny.net
• 5centscdn

5. Browser-Caching aktivieren

Jedes Mal, wenn Benutzer Ihre Website besuchen, müssen sie alle Website-Ressourcen wie Bilder, HTML- und CSS-Dateien, JavaScript-Dateien, Mediendateien, PDFs usw. vom Server herunterladen.

Wenn Sie das Browser-Caching aktivieren, weisen Sie die Webbrowser an, die Ressourcen Ihrer Website herunterzuladen und im temporären lokalen Speicher zu speichern.

Sie können den Webbrowsern auch Folgendes mitteilen:

• Die Ressourcen, die sie zwischenspeichern und nicht zwischenspeichern sollten.
• Die Zeit, für die sie eine bestimmte zwischengespeicherte Ressource behalten sollten.

Wenn Benutzer also Ihre Website erneut besuchen, können sie die Ressourcen aus dem lokalen Speicher und nicht vom Server herunterladen.

Auf diese Weise werden Ihre Webseiten für wiederkehrende Besucher schneller geladen.

Schauen Sie sich die leicht erreichbare Verbesserung der Seitenladegeschwindigkeit an

mit Browser-Caching:

Es ist mehr als 100 mal schneller.

Die meisten Tools zum Testen der Seitengeschwindigkeit schlagen aus demselben Grund vor, das Browser-Caching zu nutzen.

Da das Laden von Bildern auf einer Website die maximale Zeit in Anspruch nimmt, erhöht die Aktivierung des Cachings für Bilder die Ladegeschwindigkeit Ihrer Website erheblich.

Sie können das Browser-Caching für die Bilder Ihrer Website auf zwei Arten nutzen:

• Verwendung von .htaccess

Es ist die am häufigsten verwendete Methode zur Implementierung von Browser-Caching. Sie können Ihrer .htaccess-Datei ein paar Zeilen Browser-Caching-Code hinzufügen, um sie zu aktivieren.

Definieren Sie im Code den Typ der Ressource, die zwischengespeichert werden muss, und die Dauer, für die sie im lokalen Speicher bleiben muss. (Nach Ihren Bedürfnissen)

Das ist alles, damit Ihre Bilder (und andere Ressourcen) für Benutzer schneller geladen werden.

• Verwenden von Plugins (für WordPress-Sites)

Plugins automatisieren den Prozess, indem sie den Browser-Caching-Code in die .htaccess-Datei einfügen. Möglicherweise finden Sie bei ihnen jedoch nicht viele Personalisierungsoptionen.

Hier sind einige Plugins, um deine WordPress-Seite zu beschleunigen, indem du das Browser-Caching aktivierst:

• W3 Gesamtcache
• WP Schnellster Cache
• WP Cloudflare Super Page-Cache
• WP-Super-Cache
• Hyper-Cache
• Comet-Cache

Damit können Sie die Ladezeit Ihrer Bilder erheblich verkürzen.

Bonus: Fügen Sie Alt-Text zu Ihren Bildern hinzu

Alternativtext ist eine kurze Beschreibung eines Bildes, die deutlich macht, was das Bild zeigt.

Es ist aus drei Gründen wichtig:

• Browser zeigen den Alt-Text anstelle von Bildern an, wenn Benutzer eine langsame Internetverbindung verwenden und das Laden von Bildern einige Zeit in Anspruch nimmt.
• Screenreader lesen den Alt-Text laut vor, damit sehbehinderte Benutzer verstehen, worum es in dem Bild geht.
• Suchmaschinen verwenden Alt-Text, um den Inhalt einer Seite besser zu verstehen und entsprechend einzustufen.

Jetzt ist das Schreiben von Alt-Text für Bilder vielleicht sehr einfach. Sie müssen darüber nachdenken, wie Sie Ihrem Kind ein Bild beschreiben würden, und Sie haben eine großartige alternative Beschreibung in der Hand.
Der richtige Alt-Text für das unten angegebene Bild wäre beispielsweise: eine Katze, die in die Luft springt.

Es beschreibt eindeutig das Bild. Benutzer können sich ein Bild davon machen, worum es bei dem Bild geht, auch wenn sie es nicht sehen.

Daher müssen Sie allen Bildern, die Sie auf Ihre Website hochladen, Alt-Text hinzufügen.

Aber wenn Sie bereits Bilder hochgeladen haben, können Sie mit dem kostenlosen Website-Analysator ganz einfach diejenigen ohne Alt-Text finden.

Es analysiert alle Bilder auf Ihrer Website und zeigt die Gesamtzahl der Bilder mit einem fehlenden Alt-Attribut an.
Wenn Sie auf Mehr anzeigen klicken, werden die URLs der Bilder angezeigt, die Sie reparieren müssen.

Sie können den Alt-Text dieser Bilder optimieren und die Benutzererfahrung Ihrer Website verbessern.

Außerdem werden Sie feststellen, dass Ihre Bilder in den Suchergebnissen von Google Bilder besser abschneiden. Das liegt daran, dass Alt-Text einer der wichtigsten SEO-Ranking-Faktoren für Bilder ist.

Also eine Win-Win-Situation für Sie!

Erhöhen Sie die Geschwindigkeit Ihrer Website, indem Sie Bilder optimieren

Da die Nutzung des mobilen Internets weiter zunimmt, blicken wir auf noch schnellere und reibungslosere Websites.

Abgesehen davon ist es ein Fehler, Ihre Bilder nicht optimiert zu lassen, den Sie niemals machen sollten. Wenn Ihre Geschwindigkeit langsam ist, verwenden Sie die oben genannten Techniken, um Ihre Bilder zu optimieren.

Wenn Sie Ihre Website erneut mit Google PageSpeed ​​Insights testen, bin ich mir ziemlich sicher, dass Sie eine große Verbesserung der Geschwindigkeit feststellen werden!

Haben Sie eine der Techniken, die ich erwähnt habe, zum Laufen gebracht? Welche ist Ihrer Meinung nach die effektivste? Lass mich wissen was du denkst.