Skip to main content

Website Bilder optimieren und komprimieren

  • katja-pohlers


PDF herunterladen

Bilder optimieren und komprimieren: Darauf solltet Ihr achten

Bilder spielen bei der Erstellung von Websites eine besonders wichtige Rolle. Oft sagt ein Bild mehr als viele Worte, daher sollten visuelle Inhalte nie vernachlässigt werden. Zu viele Bilder, falsche Dateiformate oder zu große Bilder können sich jedoch auch negativ auf die Ladegeschwindigkeit, die Usability oder die Optik auswirken. Darauf solltet Ihr achten, wenn Ihr Eure Bilder optimieren wollt. Jede Website profitiert von passendem Bildmaterial: In Online-Shops wirken sich Produktbilder förderlich auf die Conversion Rate aus, auf einer Firmen-Website schaffen Bilder mehr Einblick in das Unternehmen und für informative Inhalte helfen Bilder und Infografiken, um Zusammenhänge besser zu verstehen.

bilder optimieren und komprimieren
Bildoptimierung ist ein wichtiger Teil für eine bessere Page Speed.

Wie kommen die Bilder auf die Website?

Am Anfang der Website muss oft das Rohmaterial gesichtet werden. Häufig liegen Bilder als PDF, JPG, PNG oder EPS vor. Auch die Dateigrößen sind hier oft unterschiedlich, wobei ein großes Bild nicht immer hohe Qualität hat. Wenn die alte Website als Grundlage dient, sollte zuerst geprüft werden, ob die vorhandenen Bilder und Logos übernommen werden können. Dazu müssen die Bilddateien in punkto Qualität und Ausgabegröße akzeptabel sein.

dateifiormate bilder optimieren
Verschiedene Dateiformate haben unterschiedliche Vorteile.

Geeignete Bildformate sind:

  • JPEG (Für Fotos und hochwertige Grafiken)
  • PNG (Für Grafiken mit weniger Details und einfarbige Flächen)
  • GIF (Für Kurzvideos)
  • WebP (Von Google entwickelt und flexibel einsetzbar)

Für Hintergründe und Header müsst Ihr die Bilder optimieren, damit diese ausreichend groß sind. Als Notlösung können hier auch passende Stockbilder verwendet werden.

Folgende Pixelgrößen sind jeweils für Header empfehlenswert:

  • 1920 Pixel bei voller Bildschirmanzeige
  • 1200 Pixel bei voller Bildschirmhöhe
  • damit für Nutzer noch ersichtlich ist, dass Inhalt/Text folgt, eignen sich 1920 x 700 Pixel

Für weitere Bilder auf der Website kann die Größe folgendermaßen angepasst werden:

  • Querformate max. 900 Pixel breit
  • Hochformate max. 700 Pixel hoch
  • Beitragsbilder angepasst an Textlauf
bilder optimieren vergleich
Zu stark solltet Ihr Bilder nicht komprimieren.

Warum Ihr Bilder komprimieren solltet

Je größer Bilder sind, desto länger braucht die Seite zu laden. Ein langsamer Page Speed wirkt sich negativ auf die User Experience aus und spätestens mit dem Thema Page Experience 2021 wird dies immer mehr zum entscheidenden Ranking Faktor. Vor allem mobil können viele große Bilder dafür sorgen, dass Besucher Eure Seite schon wieder verlassen, bevor sie zu Ende geladen hat. Bilder sind in der Regel der erste und effektivste Ansatzpunkt, um die Ladezeit Eurer Website zu optimieren.

Mit diesen Tools könnt Ihr Bilder komprimieren und die Dateigröße verringern

Das bekannteste und wichtigste Programm, um Bilder zu komprimieren und zu bearbeiten ist Adobe Photoshop. Hier kann das Bild einfach über Bild>Bildgröße verkleinert werden.

Alternativ gibt es auch günstigere bzw. kostenlose Tools, mit denen man Bilder komprimieren kannst.

Squoosh

Tinypng

Compressjpeg

Imagecompressor

Irfanview (Zum Download)

GIMP

Für normale Website Bilder solltet Ihr eine Bildgröße von max. 200 KB einhalten, dafür müsst Ihr Bilder komprimieren und klug auswählen.

bilder komprimieren mehr ladezeit
Für bessere Ladezeiten müsst Ihr Bilder komprimieren.

Zusätzlich sollten noch weitere Eigenschaften beim Bilder optimieren angepasst werden:

  • Helligkeit/ Kontrast
  • Schiefe Bilder werden geradegerückt
  • Teilweise werden auch Flecken entfernt (Bildfehler oder zb. Risse auf einer Straße, Flecken an Hauswand, etc.)

Im nächsten Schritt müssen noch Farbe und Form der Bilder per CSS angepasst werden. Dabei sind zum Beispiel folgende Faktoren:

  • Farbe Kontur/ Schatten
  • Form runde Kanten oder ganz rund
  • CSS-Anpassung des Mouseover bei gewünschten Großansichten

