« Zurück zu allen Tipps

Bilder optimieren

Home / Tipps / Bilder optimieren /

Die Tipps

Erfahre hier, warum die Ladezeiten deiner Webseite wichtig sind

Deine Bild sind wahrscheinlich für den größten Teil Deiner Ladezeiten verantwortlich. Das liegt einfach daran, dass ein Bild mehr Speicherplatz und damit mehr Zeit beim Übertragen benötigt, als Text. Bei Webseiten gibt es die Faustregel, je kleiner eine Webseite ist, also je weniger Daten übertragen werden müssen, umso schneller lädt die Webseite. Wenn Du also eine schnelle Webseite möchtest, gibt es verschiedene Tricks, wie du das Laden beschleunigen kannst.

Die Richtigen Dimensionen nutzen

Wenn Du Bilder von deiner Kamera auf Deiner Webseite nutzt oder auch von verschiedenen Stock-Foto-Webseiten, hast Du immer eine hohe Auflösung. Dabei geht es darum, dass Du ein qualitativ hochwertiges Bild hast, welches auch vergrößert noch gut aussieht. Da Bilder aber meist nicht als Vollbild genutzt werden, reicht es aus kleinere Versionen von Deinen Bildern auf der Webseite zu nutzen. Bei großen Bildern kannst du so mehrere Megabyte (MB) sparen, die anderweitig heruntergeladen werden müssten. So beschleunigst Du Deine Webseite ohne negative Effekte für den Besucher.

Bei einer meiner Webseiten konnte ich nur durch das Optimieren der Bilder und deren Dimensionen die Größe auf 3,5 MB reduzieren. Und das von ursprünglich 8 MB.

Für die konkrete Umsetzung dieses Tipps empfehle ich Dir Paint, auf Windows (falls verfügbar, Tutorial hier ) oder GIMP , die Open Source Bildverarbeitung (Windows/Mac/Linux, Tutorial hier ). Natürlich geht das auch mit Affinity Photo (Mac) und Photoshop (Windows/Mac).

Fun Fact:
Wusstest Du, dass gut optimierte Webseiten für Smartphones von großen Firmen meinst weniger als 2 MB groß sind? Probiere es aus, öffne die Entwickler Tools Deines Browser und miss die Größe der Webseiten. Miss doch auch Deine eigene Webseite als Vergleich. Du wirst erstaunt sein.

Nutze Das Richtige Format

Ein Bild ist nicht gleich ein Bild, leider. Im Internet gibt es verschiedene Bildformate. Dazu gehören JPGs, PNGs und GIFs. Jedes einzelne Format hat seine Stärken und Schwächen. JPGs sollten für Fotographien genutzt werden, auf denen viele Details zu sehen sind. (Also für Fotos mit dem Handy.) PNGs dagegen sind hervorragend für Illustrationen und Zeichnungen. (Wie hier im Beispiel.) GIFs sind für animierte Bilder.

Wenn Du also Bilder auf Deiner Webseite nutzt, empfehle ich Dir die Bilder einfach einmal in verschiedene Formate zu konvertieren. Damit kannst Du sehen, welches Format das mit dem geringsten Speicherbedarf ist. Das wiederum ist das optimale Format. (Achtung: Google empfiehlt, GIF nur für Animationen einzusetzen und es sonst zu meiden.) So beschleunigst Du Deine Lade erneut.

Auch hier empfehle ich Dir Paint, auf Windows (falls verfügbar,) oder GIMP , die Open Source Bildverarbeitung (Windows/Mac/Linux). Profisoftware wie Affinity Photo (Mac) und Photoshop (Windows/Mac) kann das natürlich auch.

Optimiere Deine Bilder

Es gibt noch weitere Optimierungsmöglichkeiten, wenn Deine Bilder im richtigen Format sind. Dabei kann man die Bilder “lossless” komprimieren. Diese Optimierung verringert die Dateigröße der Bilder, ohne das sich die Bildqualität verringert. Das Ganze funktioniert wie folgt:

Hierbei werden Informationen, die mehrfach aufeinander folgen komprimiert. Im Beispiel kannst Du das an den 3 b’s und and den 4 a’s sehen.

Ganz konkret gibt es dafür Programme, die das machen wie jpegtran , optipng oder gifsicle . Diese Tools musst Du in deiner Command Prompt ausführen. Falls Du nach einem unkomplizierten Tools suchst, wird es hier bald ein Tool zur Optimierung geben.

Benutze die richtige Größe auf dem richtigen Gerät (Pro Tipp)

Kommen wir nun zu einem fortgeschrittenen Tipp. Heutzutage kannst Du Deine Webseite nicht nur mit dem Desktop, sondern auch mit dem Smartphone und Deinem Tablet besuchen. Auf kleineren Geräten benötigt man nur eine kleinere Auflösung der Bilder. Das ist vor allem gut, da man bei Smartphones häufig auch im mobilen Netz surft, welches langsamer sein kann. Es gibt daher die Möglichkeit für verschiedene Geräte verschiedene Auflösungen auszuliefern. Dies kannst Du erreichen indem Du im <img-Tag das srcset-Attribut setzt.

<img src=“MeinBild.jpg"
     alt=“Ein schönes Panorama"
     srcset="MeinBild-mittel.jpg 800w,
         MeinBild-gross.jpg 1200w" >

Dabei definierst Du welches Bild bei welcher Seitenbreite angezeigt werden soll. Das src-Attribut dient hierbei nur für Browser, welche das srcset-Attribut nicht kennen. Für weitere Informationen gibt es hier die Dokumentation: https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Bilder

Warum sollten Bilder optimiert werden?

Bilder automatisch optimieren

Ich arbeite aktuell an einem Tool, mit dem du die Bilder automatisch optimieren kannst. Schaue doch immer mal wieder hier vorbei. Unter dem Menüpunkt “Optimierungssoftware” wirst du bald die Software finden.

 

« Zurück zu allen Tipps