Bilder optimieren und komprimieren für die Website

Bilder werten eine Internetseite enorm auf und geben ihr Emotionen und einen besonderen Ausdruck. Deshalb sind Bilder auf einer Internetseite unverzichtbar.

Allerdings gibt es da auch Fallstricke. Die Ladezeit einer Internetseite ist mittlerweile enorm wichtig geworden und spielt bei der Bewertung deiner Website für die Suchmaschine eine große Rolle. Deshalb solltest du die Bilder, die du auf deiner Seite verwendest, bestmöglich optimieren. Damit weder die Qualität der Bilder noch die Performance deiner Internetseite leiden.

Den Pagespeed deiner Internetseite kannst du entweder mit Google PageSpeed Insights oder auch mit den Tool GTmetrix.

Hier sind 5 Tipps, wie du deine Bilder fürs Web optimieren kannst:

1. Format der Bilder

Wenn möglich nur Bilder in JPEG (auch JPG), PNG oder GIF-Datei hochladen.

JPEG-Format:  alle Bildbearbeitungsprogramme können JPG heute hervorragend komprimieren.

WICHTIG: Immer die Originaldatei behalten und nicht mit der komprimierten Datei Überspeichern, da es nicht wiederhergestellt werden kann.

PNG-Format: Der Unterschied zu JPEG liegt darin, dass eine besseren Transparenz in einer verlustfreien Komprimierung erreicht werden kann.

GIF-Format: Animierte GIF-Bilder. Nur bedingt einsetzen.

2. Größe der Bilder

Bilder sollten in folgenden Größen hochgeladen werden, damit die Ladezeit nicht überstrapaziert wird.

Galeriebild (ohne Großansicht): Seitenlänge ca. 500 px
Galeriebild (mit Großansicht): Seitenlänge maximal 1400 px
Headerbilder: maximal 1.920 x 1.280 px.

3. Bilder komprimieren

Am besten lässt sich die Größe der Bilder in Photoshop komprimieren. Dort sollte man wie folgt vorgehen: Auf „Datei“, „Exportieren“ und „Für Web speichern“ klicken. Anschließend könnt ihr im Menü das Dateiformat und die Bildgröße in Pixeln auswählen. Um einen guten Wert zwischen Ladezeit und Qualität zu erzielen, wählt bei JPG „Hoch (60)“ aus. Speichert das Bild anschließend unter einem anderen Namen, damit das Originalbild erhalten bleibt.

Die Bilder sollten als „RGB“ ausgegeben werden. Ältere Browser können Bilder in CMYK nicht darstellen.

Wer Photoshop nicht zur Verfügung hat, für denjenigen gibt es einige kostenlose Online-Komprimierung-Tools, z. B. das Compress Jpeg oder auch https://tinypng.com.

Update 2024:

In der heutigen schnelllebigen digitalen Welt, wo Speicherplatz kostbar und Internetgeschwindigkeit entscheidend ist, hat Google mit Squoosh eine innovative Lösung präsentiert. Squoosh ist eine neue, benutzerfreundliche App, die in der Lage ist, Fotos effizient zu komprimieren und zu verkleinern – und das alles blitzschnell und komplett offline im Browser. Diese App eignet sich perfekt für Fotografen, Designer und alle, die unterwegs sind und ihre Bilder schnell bearbeiten müssen, ohne dabei auf eine Internetverbindung angewiesen zu sein. Mit einer einfachen und intuitiven Benutzeroberfläche bringt Squoosh eine neue Ebene der Bildoptimierung direkt in Ihre Hände, was sowohl Zeit als auch Ressourcen spart.

4. Bilder benennen

Noch ein kurzer Hinweis zu dem Dateinamen, der für die Suchmaschinenoptimierung (SEO) auch relevant ist. Der Dateiname des Bilder sollte folgende Komponenten enthalten:

• Keine Leerzeichen – stattdessen Bindestriche
• Keine Großbuchstaben
• Keine Umlaute (ä, ü, ö)
• Keine Sonderzeichen (&, ?, !)

Ein Beispiel wie ein Dateiname aussehen kann: bilder-internetseite-bearbeiten.jpg

5. Responsives Design

• Flexible Bildgrößen: Anstatt feste Pixelwerte für die Bildbreite und -höhe zu verwenden, sollten Sie prozentuale Angaben oder CSS-Eigenschaften wie max-width: 100% und height: auto nutzen. Dies ermöglicht es dem Bild, sich dynamisch an die Breite des umgebenden Containers anzupassen.

• Bildauflösung für verschiedene Geräte: Verwenden Sie HTML- und CSS-Techniken, um unterschiedliche Bildversionen für verschiedene Bildschirmauflösungen und Gerätetypen bereitzustellen. Das srcset-Attribut im <img>-Tag ermöglicht es, mehrere Bildquellen anzugeben, aus denen der Browser je nach Bildschirmauflösung und Gerätetyp die passendste auswählt.

  Beispiel:

  htmlCopy code

  <img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="Beispielbild">

  Hier wählt der Browser small.jpg für kleine Bildschirme, medium.jpg für mittelgroße und large.jpg für große Bildschirme.

• Verwendung von Bildformaten mit guter Kompression: Moderne Bildformate wie WebP bieten eine bessere Kompression bei gleichbleibender Qualität. Dies ist besonders wichtig für mobile Geräte, die oft über begrenzte Bandbreiten verfügen.

• CSS Media Queries: Sie ermöglichen es, CSS-Regeln basierend auf den Eigenschaften des Geräts, wie der Bildschirmbreite, anzuwenden. So können Sie beispielsweise unterschiedliche Hintergrundbilder oder Bildstile für Mobilgeräte und Desktop-Computer definieren.

• Lazy Loading: Diese Technik lädt Bilder erst dann, wenn sie im Viewport des Browsers sichtbar werden. Dies verbessert die Ladezeiten der Seite, besonders auf mobilen Geräten mit langsameren Internetverbindungen.

• Testen auf verschiedenen Geräten: Es ist wichtig, Ihre Webseite auf verschiedenen Geräten und in verschiedenen Browsern zu testen, um sicherzustellen, dass Ihre Bilder wie beabsichtigt dargestellt werden.