So optimieren Sie Ihre Bilder, um SEO-freundlich zu sein (vollständige Anleitung)

Die Leistung Ihrer Website hängt von verschiedenen Faktoren ab, die von dem von Ihnen ausgewählten Webhost über die Befolgung der Richtlinien zur Barrierefreiheit von Websites bis zu den von Ihnen verwendeten Bilddateigrößen reichen.


Das Formatieren für die richtige Größe kann jedoch aufgrund der von Ihnen vorgenommenen Änderungen die Qualität beeinträchtigen. Die gute Nachricht ist, dass Sie mit ein paar Techniken und Tricks die optimale Bildqualität beibehalten und die richtige Größe erhalten können.

Was ist Bildoptimierung??

BildoptimierungsdimensionenWebseiten können sich erheblich verlangsamen, wenn große Bilder vorhanden sind. Dies kann die Ladezeiten verkürzen und das Gesamterlebnis für Ihre Website-Besucher unterdurchschnittlich machen.

Das Verringern der Dateigröße ist eine Bildoptimierung. Sie können hierfür ein Skript oder ein Plugin verwenden.

Dies führt dann zu schnelleren Ladezeiten für Ihre Seiten. Verlustfreie und verlustbehaftete Komprimierung sind die beiden häufigsten Optimierungsmethoden.

Vorteile der Bildformatierung

durchschnittliche Bildgröße im WebEs wird geschätzt, dass ungefähr 54 Prozent des Gesamtgewichts einer Webseite auf Bilder zurückzuführen sind.

Wenn Sie an der Website-Optimierung arbeiten, sollten Ihre Bilder aus diesem Grund Ihre erste Aufgabe sein. Die Vorteile der Bildformatierung umfassen:

  • Verbesserte Seitenladegeschwindigkeit
  • Das Erstellen von Backups ist schneller
  • Es wird weniger Serverspeicherplatz benötigt
  • Verbesserte SEO mit dem richtigen SEO Plugin
  • Es wird weniger Bandbreite verwendet

So verbessern Sie die Leistung mit der Bildoptimierung

Ziel ist es, eine akzeptable Qualität und eine möglichst geringe Dateigröße auszugleichen. Es gibt mehr als einen Weg, dies zu tun. Vor dem Hochladen ist das Komprimieren Ihrer Bilder eine häufige Option. Sie können zu diesem Zweck ein Tool oder ein Plugin verwenden (hier einige).

Es ist wichtig, die Art der Komprimierung und das Dateiformat zu berücksichtigen, die Sie verwenden. Mit der richtigen Kombination können Sie die Größe Ihres Bildes um das bis zu Fünffache verringern.

Experimentieren Sie mit verschiedenen Dateiformaten und Komprimierungstypen, um die beste Kombination für Ihre Anforderungen zu ermitteln.

Wählen Sie das beste Dateiformat

Um den besten Dateityp auszuwählen, ist es wichtig zu wissen, welche verfügbar sind. Dies sind die häufigsten:

  • JPEG: Dieser Typ verwendet eine verlustfreie und verlustbehaftete Optimierung. Sie können ein solides Gleichgewicht zwischen Dateigröße und Qualität herstellen, indem Sie die Qualitätsstufe anpassen.
  • PNG: Dieser Typ hat tendenziell eine größere Dateigröße, aber die Bilder haben eine höhere Qualität. Sie können verlustbehaftete oder verlustfreie Komprimierung verwenden.
  • GIF: Dies ist ideal für animierte Bilder. Sie können nur verlustfreie Komprimierung verwenden. Es werden nur 256 Farben verwendet.

Bilddateiformate

Es gibt andere Optionen, aber diese gehören zu den häufigsten und am einfachsten zu handhabenden. Weitere Optionen sind JPEG XR und WebP. Nicht alle Browser unterstützen diese beiden, beachten Sie dies.

Sie können jedoch eine praktikable Wahl sein. Im Vergleich zu einem vergleichbaren JPEG-Bild wird beispielsweise die Dateigröße mit WebP im Durchschnitt um 30 Prozent reduziert.

Aufgrund des Mangels an universeller Unterstützung für diese beiden Optionen benötigt Ihre Anwendung zusätzliche Logik auf Ihren Servern oder Anwendungen, um die entsprechende Ressource bereitzustellen:

  • Die Bildoptimierung ist ein Dienst, der von einigen CDNs bereitgestellt wird, einschließlich der Bereitstellung von WebP und JPEG XR.
  • Um den Client zu erkennen, geben Sie das beste verfügbare Bildformat an und überprüfen Sie die unterstützten Formate. Es ist möglich, zusätzliche Anwendungslogik hinzuzufügen.
  • Bestimmte Open-Source-Tools automatisieren die Konversation, Optimierung und Bereitstellung geeigneter Assets.

