Skip to content

So verbessert ihr das Tempo eurer Website | Teil 2

In Teil eins der Reihe „So verbessert ihr das Tempo eurer Website“ haben wir darüber berichtet, wie Bilder komprimiert werden müssen, damit die Performance eurer Website optimiert wird.  Natürlich war das noch nicht alles: Verschiedene Bildformate wirken sich auch ganz unterschiedlich auf die Schnelligkeit aus. Welche Bildformate es überhaupt gibt und warum manche besser für die Verwendung im Internet geeignet sind, erklären wir jetzt.

 

Welche Bildformate gibt es überhaupt?

1. JPEG

auch JPG (Joint Photographic Experts Group)

JPEG beschreibt verschiedene Ansätze der Bildkompression. Darunter gehören unter Anderem Komprimierungs- und Codierungsmethoden wie die verlustbehaftete und verlustfreie Kompression.

JPGs werden unter einer bestimmten Norm geführt. Bei dieser Norm handelt es sich alleinig um ein Bildkompressionsverfahren. Dies schließt keine Information über die Speicherung der Daten ein. Im Allgemeinen werden mit JPEG-Dateien Dateien im Grafikformat JPEG File Interchange Format (JFIF) bezeichnet. 

 

Verwendung:

JPEG wird oft für die Verarbeitung und Speicherung von farbigen Bildern mit realistischen Elementen und Helligkeit und Farbübergängen verwendet

 

2. PNG 

(Portable Network Graphic)

Verwendung:

Das PNG Format sollte dann verwendet werden, wenn Logos oder Infografiken dargestellt werden sollen. Besonders bei Logos spielt die Transparenz eine große Rolle, da das Icon häufig auf einem andersfarbigen Hintergrund dargestellt werden soll. Gerade wenn es im Bild gleichfarbige Flächen zu finden sind, kann PNG dieses gut komprimieren. Weißt das Foto allerdings eine hohe Farbdiversität auf, sollte man besser JPG wählen.

 

3. WebP

Das von Google entwickelte Bildformat WebP bietet sowohl verlustfreie als auch verlustbehaftete Kompression an und ist daher flexibel einsetzbar. Es vereint eine kleinere Dateigröße mit vergleichbarer Qualität. Im Hinblick auf Web-Performances könnte es PNG und JPG in deren Vormachtstellung ablösen. Bereits jetzt kann es PNG-Bilder bei gleicher Qualität um 26% verkleinern. Das Format wird von allerdings nur von den Browsern Chrome und Opera unterstützt, es wurde nämlich von Google auf den Markt gebracht.

 

Allgemeine Tipps zur Performance-Optimierung von Bildern und Fotos auf Websiten:

  1. Wählt immer das richtige Format. Fotos werden in der Regel als JPEG gespeichert, während Grafiken, Textbilder und andere Bilder mit gleichfarbigen Flächen als PNG gespeichert werden sollten.

  2. Wenn Ihr WordPress verwendet, könnt Ihr ein Plugin installieren, dass gewährleistet, dass Bilder, die sich am Ende einer Seite befinden auch erst dann geladen werden, wenn sie angezeigt werden müssen. Diese Art von Plugins nennt man „Lazy-Load“-Plugins. 

  3. “So viel wie nötig, so wenig wie möglich”: ja, dieser Spruch passt in vielen Situationen, aber wie am Anfang gesagt, sind Bilder und Videos der Übeltäter, die die Schnelligkeit hemmen. Bilder sollen unterstützend wirken und nicht die Seite überladen. 

  4. WordPress bietet die Möglichkeit Bilder beim Einfügen zu skalieren. Diese Möglichkeit sollte genutzt werden! Höchsten empfiehlt sich eine Größe von max. 1200 x 900 bzw. 1600 x 900 Pixeln.

 

Ebenfalls interessant:

Bildquelle: #109401734 © Urheber: peshkov- stock.adobe.com

Larissa Arpogaus

Larissa Arpogaus, UX-Design bei SELLWERK

Kommentar verfassen

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