6 Wege zur Optimierung von Bildern für eine bessere Webleistung

6 Wege zur Optimierung von Bildern für eine bessere Webleistung
Rick Davis

Der Mensch ist ein visuelles Wesen, und die Forschung bestätigt diese Tatsache. Nach nur drei Tagen liegen die Behaltensraten für Text im Bereich von nur 10 % bis 20 %. Bei Bildern können die Behaltensraten jedoch bis zu 65 % betragen. Das Gehirn nimmt 90 % der visuellen Informationen auf und verarbeitet sie 60.000 Mal schneller. Zweifellos spielen visuelle Elemente eine entscheidende Rolle für das Engagement auf einer Website.

Es reicht jedoch nicht aus, ein paar Bilder auszuwählen und sie auf Ihrer Website zu platzieren. Große Bilder verbrauchen viel Bandbreite und verlangsamen die Ladegeschwindigkeit der Seite. Suchmaschinen bemerken die langsame Leistung und bestrafen Sie mit einem niedrigen Ranking.

Unser Artikel zeigt Ihnen sechs verschiedene Möglichkeiten zur Optimierung von Bildern für eine bessere Web-Performance im Jahr 2021.

Tipps zur Bildoptimierung für eine bessere Webleistung in

Nehmen wir an, Sie entwerfen Websites für gemeinnützige Organisationen und verwenden gerne viele Bilder, um Ihre Arbeit zu präsentieren. Spender, Sponsoren und andere Interessengruppen nutzen solche Informationen als Grundlage für eine kontinuierliche Unterstützung. Wenn Sie die Bilder jedoch nicht optimieren, werden die Benutzerfreundlichkeit und das Engagement leiden. Das größte Problem wird das langsame Laden der Seiten und Timeout-Reaktionen sein.

Die Bildoptimierung bezieht sich auf alle Schritte, die Sie unternehmen, um die Größe, das Format oder die Auflösung der Dateien zu reduzieren, ohne die Qualität der Bilder zu beeinträchtigen.

Schauen wir uns einige Ihrer Möglichkeiten an.

Marketing-Kampagne Illustration von Deemak Daksina

1. mit einem Audit zur Bildoptimierung beginnen

Ein Audit der Bildoptimierung liefert relevante Informationen darüber, wo Sie sich verbessern müssen.

Führen Sie zunächst eine Bestandsaufnahme der Bilder auf Ihrer Website durch, um durch entsprechende Tests festzustellen, welche Probleme Sie beheben müssen.

Die Prüfung kann zum Beispiel zeigen, dass Sie zu viele Bilder haben. Sie wird auch Ihre Bildformatierung aufzeigen und es Ihnen ermöglichen, das weitere Vorgehen zu bestimmen. Zum Beispiel kann das Entfernen oder Ändern der Dateiformate die Ladegeschwindigkeit der Seite erheblich verbessern.

2. das richtige Format für die Bilder wählen

Bilddateien gibt es in verschiedenen Formaten. Hier sind die drei häufigsten Bildformate für Webanwendungen, die Sie kennen sollten:

Siehe auch: Wie man Illustrationen für Kinder zeichnet
  • PNG hat den Vorteil, dass es ein sehr hochwertiges Bild ist. Leider ist die Dateigröße dafür sehr groß. Sie eignen sich gut für einfache Bilder und Logos und ermöglichen eine verlustfreie Komprimierung.
  • JPEGs sind auf den meisten Websites am weitesten verbreitet. Sie eignen sich hervorragend für komplexe, farbenfrohe Bilder. Bei der Komprimierung von JPEG-Bildern müssen Sie jedoch vorsichtig sein, denn je kleiner das Bild wird, desto mehr kann es an Klarheit verlieren. Manche Leute bezeichnen dies als verlustbehaftet.
  • GIF eignet sich für Animationen, kleine Symbole und Bilder mit niedriger Auflösung. Es ermöglicht eine verlustfreie Komprimierung, aber Sie können nur bis zu 256 Farben verwenden.

Icons speichern von Andreas Storm

3. die Größe ändern und die Bilder komprimieren

Vielleicht haben Sie bemerkt, dass die Bilder nach und nach geladen werden. Es dauert einige Zeit, bis Sie das ganze Bild sehen können; ein Zeichen dafür, dass die Bilder wahrscheinlich zu schwer sind. Durch Verkleinern oder Komprimieren lässt sich das Problem beheben.

Bitte beachten Sie, dass Sie keine Bilder hochladen sollten, bevor Sie sie optimiert haben, und dass die Dateien für eine optimale Qualität nicht größer als 1 bis 2 MB sein sollten.

Verwenden Sie das Zuschneidewerkzeug, um die Größe der Bilder zu ändern. Es hilft, die Dateigröße zu reduzieren, was zu einer besseren Ladegeschwindigkeit der Seite führt. Sie haben eine Vielzahl von Werkzeugen zu Ihrer Verfügung.

Die Komprimierung von Bildern trägt zur Verringerung der Dateigröße bei. Allerdings können Sie das Bild verzerren, wenn Sie es zu stark komprimieren. Eine geringe Komprimierung kann ideal sein, wenn Sie die Bildqualität beibehalten wollen; sie führt jedoch nicht zu einer wesentlichen Verringerung der Größe.

Arten von Kompressionen