Größe vs. Kompressionsqualität

Eine geringe Komprimierung führt tendenziell zu einer höheren Qualität, die Dateigrößen sind jedoch normalerweise größer. Das Gegenteil ist bei hoher Komprimierung der Fall. Die Dateien sind kleiner, aber die Qualität nimmt tendenziell ab.

Bildqualität vs. Komprimierung

Idealerweise möchten Sie insgesamt ein bis zwei MB für das Gesamtgewicht Ihrer Webseite. Überlegen Sie sich also, wie viele Bilder Sie verwenden müssen und Teilen Sie diese Zahl durch etwa 1,5. Dies gibt Ihnen die Größe pro Bild, die die beste Ladegeschwindigkeit ermöglicht.

Verlustfreie vs. verlustbehaftete Optimierung

Dies sind die beiden Komprimierungsarten, die Sie verwenden werden. Es ist wichtig zu verstehen, was sie tun:

  • verlustfrei gegen verlustbehaftete KomprimierungVerlustfrei: Dies komprimiert Daten und ist ein Filter. Vor dem Rendern des Bildes muss es dekomprimiert werden. Die Qualität wird jedoch nicht verringert. Es gibt verschiedene Tools, die eine verlustfreie Komprimierung durchführen.
  • Verlustig: Dies eliminiert einige Daten und es ist ein Filter. Achten Sie darauf, wie viel Sie reduzieren, da dies das Bild beeinträchtigt. Sie können verschiedene Bildeditoren und Werkzeuge verwenden, um die Qualitätseinstellungen des Bildes anzupassen.

Die optimale Konfiguration einer verlustfreien oder verlustbehafteten Konfiguration hängt von Ihren eigenen Kriterien ab, z. B. dem Kompromiss zwischen eingeführten Artefakten und der Dateigröße sowie dem Bildinhalt.

Es gibt keine einzige universelle Einstellung, die für alle Bilder gilt. Letztendlich möchten Sie mit verschiedenen Bildern herumspielen, um zu sehen, welche am besten funktionieren.

Größe der Bilder skalieren

Dank reaktionsschneller Seiten auf Websites wie WordPress erhalten Sie mehrere Dateigrößen in Ihrer Medienbibliothek. Ihr Browser kann die beste Größe auswählen und herunterladen. Die vom Browser gewählte Größe hängt von der Auflösung des Geräts ab.

Ändern der Bildgröße in WordPress

Die Originaldatei bleibt unberührt und bleibt erhalten. Sie können Plugins verwenden, um das Speichern des Originals zu vermeiden und Speicherplatz zu sparen, wenn Sie dies bevorzugen.

Ersetzen und Entfernen von Bildern

Benötigen Sie alle Bilder auf einer Webseite? Wenn nicht, entfernen Sie die unnötigen. Wenn jedoch alle für den Inhalt relevant sind, sollten Sie die Bilder mit größerer oder geringerer Qualität durch bessere Optionen ersetzen.

In einigen Fällen können Web-Schriftarten und CSS-Effekte die Bilder ersetzen und dennoch eine schöne visuelle Ästhetik auf der Seite bieten. Mit Web-Schriftarten können schöne Schriften dazu beitragen, die Benutzerfreundlichkeit zu verbessern und Ihren Seiten ein maßgeschneidertes Aussehen zu verleihen.

Es kann auch Ihre Lesbarkeit und Ihr Branding verbessern. Stellen Sie einfach sicher, dass Sie den Text weiterhin problemlos suchen, auswählen und seine Größe ändern können, ohne dass Lesbarkeitsprobleme auftreten.

CSS-Effekte umfassen Elemente wie Schatten und Verläufe. Auch diese können das Branding weiter fördern. Animationen können Ihre Webseite bei jeder Zoomstufe und Auflösung visuell ansprechen. Im Vergleich zu Bilddateien sind dies ein Bruchteil der Bytes.

Raster vs. Vektorbilder

Rastor gegen Vektor

Raster und Vektor sind zwei der primären Bilddateitypen. Pixelbasierte Programme, ein Scanner oder eine Kamera werden verwendet, um Rasterbilder zu erstellen.