Bilder optimieren für responsive Websites

Damit Bilder auch auf mobilen Geräten optimal dargestellt werden, müssen diese vorher korrekt angepasst werden.

  • kleinere Darstellung
  • ein anderes Bild (selbes Motiv) aber mobil als Querformat (Desktop ist z.B. Hochformat)
  • Abstände der Galeriebilder anpassen

Beitragsbild © tashatuvango / stock.adobe.com

Beitragsbild © Ar-twork / stock.adobe.com

Beitragsbild © ribkhan / stock.adobe.com

Keine Kommentare vorhanden


Hast du eine Frage oder Meinung zum Artikel? Schreib uns gerne etwas in die Kommentare.

Ihre E-Mail Adresse wird nicht veröffentlicht

Jetzt den SEO-Küche-Newsletter abonnieren

Ähnliche Beiträge

Darstellung der Verbindung zwischen Mensch und KI, mit einem digitalen Roboterarm und einem menschlichen Finger, die ein Gehirn berühren.

KI-Halluzinationen: Warum sie mittlerweile häufiger auftreten und wie man sie erkennt

  • luisa
  • von Luisa Losereit
  • 04.06.2025

Künstliche Intelligenz (KI) hat in den letzten Jahren enorme Fortschritte gemacht und ist aus vielen Bereichen unseres Lebens nicht mehr wegzudenken. Doch trotz ihrer beeindruckenden Fähigkeiten gibt es nach wie vor Herausforderungen – eine davon sind sogenannte KI-Halluzinationen. Dabei handelt es sich um Situationen, in denen KI-Systeme Informationen generieren, die […]

Laptop mit geöffneter Google-Suche

Content für organische Sichtbarkeit optimieren

  • luisa
  • von Luisa Losereit
  • 03.06.2025

Im digitalen Zeitalter ist es durch die Flut an Informationen eine Herausforderung, online sichtbar zu sein. Doch die Online-Präsenz eines Unternehmens gilt als entscheidender Erfolgsfaktor. Fälschlicherweise stehen meist bezahlte Werbung (Google Ads) und Social-Media-Kampagnen im Fokus der Online-Marketing-Bemühungen. Dabei wird vor allem die organische Sichtbarkeit, d.h. die Präsenz auf den […]

Miniatur-Einkaufswagen steht auf einem aufgeklappten Laptop

Wie erkennt man die Schwächen im Kaufprozess?

  • luisa
  • von Luisa Losereit
  • 02.06.2025

Um Schwachstellen im Kaufprozess eines Online-Shops zu erkennen, nutzt man eine Kombination aus quantitativen und qualitativen Webanalyse-Methoden. Dabei kann man sowohl die gesamte Customer Journey mit ihren verschiedenen Touchpoints vor und während des Kaufs als auch die einzelnen Kaufprozessschritte genauer analysieren. Mithilfe von Tools und Analysemethoden ermittelt man, wo und […]

Tastatur mit roter "Ads"-Taste

Shopping-Ads richtig nutzen – 8 häufige Fehler und 7 Tipps

  • luisa
  • von Luisa Losereit
  • 26.05.2025

Google ist nicht nur die meistgenutzte Suchmaschine, sondern auch die größte Preisvergleichsseite. In der Suche bekommen die Besucher unmittelbar nach Eingabe eines Suchbegriffs Produkte zum Kauf vorgeschlagen, erst im Anschluss erscheinen die organischen Suchergebnisse. Die Wirkung dieser Shopping-Ads sollten Online-Händler keinesfalls unterschätzen und lukrativ für die prominente Positionierung der eigenen […]

kleiner Spielzeug-Einkaufswagen im Fokus, im Hintergrund arbeitet eine Person an einem Laptop

Warenkorbabbrüche reduzieren – Tipps und Tools

  • luisa
  • von Luisa Losereit
  • 19.05.2025

Beim Online-Shopping verlassen im Durchschnitt 7 von 10 Besucher Ihren Warenkorb, bevor sie den Einkauf abschließen. Ihre Webseite performt gut in den Suchergebnissen, zieht Traffic an, wird von potenziellen Kunden gefunden und Ihre Besucher verweilen gerne auf Ihrer Webseite. Doch trotz dieser vielversprechenden Signale werden die Warenkörbe gefüllt, aber die […]

Strawberry - Der KI-Browser

Strawberry – Der KI-Browser

  • Oliver Lindner / Gründer und Geschäftsführer
  • von Oliver Lindner
  • 15.05.2025

Strawberry – der KI-Browser, der Surfen und Arbeiten revolutioniert Einführung in Strawberry: Was ist das und warum spricht jeder darüber? Strawberry ist ein neuartiger KI-Browser – also ein Webbrowser mit eingebauter künstlicher Intelligenz. Diese sogenannten „Companions“ (Begleiter) unterstützen dich beim Surfen und übernehmen auf Wunsch sogar Aufgaben für dich. Das […]