Bilder optimieren – für kürzere Ladezeiten im Web

Design

Studien haben gezeigt, dass Nutzer wenig Geduld haben, wenn sie im Web surfen. Baut sich eine Webseite nicht innerhalb von zwei bis drei Sekunden auf, verlässt der durchschnittliche Nutzer die Seite. Dazu kommt noch, dass immer noch einige Nutzer mit analogen Modems oder auf mobilen Geräten, die begrenzte Datenmengen empfangen können, im Web unterwegs sind. Um die Nutzer auf Ihrer Webseite halten zu können und nicht zu vergraulen, gibt es viele Lösungsansätze. Ein wichtiger Ansatz ist, die Bilder einer Webseite richtig zu optimieren. Hat man die Bilder nicht optimiert oder in einem ungeeigneten Format eingebunden, kann dies zu unnötig langen Ladezeiten führen, was wiederum zu unzufriedenen Nutzern führt, die Ihre Seite verlassen. Wichtig dabei ist, die Größe der Bilder zu reduzieren, ohne einen merkbaren Qualitätsverlust zu erhalten.

 

Bilder zuschneiden
Auf unnötigen Raum um das Bild/Element sollte verzichtet werden. Schneiden Sie die Bilder genau auf den Bereich, der gesehen werden soll, passend zu.

 

Farbtiefe
Die Farbtiefe sollte auf das minimal akzeptabelste Niveau reduziert werden.

 

Texte
Diese sollten bestenfalls nicht als Grafik platziert werden. Nicht nur aus SEO Gesichtspunkten ist das schlecht, es nimmt auch Kapazitäten.

 

Dateiformat
Wählen Sie ein passendes Web-Format aus: GIF, JPEG, PNG
Abzuraten ist von BMP und TIFF Formaten.

 

Die wichtigsten und weit verbreitetsten Formate im Web:

 

Das GIF-Format (Graphics Interchange Format)
Kompression: Sehr Hoch
Einsatzgebiet: Interlaced Grafiken, Animationen, Transparente Farbe
Typische Grafikelemente: Buttons, Aufzählungspunkte, Icons, Cliparts, Bars

Nachteil: Max. Darstellung von 256 Farben pro Datei
Vorteil: Verlustfreie Komprimierung, Animierte Darstellung

 

Das JPGE-Format (Joint Photographic Expert Group)
Kompression: Sehr Hoch (Je höher der Kompressionsfaktor, desto schlechter die Bildqualität)
Einsatzgebiet: Bilder mit Hintergrund
Typische Grafikelemente: Fotos, Grafiken mit feinen Farbverläufen

Nachteil: Es wird mit Verlust komprimiert
Vorteil: Darstellung bis zu 16,7 Millionen Farben

 

Das PNG-Format (Portable Network Graphic)
Kompression: Durchschnittlich, Bei Fotos deutlich schlechter als JPEG
Empfohlenes Einsatzgebiet: Farbtiefe plus Transparenz
Typische Grafikelemente: Freigestellte Bilder, Icons, Buttons, Grafiken mit Transparenz und hoher Farbtiefe

Nachteil: Keine animierten Grafiken, keine hohe Kompression bei Fotos
Vorteil: Darstellung bis zu 16,7 Millionen Farben,  Erlaubt das Speichern von Informationen zu Bildherkunft und Copyright, Verwenden von Bildern mit Transparenz und hoher Farbtiefe

 

Nützliche Tools um die Dateigröße von Bildern zu verringern:

TinyPNG
Smush.it
OptiPNG
ImageOptim
CodeKit
imgo

Wer Photoshop besitzt kann natürlich auch manuell über die „Für Web und Geräte speichern…“-Funktion sehr gute Ergebnisse erzielen.

3 Antworten zu “Bilder optimieren – für kürzere Ladezeiten im Web”

  1. gualterios sagt:

    Die Homepage ist lediglich ein Synonym für die Startseite. Die Bilder müssen also nicht für die Homepage, sondern für die Website optimiert sein.

  2. Hanna sagt:

    Vielen Dank für die Anmerkung, da stimmen wir natürlich zu.
    Hanna vom marketingfire-Team

  3. Marcel sagt:

    Sehr schöner Beitrag. Dazu möchte ich noch auf folgenden Artikel verweisen http://thinq.digital/seo/webfreundliche-ladezeit-

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.



Weitere Artikel zu Design

Aufgeräumt, aber unübersichtlich! Trotz Raster- und Kachelsystem ist die... Mehr lesen »

Bei der heutigen Landingpage handelt es sich um eine Microsite bei der man... Mehr lesen »

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen... Mehr lesen »


Weitere Artikel von Alexander
Design
Aufgeräumt, aber unübersichtlich! Trotz Raster- und Kachelsystem ist die... Mehr lesen »

Landingpages Online Marketing
Conversion Rate mit Videos auf Landingpages erhöhen? Aber klar! Hier sind... Mehr lesen »

Design Landingpages Online Marketing
Bei der heutigen Landingpage handelt es sich um eine Microsite bei der man... Mehr lesen »

Top-Beiträge

Facebook

Bilder posten auf Facebook

Nicht jedes Bild passt in das neue Konzept der Facebook Chronik. Aber wie müssen Bilder jetzt... Mehr lesen »
Design

13 coole Header-Effekte für Webseiten

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen animiert werden. Manche... Mehr lesen »
AdWords

5 Tipps zur Verbesserung der CTR

Update 04/2016   Die CTR (Click-Through-Rate, also die Klickrate) spielt eine große Rolle in... Mehr lesen »
^