Diese sind im Internet weit verbreitet und werden häufiger verwendet. Vektorsoftware wird verwendet, um Vektorbilder zu erstellen. Diese sind häufig für Bilder, die auf physische Produkte übertragen werden, sowie für Engineering-, CAD- und 3D-Grafiken.

Vektorbilder sind unabhängig von Auflösung und Zoom. Wenn es sich um geometrische Formen handelt, ist der Vektor ideal. Wenn Bilder komplex sind und eine Fülle von Details und unregelmäßigen Formen aufweisen, werden Rasterbilder bevorzugt.

Rastergrafiken codieren die einzelnen Werte jedes Pixels in einem rechteckigen Raster, um ein Bild darzustellen. Vektorgrafiken repräsentieren ein Bild mit Punkten, Linien und Polygonen.

Hochauflösende Bildschirmimplikationen

Es ist wichtig, zwischen den beiden verschiedenen Pixeltypen zu unterscheiden, zu denen Gerätepixel und CSS-Pixel gehören. In einem einzelnen CSS-Pixel können mehrere Gerätepixel vorhanden sein. Das Detail auf dem Bildschirm wird mit mehr Gerätepixeln feiner.

CSS-Pixel gegen GerätepixelUm die höheren Pixelzahlen des Geräts voll ausnutzen zu können, müssen die Bildelemente detaillierter sein.

Diese Aufgabe ist Ideal für Vektorbilder, da sie scharfe Ergebnisse liefern können wenn mit einer beliebigen Auflösung gerendert.

Da Rasterbilder eine Pixelbasis zum Codieren von Bilddaten verwenden, sind sie schwieriger. Dies geschieht, während die Größe der Rasterdateien mit zunehmenden Pixeln zunimmt.

Hochauflösende Bildschirme benötigen daher hochauflösende Bilder, um die Vorteile nutzen zu können. Vektorbilder sind am besten für hochauflösende Bildschirme da sie aufgrund ihrer Auflösungsunabhängigkeit immer scharfe Ergebnisse liefern.

Denken Sie daran, dass die Bildoptimierungstechniken unabhängig von der Auflösung gleich sind.

Vektorbilder optimieren

Scalable Vector Graphics (SVG) werden von allen modernen Browsern unterstützt.

Dies ist ideal für zweidimensionale Grafiken und das Format basiert auf XML-Bildern. SVG-Dateien können von Hand mit dem von Ihnen bevorzugten Texteditor oder mit den meisten vektorbasierten Softwaretypen erstellt werden.

Um die Größe von SVG-Dateien zu verringern, sollten sie minimiert werden. Beim Komprimieren von SVG-Dateien sollte GZIP verwendet werden.

Rasterbilder optimieren

Ein Pixelraster bildet ein Rasterbild. Die einzelnen Pixel befinden sich in einem zweidimensionalen Raster. Beispielsweise ergibt eine Folge von 10.000 Pixeln ein Bild von 100 mal 100 Pixeln. Jedes Pixel codiert Transparenz- und Farbinformationen.

Raster schwerRGBA-Werte werden von jedem Pixel gespeichert. Diese beinhalten:

  • Roter Kanal
  • Blauer Kanal
  • Grüner Kanal
  • Alpha-Kanal (Transparenz)

256 Schattierungen (Werte) werden vom Browser intern zugewiesen. Pro Kanal entspricht dies acht Bits. Pro Pixel sind dies vier Bytes. Dies ermöglicht die Berechnung der Dateigröße anhand der Rasterabmessungen. Es dauert nicht viel, bis die Größe der Datei sehr groß wird.

Um die Größe der Bilddatei zu verringern, gibt es einige Strategien:

  • Reduzieren Sie die Bittiefe des Bildes. Sie können dies tun, indem Sie eine kleinere Farbpalette verwenden.
  • Optimieren Sie die Daten, die die einzelnen Pixel speichern.

Tools und Parameter-Tuning

Es gibt kein perfektes Bildwerkzeug, keinen Satz von Optimierungsparametern oder kein Format, das für jedes Bild funktioniert. Der Bildinhalt und seine technischen und visuellen Anforderungen bestimmen, welche Sie verwenden sollten.

Sobald Sie einen guten Einstellungssatz gefunden haben, können Sie ihn in Zukunft für ähnliche Bilder verwenden, um Zeit zu sparen. Stellen Sie jedoch sicher, dass Sie niemals davon ausgehen, dass zum Komprimieren aller Bilder dieselben Einstellungen verwendet werden sollten.

