Für viele Unternehmer und Vermarkter sind visuelle Elemente für ihr Geschäft unerlässlich. Bilder können einen enormen Einfluss sowohl auf die Benutzer als auch auf die Leistung einer Website haben, weshalb das Beherrschen der Bildoptimierung für das Wohlbefinden Ihrer Website unerlässlich ist.
Was genau ist Bildoptimierung und wie optimiert man Bilder für Websites? Wir teilen Ihnen alle notwendigen Schritte mit, die Sie ausführen müssen, um sicherzustellen, dass Ihre Bilder reibungslos geladen werden.
In dieser Zusammenfassung führen wir Sie durch die folgenden Themen:
Wenn Sie Bilder optimieren, reduzieren Sie deren Größe, ohne die Bildqualität zu gefährden. Und wenn Sie die Größe Ihrer Dateien reduzieren, werden Ihre Seiten schneller geladen. Dies ist sowohl für Ihre SEO als auch für Ihre Besucher wichtig. Je schneller Ihre Inhalte vollständig geladen werden, desto geringer ist die Absprungrate. Eine andere Sache, die Sie bei Bildern beachten sollten, ist die Notwendigkeit einer guten Auflösung, was qualitativ hochwertige Bilder bedeutet. Das Erhöhen der Auflösung eines Bildes mit Werkzeugen wie Photoshop ist ziemlich einfach, daher müssen Sie entschuldigen, dass Sie daran gespart haben. Aber kehren wir heute zu unserem Thema zurück, der Bildoptimierung für Geschwindigkeitszwecke.
Vor etwa einem Jahrzehnt hat Google beschlossen, die Geschwindigkeit der Website in seine relevanten Ranking-Faktoren aufzunehmen. Einer ihrer Webmaster, John Mueller, schrieb bereits 2016, dass Das Laden von Websites sollte weniger als 2-3 Sekunden dauern, und das ist bis heute aktuell.
Im Laufe der Zeit hat Google sogar Tools entwickelt wie Googles PageSpeed Insights, um Nutzern zu helfen, die Geschwindigkeit ihrer Website zu bewerten. Unzählige andere Tools dienen dem gleichen Zweck, zB Pingdom, GTmetrix, oder Seitengewicht (der Ihnen sagt, wie stark Bilder Ihre Seitengeschwindigkeit beeinflussen), aber PageSpeed Insights bleibt bei SEO-Experten sehr beliebt.
Vergessen Sie nicht, Optimierungstools für ein besseres Ranking zu verwenden, von denen einige völlig kostenlos sind.
Wenn Ihre Bilder zu groß sind, kann Google sie wahrscheinlich nicht crawlen und indizieren, und dies könnte ein weiterer Faktor für niedrigere Rankings sein. Vergessen Sie nicht, dass einige Ihrer Besucher von der Google Bildersuche stammen (Sie können Überprüfen Sie Ihren Bilderverkehr in Google Analytics), also tun Sie Ihr Bestes, um sie zu behalten.
Ein weiterer Vorteil der Verwendung kleinerer Bilddateien ist, dass Sie können im Handumdrehen Backups erstellen. Sie auch nehmen weniger Speicherplatz in Anspruch (was die Kosten für Backup-Speicher senken würde) und verbrauchen weniger Bandbreite. Die meisten Hosting-Pakete sind mit bestimmten Bandbreitenbeschränkungen pro Paket ausgestattet, daher sollten Sie Ihre Bilder auf intelligente Weise verwenden.
Dateiformatierung
Beginnen wir damit, Ihnen zu zeigen, wie Sie das geeignete Dateiformat auswählen. Es gibt zahlreiche Bildformate, aber die drei häufigsten sind:
Bildabmessungen
Bilder, die Sie mit Ihrem Smartphone oder einer professionellen Kamera aufnehmen, haben große Auflösungen von etwa 300 dpi und die Abmessungen von mindestens 2000 px und mehr. Aber so große Fotos sind nicht für Websites geeignet, sie brauchen ewig, um sie zu laden. Sicher, Sie möchten, dass Ihre Grafiken beeindruckend aussehen, aber dennoch muss die Ladezeit niedrig sein. Deshalb müssen Sie die Bildgröße in Photoshop ändern oder eine andere Bildbearbeitungssoftware Ihrer Wahl, bevor Sie sie zu Ihrer Website hinzufügen. Die Auflösung selbst ist letztendlich nicht so wichtig wie das Gewicht des Bildes, das unter 100 kb oder maximal 150 kb bleiben muss. Aber dazu mehr im nächsten Kapitel.
Bildkompression
Wenn Sie es übertreiben und Ihr Bild zu stark komprimieren, führt dies zu einer kleinen Dateigröße und einem Bild von geringer Qualität. Auf der anderen Seite, wenn die Komprimierungsrate nicht groß ist, haben die Bilder eine hohe Qualität, sind aber auch groß.
Als Faustregel gilt, Das Gesamtgewicht Ihrer Website sollte 2 MB nicht überschreiten. Idealerweise sollte die Größe der schnell ladenden Website etwa 1 MB betragen.
In diesem Sinne, Ziehen Sie in Erwägung, Ihre Bilder bei etwa 150 KB oder kleiner zu halten. Wenn Sie das PNG-Format verwenden, gehen Sie nicht über 100 KB.
Es gibt zwei Arten der Komprimierung: verlustbehaftet und verlustfrei.
Verlustbehaftete oder irreversible Kompression bedeutet, dass einige der Daten und die Qualität der Originalversion verloren gehen. Selbst nachdem Sie die Dateigröße erheblich reduziert haben, scheint es keine merklichen Unterschiede zu geben. Bei näherer Betrachtung werden diese Unterschiede natürlich deutlicher. Wenn die neue Dateigröße zu klein ist, sehen Sie möglicherweise einige pixelige Bereiche und gezackte Kanten auf Ihrem Bild.
Verlustfreie Kompression ist eine Methode, mit der Sie die Bildgröße reduzieren können, ohne die Qualität zu beeinträchtigen. Beim verlustfreien Komprimieren einer Datei gehen keine Daten verloren, sodass die Originaldaten jederzeit wiederhergestellt werden können. Da jedoch keine Daten entfernt werden, können Dateien um maximal 50 % komprimiert werden.
Bildname
Übersehen Sie diesen Schritt nicht. Für die Bild-SEO ist es wichtig, Ihren Bilddateien Eigennamen zu geben, da Google und andere Suchmaschinen die Namen Ihrer Bilddateien crawlen. Vermeiden Sie generische Namen, sondern gehen Sie lieber den beschreibenden Weg und Schlüsselwörter einschließen. Wenn auf Ihrer Website beispielsweise ein Auto abgebildet ist, können Sie im Dateinamen dessen Marke und Modell angeben.
Es ist auch wichtig, um Alt-Attribute zu optimieren, auch Textalternativen zu Bildern genannt. Wenn ein Browser aus irgendeinem Grund ein Bild nicht rendern kann, wird stattdessen der alternative Text angezeigt. Auch wenn eine Seite vollständig geladen ist, werden Alt-Attribute angezeigt, wenn Sie mit der Maus über ein Bild fahren. Sie sind von großer Bedeutung, da sie die SEO Ihrer Website beeinflussen und die Chancen erhöhen, dass Ihre Bilder in der Google-Bildersuche erscheinen. Achten Sie nur darauf, Ihre Alt-Attribute nicht mit Schlüsselwörtern zu überladen, da Suchmaschinen Sie dafür bestrafen können.
Unscharfe Bildvorschau
Bei diesem Schritt dreht sich alles um Erwecken Sie den Eindruck von schnell geladenen Bildern hoher Qualität, indem Sie zuerst die Version mit niedrigerer Qualität eines Bildes laden. Während Ihre Besucher darauf warten, dass die Website vollständig geladen ist, wird die kleinere Version des Bildes angezeigt. Es ist auf die Originalgröße gedehnt und wirkt verschwommen, aber das dauert nur eine kurze Zeit, bevor das Bild in voller Größe geladen wird. Obwohl es einige grundlegende CSS-Kenntnisse erfordert, Erstellen des Blur-Up-Effekts ist eigentlich ganz machbar.
Bildoptimierungstools ermöglichen es Ihnen, Ihre Bilder nach Ihren Bedürfnissen zu ändern. Sie können sie komprimieren, Dateitypen ändern, Bildabmessungen ändern usw.
Adobe Photoshop
Das beliebteste Bildbearbeitungstool ist zweifellos Adobe Photoshop. Es enthält einige beeindruckende Bildbearbeitungsfunktionen, aber die Für das Web speichern Möglichkeit ist besonders interessant.
Wenn Sie die Größe eines Ihrer Fotos reduzieren müssen, ohne die Qualität zu beeinträchtigen, verwenden Sie diese Option. Es wird dir erlauben Wählen Sie den Bildtyp, die Bildqualität und die Abmessungen aus. Beachten Qualität und Unschärfe Optionen. Indem Sie sie ändern (auch ohne andere Einstellungen zu ändern), können Sie ein qualitativ hochwertiges Bild beibehalten, das nicht viel Gewicht hat.
Bildoptimierungs-Plugins in WordPress
WordPress enthält viele raffinierte Plugins, mit denen Sie Ihre Fotos ohne großen Aufwand optimieren können. Aber egal wie mächtig jeder von ihnen ist, solltest du trotzdem Ändern Sie die Größe Ihrer Bilder, bevor Sie sie in WordPress hochladen, sonst könnten Sie viel wertvollen Hosting-Speicherplatz verlieren.
Einige der besten Plugins für die Bildoptimierung sind Optimol, EWWW Image Optimizer Cloud, Stellen Sie sich vor, Smush, Optimus – WordPress Image Optimizer, und Komprimieren von JPEG- und PNG-Bildern.
Smush ist mit über 1 Million aktiven Downloads das beliebteste, aber egal für welches Plugin Sie sich entscheiden, alle helfen Ihnen dabei, Bilder zu optimieren, damit Ihre Website schneller geladen werden kann. Das Einzige, worauf Sie achten könnten, ist das Ein von Ihnen installiertes Plugin kann Bilder extern auf seinen eigenen Servern komprimieren und optimieren. Auf diese Weise wird Ihre Seitenladezeit nicht von Bildgrößen beeinflusst.
Abschluss
Die Bildoptimierung ist einer der entscheidenden Faktoren für die einwandfreie Leistung Ihrer Website. Wenn Sie es schlecht machen, riskieren Sie niedrige Rankings, hohe Ladezeiten sowie große Bounce- und niedrige Conversion-Raten. Die richtige Optimierung von Bildern hilft Ihnen nicht nur, ein erfolgreicheres Online-Geschäft zu führen, sondern spart Ihnen auch viel Speicherplatz auf der Website, den Sie sicherlich benötigen werden, wenn Ihre Website weiter entwickelt und erweitert wird.
Aus schlechter UX kam nie etwas Gutes. Befolgen Sie also unsere Tipps zur Optimierung von Bildern für das Web, und Ihre Website wird wie ein Uhrwerk funktionieren.
Unterstützen Sie unsere Arbeit ❤️
Wenn Ihnen dieser Artikel gefallen hat, können Sie uns mit einem Trinkgeld unterstützen, damit wir weiterhin großartige Inhalte veröffentlichen können.