Es gibt zwei Konzepte, die wir bereits oben erwähnt haben: verlustfreie und verlustbehaftete Kompression.

  • Bei der verlustfreien Komprimierung bleibt die Bildqualität erhalten, während unnötige Metadaten entfernt werden.
  • Bei der verlustbehafteten Komprimierung wird die Dateigröße verringert, indem einige Elemente entfernt werden. Dabei kann die Bildqualität beeinträchtigt werden. Möglicherweise bemerken Sie den Unterschied jedoch nicht. Es kann also immer noch eine hervorragende Methode zur Komprimierung von Bildern sein.

Mit dem richtigen Bildbearbeitungsprogramm können Sie feststellen, welche Komprimierung für Sie am besten geeignet ist.

4. mobile-first Bildoptimierung

Alle Maßnahmen, die Sie ergreifen, müssen einer Mobile-First-SEO-Strategie folgen, da Google zu Mobile-First-Rankings übergegangen ist. Die Bilder sollten auf jedem mobilen Gerät genauso aussehen wie auf einem Desktop-Gerät. Ein enormer Teil des Internetverkehrs kommt über solche Geräte.

Siehe auch: Verwenden des Farbrads zum Erstellen von Designs

Wenn die Nutzer bei der Verwendung mobiler Geräte nicht mit einer guten UX beschäftigt sind, werden Sie sie verlieren.

Überlegen Sie sich, ob Sie die Bilder nicht für mobile Endgeräte optimieren sollten: Was auf einem kleinen Bildschirm gut aussieht, wird auch auf einem Desktop oder Laptop fantastisch wirken.

ASO-Optimierung von Abbi_Kerimov

5. die Dateinamen und ihre Auswirkungen auf SEO

Bei der Bildoptimierung müssen Sie auch darauf achten, wie Sie die Dateien benennen. Alle Maßnahmen, die Sie ergreifen, sollten darauf abzielen, die Sichtbarkeit in den Suchmaschinen zu verbessern. Wenn Sie ein Bild hochladen oder aufnehmen, vergibt das Gerät automatisch einen Dateinamen. Dieser Name besteht in der Regel aus einem zufälligen Code oder Zahlen. Er kann etwa so aussehen: 2224444.jpg.

Wenn Sie das Bild so wie es ist auf Ihre Website hochladen, hilft das den Suchmaschinen überhaupt nicht.

Erleichtern Sie es den Webcrawlern, Sie zu finden, indem Sie jedem Bild beschreibende Bezeichnungen zuweisen und relevante Schlüsselwörter einfügen, die Informationen über Ihr Unternehmen oder Ihre Website liefern.

6. die Verwendung von "Lazy Loading" erwägen

Das träge Laden von Bildern ist genau so, wie es der Name vermuten lässt. Anstatt das gesamte Bild auf einmal zu laden, entfaltet es sich quasi. Das Bild wird weiter geladen, je weiter der Online-Besucher auf der Seite nach unten scrollt.

Beim Lazy Loading wird nur das angezeigt, was zu diesem Zeitpunkt relevant ist, und Sie sparen Bandbreite, da keine unnötigen Ressourcen verwendet werden.

Laden... von Dona

Abschließende Überlegungen

Die Web-Performance ist ein entscheidender Ranking-Faktor für Suchmaschinen. Google straft Ihre Website ab, wenn die Ladegeschwindigkeit zu niedrig ist.

Es gibt viele Faktoren, die für die Geschwindigkeit einer Seite ausschlaggebend sind, und die Verwendung von Bildern nimmt einen der vordersten Plätze ein. Wenn Sie die Bilder nicht optimieren, leidet Ihre Web-Performance. Die Seiten werden langsam geladen, und die Nutzererfahrung und -beteiligung wird nicht gut sein.

Wählen Sie das richtige Bildformat. Verwenden Sie Techniken wie Größenanpassung und Komprimierung, um die Dateigröße zu reduzieren. Planen Sie regelmäßige Seitentests und Website-Audits, um die Leistung der Website zu überprüfen.




Rick Davis
Rick Davis
Rick Davis ist ein erfahrener Grafikdesigner und bildender Künstler mit über 10 Jahren Erfahrung in der Branche. Er hat mit einer Vielzahl von Kunden zusammengearbeitet, von kleinen Start-ups bis hin zu großen Unternehmen, und ihnen dabei geholfen, ihre Designziele zu erreichen und ihre Marke durch effektive und wirkungsvolle visuelle Elemente zu stärken.Als Absolvent der School of Visual Arts in New York City ist Rick leidenschaftlich daran interessiert, neue Designtrends und -technologien zu erforschen und die Grenzen dessen, was in diesem Bereich möglich ist, ständig zu erweitern. Er verfügt über umfassende Kenntnisse im Bereich Grafikdesign-Software und ist stets bestrebt, sein Wissen und seine Erkenntnisse mit anderen zu teilen.Neben seiner Arbeit als Designer ist Rick auch ein engagierter Blogger und widmet sich der Berichterstattung über die neuesten Trends und Entwicklungen in der Welt der Grafikdesign-Software. Er glaubt, dass der Austausch von Informationen und Ideen der Schlüssel zur Förderung einer starken und lebendigen Design-Community ist, und ist stets bestrebt, online mit anderen Designern und Kreativen in Kontakt zu treten.Ob er ein neues Logo für einen Kunden entwirft, in seinem Studio mit den neuesten Werkzeugen und Techniken experimentiert oder informative und ansprechende Blogbeiträge schreibt, Rick ist stets bestrebt, die bestmögliche Arbeit zu liefern und anderen beim Erreichen ihrer Designziele zu helfen.