Das Erlernen einiger gängiger Tools kann Ihnen dabei helfen, die richtige Wahl zu treffen. Diese vier gehören zu den am häufigsten verwendeten:

  • Gifsicle: Auf diese Weise können Sie verschiedene GIF-Bilder optimieren und erstellen.
  • Optipng: Dies wird verwendet, um eine verlustfreie PNG-Optimierung zu ermöglichen.
  • Jpegtran: Mit diesem können Sie JPEG-Bilder optimieren.
  • Pngquant: Dies wird verwendet, um eine verlustbehaftete PNG-Optimierung zu ermöglichen.

Bereitstellen skalierter Bild-Assets

Bei der Bildoptimierung sind zwei Hauptkriterien zu berücksichtigen:

  • Optimieren der Gesamtzahl der Pixel eines Bildes.
  • Optimieren, wie viele Bytes erforderlich sind, um jedes Pixel in einem Bild zu codieren.

BildformatbaumDie Größe Ihrer Bilddatei ist auf Gesamtpixel multipliziert mit den Gesamtbytes, die für die individuelle Pixelcodierung erforderlich sind. Das ist es. Beachten Sie dies, wenn Sie daran arbeiten, die optimale Größe für die Bilddateien auf Ihrer Website zu ermitteln.

Aus diesem Grund können Sie Bilder am effektivsten und einfachsten optimieren, indem Sie sicherstellen, dass Sie nicht mehr Pixel versenden, als Sie unbedingt benötigen, um das Asset im Browser in der vorgesehenen Größe anzuzeigen.

Damit, Verlassen Sie sich nicht nur auf Ihren Browser, um Bilder neu zu skalieren. Dies kann dazu führen, dass sie mit einer niedrigeren Auflösung angezeigt werden. Es werden auch viele zusätzliche CPU-Ressourcen verwendet.

Es ist im Allgemeinen nicht möglich, die genaue Anzeigegröße für jedes einzelne gelieferte Asset zu garantieren. Es ist jedoch wichtig, dass Sie alle unnötigen Pixel auf ein Minimum beschränken.

Es ist auch wichtig, dass Sie Ihre großen Assets so nah wie möglich an deren Anzeigegröße liefern.

Checkliste zur Bildoptimierung

Mit allen Informationen hier können Sie Ihre Bilder optimieren, damit Ihre Webseiten schneller sind. Sie können weiterhin schöne Bilder verwenden, die jedoch die Ladezeiten Ihrer Seite nicht wesentlich verlangsamen.

Dies wird Ihre Besucher glücklich machen und die Gesamtfunktion Ihrer Website verbessern. Berücksichtigen Sie bei der Optimierung Ihrer Bilder die folgenden Checklistenpunkte:

  • Berücksichtigen Sie Vektorformate, da diese für hochauflösende und mehrere Geräte geeignet sind, da sie unabhängig von Skalierung und Auflösung sind.
  • Alle SVG-Assets sollten komprimiert und minimiert werden. Dadurch werden die unnötigen Metadaten entfernt.
  • Spielen Sie bei Rasterformaten mit den optimalen Qualitätseinstellungen. Dies kann Ihnen eine erhebliche Anzahl von Bytes ersparen.
  • Ermitteln Sie für jedes Asset Ihre funktionalen Anforderungen und wählen Sie das beste Format für Rasterbilder aus.
  • Automatisieren Sie, wann immer Sie können, um eine konsistente Bildoptimierung sicherzustellen.
  • Servieren Sie skalierte Bilder, damit die natürliche Bildgröße und die Anzeigegröße so ähnlich wie möglich sind.

Zusammenfassend lässt sich sagen, dass die Bildoptimierung sowohl eine Wissenschaft als auch eine Kunst ist. Die Algorithmen und Techniken, die hoch entwickelt sind, dienen als Wissenschaft.

Das Fehlen endgültiger Antworten bezüglich der individuellen Bildkomprimierung ist die Kunst. Letztendlich sollten Sie herumspielen und experimentieren. Auf diese Weise können Sie die beste Wahl für Ihre Bilddateien treffen und feststellen, wie diese zur Geschwindigkeit Ihrer Webseite beitragen.

Angesichts der zunehmenden Beliebtheit und Raffinesse von Website-Erstellern von Drittanbietern wie Wix ist es für Designer leicht, schlampig zu werden, sich jedoch darauf zu konzentrieren, gute Bildoptimierungsprozesse zu entwickeln und aufrechtzuerhalten, unabhängig davon, ob eine Vorlage erstellt oder eine Website von Grund auf neu erstellt wird.

Referenzen und Bildnachweise:

  • PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map