Bilder für Websites optimieren

Bilder werten Websites erst richtig auf und sorgen dafür dass ein Leser sich auf einer Seite wohl fühlt. Bilder erzeugen Stimmungen und machen eine Website erst interessant. Allerdings haben Bilder den Nachteil, dass sie eine gewisse Dateigröße haben und so den Seitenaufbau einer Website verzögern. Das gilt insbesondere dann wenn die Bilder nicht optimal für die Website aufbearbeitet sind.

Bildgröße verringern
Ein Bild von einer Digicam hat typischerweise eine Größe von eins bis drei Megabyte. Auch mit einer schnellen DSL-Leitung würde das Laden nur dieses einen Bildes schon eine Sekunde dauern - über das mobile Internet entsprechend länger. Das macht schon aus dem Grund keinen Sinn solche großen Bilder zu verwenden, da die Monitore solch große Bilder gar nicht in diesen Details darstellen. Für ein Internetbild reicht eine Bildgröße von typischerweise 500 bis 800 Pixel Seitenbreite. Man kann also ohne dass die Bilder schlechter Aussehen die Bildgröße verringern - im Fachjargon spricht man von skalieren.

Bilder komprimieren
Eine weitere Option für Internetbilder ist es diese zu komprimieren. So werden pixelweise Bereiche mit ähnlichen Farben, zum Beispiel im blauen Himmel, zusammengefasst. Die Komprimierungsstufe kann man auf einer Skala von Null bis hundert frei wählen. Eine Komprimierungsstufe von 75 reduziert ein Bild schon beträchtlich, ohne dass das Bild dabei merklich an Qualität verliert. Was das für eine Seite bringen kann, und warum man nicht die Wordpress Mediathek nehmen sollte, sieht man gut im Artikel Wordpress Bilder optimieren bei WP-Ratgeber.de.

Progressive JPG-Bilder
die beste Komprimierung bietet immer noch das Dateiformat JPG. Es ist allerdings darauf zu achten, dass die Bilder als progressive JPG abgespeichert werden. Das macht sich beim Seitenaufbau positiv bemerkbar. So wird erst eine Vorschau des Bildes geladen, und wenn die Seite vollständig ist, das komplette Bild. Benötigt man Transparenz muss man zu GIF-Bildern (einfache Grafiken) oder PNG greifen.

Lazy Load
Im Zusammenhang mit dem Seitenaufbau gibt es noch eine bemerkenswerte Technik mit den Namen Lazy Load. Wenn eine Seite geladen wird benötigt man nur die Bilder im sichtbaren Bereich. Die Bilder die ganz unten sind, und die der User noch nicht sehen kann müssen nicht zwingend vorhanden sein. Dies wenden Tools wie das Lazy-Load-Plugin für Wordpress an, indem sie die Bilder tatsächlich erst laden wenn sie gebraucht werden.

Fazit
Wer seine Bilder gut optimiert kann die Ladezeit seiner Seite beträchtlich verringern und damit die Zufriedenheit der Besucher verbessern.