Beim Wettlauf um schnellere Ladezeiten gibt es immer wieder eine große Herausforderung: Bilder. Insbesondere auf Business-Webseiten mit großformatigen Hintergrundbildern oder Bildergalerien. Vor allem natürlich auch auf E-Commerce-Webseiten mit detaillierten Produktdarstellungen machen Bilder oft einen Großteil der Gesamtgröße der Seite aus und verlangsamen damit den Seitenaufbau. Eine gute Lösung sind Bildkomprimierungen, aber es gibt noch eine andere Alternative: Nutzen Sie das richtige Bildformat und testen Sie, was mit anderen Bildformaten, wie zum Beispiel FLIF – dem neuen „Free Lossless Image Format – möglich ist. Sie werden überrascht sein, wie viel Dateigröße Sie damit einsparen können.
Wie Sie sehen, ist das Thema Bildgrößen in Zusammenhang mit Pagespeed enorm wichtig. Deshalb habe ich Ihnen einige Tipps zusammengestellt, die Sie beachten sollten.
Tipps zu Bildern und Bildgrößen
Tipp 1 – Schneiden Sie Bilder immer passend auf das Format zu
Wenn Sie auf Ihrer Webseite Bilder verwenden, sollten Sie diese exakt auf die benötigte Darstellungsgröße zuschneiden, denn jedes überflüssige Pixel kostet Ladezeit. Responsive-Themes erstellen in der Regel automatisch eine Reihe verkleinerter Bildformate für die schnelle Darstellung auf kleineren Bildschirmen, wie zum Beispiel auf mobilen Endgeräten wie Tablet oder Smartphone. Dennoch sollten die von Ihnen eingebauten Bilder maximal das größte verwendete Darstellungsformat besitzen.
Tipp 2 – Komprimieren Sie Bilder
Darüber hinaus sollten Sie Bilder komprimieren. Mit Bildbearbeitungsprogrammen wie zum Beispiel Photoshop oder dem kostenlosen Gimp können Sie beim Abspeichern eines Bildes die Bild-Qualität optional verringern und damit die Bildgrößen weiter minimieren. Doch Vorsicht: setzen Sie die Qualitätsstufe zu weit herunter, wird die Bilddatei zwar kleiner, aber das Ergebnis könnte dadurch unbrauchbar werden. Bilder verlieren an Brillianz oder pixeln auf … Wenn Sie mit diesen Einstellungen schon einmal experimentiert haben, werden Sie wissen, was ich meine.
Im Internet finden Sie Online-Tools wie Compress.io oder Compressjpeg.com mit denen Sie kostenlos JPG/JPEG oder, wie mit Compressor.io, JEPG, PNG, GIF und SVG-Bilddateien komprimieren können. Damit lassen sich oftmals 15 – 60% oder Dateigröße – oder noch mehr – relativ verlustfrei einsparen.
Sehen Sie selbst, wie Sie die Bildgrößen eines Logos oder eines Fotos mit einem Bildkomprimierungstool optimieren können.
Beispiel: Logo (Format 358 x 157 Pixel)
Je nach Dateiformat lässt sich die Bildgröße um bis zu 75% verkleinern.
- Im konventionellen JPG-Format 205.74 KB
- Als komprimiertes JPG-Format 64.39 KB
Reduktion der Dateigröße um 69%
- Im konventionellen PNG-Format 186.78 KB
- Als komprimiertes PNG-Format 47.53 KB
Reduktion der Dateigröße um 75%
- Im konventionellen GIF-Format 87.63 KB
- Als komprimiertes GIF-Format 48.94 KB
Reduktion der Dateigröße um 44%
Beispiel: Foto (Format 540 x 255 px)
Je nach Dateiformat lassen sich die Bildgrößen um bis zu 67% verkleinern.
- Im konventionellen JPG-Format 38.6 KB
- Als komprimiertes JPG-Format 26.93 KB
Reduktion der Dateigröße um 33%
- Im konventionellen PNG-Format 162.4 KB
- Als komprimiertes PNG-Format 53.63 KB
Reduktion der Dateigröße um 67%
Automatische Bildkomprimierung mit Plugins
Für CMS-Systeme wie WordPress gibt es sowohl kostenlose als auch kostenpflichtige Plugins, die Ihre Bilder beim Upload automatisch komprimieren. Beliebte Bildkomprimierungs-Plugins für WordPress sind zum Beispiel Smush Image Compression and Optimization oder Optimus
Weitere Informationen zum WordPress-Plugin WP-Smushit
Weitere Informationen zum WordPress-Plugin Optimus.io
Tipp 3 – Nutzen Sie die richtigen Bildformate
Aktuell werden gewöhnlich folgende digitale Bildformate im Grafikbereich verwendet: GIF (Graphics Interchange Format), PNG (Portable Network Graphics), JPG/JPEG (Joint Photographic Experts Group), TIFF (Tagged Image File Format) und BMP (Bitmap). Für den Einsatz im Web scheidet das unkomprimierte TIFF-Format aufgrund seiner Dateigröße aus. Ungeeignet für Online-Darstellungen ist auch das BMP-Format, da es sich nur äußerst begrenzt skalieren lässt. Bilder im GIF-, PNG- und JPG-Format können von jedem aktuellen Browser interpretiert und dargestellt werden. Hinsichtlich der Bildgröße gibt es aber auch hier schon Differenzen. Abbildungen im GIF-Format benötigen von diesen drei Formaten den geringsten Speicherplatz, da dieses Format allerdings auf 256 Farben beschränkt ist, eignet es sich lediglich für rein grafische Elemente und nicht für Fotos.
Aber es geht auch noch kleiner und ladefreundlicher – mit FLIF
Ein sehr interessantes Bildformat ist zum Beispiel FLIF – das Free Lossless Image Format, das in der SEO- und Entwicklerszene bereits für einiges Aufsehen gesorgt hat. Ein Bild im FLIF-Format ist über 40% kleiner als im PNG-Format und über 70% kleiner als im klassischen JPG-Format und das verlustfrei.
Aber die schlanke Dateigröße ist noch nicht alles, sondern Bilder im FLIF-Format lassen sich auch progressiv laden. Ein besonderer Vorteil zum Beispiel bei Seitenaufrufen über mobile Endgeräte denen nur geringe Bandbreiten zur Verfügung stehen.
Die Leistungsmerkmale des FLIF-Bildformats sind überzeugend und sie gebe eine Vorstellung davon, was im Bereich der Bildkomprimierung in Zukunft noch möglich ist. Allerdings – und das muss hier leider erwähnt werden, wird das Free Lossless Image Format (FLIF) aktuell weder von beliebten Browsern wie Google Chrome oder Mozilla Firefox, noch von Bildbearbeitungsprogrammen wie Photoshop oder GIMP unterstützt. Bildkonvertierungen in das FLIF-Format sind derzeit leider nur über diverse Online-Tools möglich.
Insbesondere für Entwickler und Webdesigner lohnt es sich, die Entwicklungen von FLIF und neuen Konzepten der Bildkomprimierung weiter im Auge zu behalten.
Weitere Informationen zu FLIF, dem Free Lossless Image Format finden Sie unter flif.info
