Bilder für Websites optimieren

Ein Bild sagt mehr als tausend Worte. Das gilt besonders für Websites: Mit dem richtigen Motiv heben Sie Ihre Seite aus der Masse ab. Ein gutes Bild weckt Interesse und erste Eindrücke.
ABER: Ein schlecht optimiertes Bild kann ebenso Ladezeit und somit Besucher und ggf. Umsatz kosten.

Es ist Pflicht, jedes Bild auf einer Website zu optimieren!

Simon Ihlenfeldt, tricksiebzehn Online-Marketing Agentur

Wir sehen oft, das Bilder von Redakteuren zu groß oder nicht optimiert in die Website eingebaut werden. Mit einem einzigen Bild wächst die Ladezeit häufig um mehrere Sekunden an.

Tutorial: Bilder für Websites optimieren

1. Bilder nur so gross bzw. breit wie nötig hochladen

Wie groß müssen Bilder eigentlich sein? In der Regel werden Sie Bilder verkleinern müssen. Um Ihnen komplizierte technische Erläuterungen zu sparen, ein paar Entscheidungshilfen als Faustregeln:

  • Für vollbreite Bilder, die den gesamten Bildschirm füllen, (z.B. Slider) reicht eine Breite von 1500 Pixeln aus.
  • Füllt das Bild den kompletten Content-Bereich aus, reicht eine Breite von 1024 Pixeln aus.
  • Füllt das Bild die Hälfte des Content-Bereichs aus, ist eine Breite von 600 Pixeln ausreichend.
  • u.s.w.

Das sind nur ungefähre Faustregeln. Mit diesen fahren Sie generell gut. Wir selbst stellen die Bilder häufig für optimale Performance bereit und verzichten auf die letzte Brillanz. Natürlich macht es Sinn, zielgruppenabhängig von diesem Paradigma abzuweichen. Als Fotograf bspw. werden Sie eine möglichst gute Bildqualität zeigen möchten.

1.1 So geht’s: Bilder verkleinern

Auf dem Mac mit Vorschau

  1. Öffnen Sie das Bild in der Vorschau.
  2. Klicken Sie oben in der Menü-Leiste auf „Werkzeuge“ und wählen dann „Größenkorrektur“.
  3. Wählen Sie „Pixel“.
  4. Ändern Sie nun den Wert der Breite.
  5. Klicken Sie „OK“.
  6. Speichern Sie das Bild ab.

Falls Sie mehrere Bilder auf einmal bearbeiten möchten, empfehlen wir Photobulk.

2. Bilder komprimieren

Kompression – die Verringerung der Dateigröße. Man unterscheidet zwischen verlustfreier und verlustbehafteter Komprimierung.
Wir empfehlen im ersten Schritt eine verlustfreie Komprimierung zu verwenden. Falls einzelne Bilder dann zu groß sind, kann immer noch die verlustbehaftete Komprimierung getestet werden.

2.1. So geht’s: Bilder komprimieren

Auf dem Mac mit ImageOptim

Wir selbst verwenden das Tool ImageOptim. Es ist kostenlos und bietet für die meisten Dateiformate die modernsten Komprimierungs-Algorithmen.

Es ist ein Kinderspiel:

  1. ImageOptim öffnen.
  2. Arbeitskopien der Bilder erstellen: ImageOptim überschreibt standardmäßig die Originale.
  3. Bilder per Drag & Drop in das ImageOptim Fenster ziehen.
  4. Warten, bis alle Bilder fertig sind.

Tipps zu ImageOptim:

  • In den Einstellungen kann zwischen verlustfreier und verlustbehafteter Komprimierung umgestellt werden.
  • Für JPEGs empfehlen wir die Aktivierung von Guetzli – abhängig von der Rechenleistung und Bildmenge: Während es zwar sehr effektiv ist, arbeitet es dennoch sehr langsam und eignet sich daher nicht für sehr große Bildmengen. Die Ergebnisse sind aber super!

Windows-Tools

Da wir selbst mit Macs arbeiten, hier ein paar Links zu Windows-Tools

Online-Tools

Zusammenfassung: Bilder für Website optimieren

Benötigte Zeit: 15 Minuten.

Zur Optimierung der Bilder für eine Website müssen folgende Schritte erledigt werden.

  1. Benötigte Bildgröße ermitteln

    Für vollbreite Bilder: 1500 Pixel
    Füllt das Bild den kompletten Content-Bereich aus: 1024 Pixel
    Füllt das Bild die Hälfte des Content-Bereichs aus: 600 Pixel

  2. Bilder verkleinern

    Mithilfe eines Bildbearbeitungsprogramms, Vorschau, Photoshop, etc., wie in diesem Beitrag beschrieben.Screenshot Vorschau (Mac) Bild verkleinern

  3. Bilder komprimieren

    Bilder mit Hilfe von Tools wie ImageOptim komprimieren (oben genauer beschrieben=.Screenshot ImageOptim App

  4. Bilder sollten nur in Ausnahmefällen die Größe von 0.3 MB überschreiten

  5. Alt-Texte und Titel pflegen

    Immer eine sinnvolle Beschreibung des Bilds im Alt-Text angeben und den Titel pflegen.

Über den Autor

Avatar von Simon Ihlenfeldt
Simon Ihlenfeldt

Geschäftsführer, Webentwickler & Innovationsbeauftragter der TRICKSIEBZEHN Online-Werbeagentur.

Kommentar hinzufügen

Neue Beiträge

Kategorien

Simon Ihlenfeldt

Avatar von Simon Ihlenfeldt

Geschäftsführer, Webentwickler & Innovationsbeauftragter der TRICKSIEBZEHN Online-Werbeagentur.

Folge uns

Folgen, schreiben, oder stalken Sie uns. Wir freuen uns auf alle, die unseren Weg verfolgen und unterstützen.