Tutorial: Bilder und Grafiken auf der Webseite einsetzen

Tipps für die Erstellung einer eigenen Webseite: Bilder, Grafiken und Animationen im Internet einbinden. Richtige Größe und Grafik-Formate.

Wie setzt man richtig Bilder und Grafiken auf der Webseite ein?

Die Größe von Bildern

Optimale Seiten hatten einst einmal nur maximal 25-50 KB. Das ist heute oft mit Bildern und Texten nur sehr schwer zu erreichen. Wenn Sie heute andere Seiten ansurfen, werden Sie häufig feststellen, dass einzelne Bilder allein schon mehr als 25 KB haben, vereinzelt sogar 40, 50 oder 80 KB pro Bild! Genrell gilt: Je kleiner die Datei, desto schneller die Ladezeiten.

Als Faustregel gilt deshalb: Lieber die Größe der Bilder insgesamt verkleinern, als eine zu lange Ladezeit in Kauf zu nehmen! Selbst wenn unsere Server im Vergleich zu Mitbewerbern meist "Raketen" sind: Bilder sollten je nach Abmessung natürlich, kleine Dategrößen haben; möglichst nicht mehr als 15 KB haben. Sie werden feststellen, dass man oft schon mit 10 KB schon gute Qualitäten erreichen kann - schließlich will ja niemand daraus ein Poster machen.

TIPPS: Zum Bilder schrumpfen gibt es verschiedene Tools. Ein schönes gratis Tool ist irfanview, damit lassen Sie auch batch Vorgänge - also viele Bilder auf einmal - bequem schrumpfen. Ein sehr gutes online Tool gibt es bei https://tinypng.com/ . Schieben Sie einfach Ihre Bilder dorthin - Sie erhalten diese komprimiert und ohne einen Unterschied in der Qualität zu bemerken, zum Download zurück.

.png und .jpg sind die gängigen Grafikformate, .gif in Ausnahmefällen

Das Format jpg ist in der Regel für Fotos zu bevorzugen. Das png Format eignet sich auch sehr gut für Fotos, aber insbesondere für Bilder und Texturen mit einem transparentem Hintergrund, wie z.B. oft bei Logos eingesetzt.

Animationen

Für Animationen sollten Sie das Format "animiertes gif" nicht mehr verwenden, weil es aufgrund der maximalen 256 Farben nur ganz einfache Cliparts schön darstellen kann. Dieses Format wird aus diesem Grund mittlerweile nicht mehr häufig verwendet. In den Formaten png und jpg kann man (noch) keine Animationen erzeugen. Man kann aber durchaus Javascript oder HTML5 verwenden, um einzelne Bilder oder Fotos, z.B. in einem Slider im Kopfbereich einer Webseite, zu animieren. Auf Flash-Animationen sollten Sie ggf. für normale Anwendung verzichten, weil diese auf Apple-Geräten nicht abgespielt werden können und auf anderen Geräten ein spezielles Browser-Plug-In benötigt wird.

Bildarchive

Früher oder später wird das eigene Bildmaterial knapp oder ist gar nicht vorhanden. Hier helfen kostenpflichtige Bilderarchive, mit großer Auswahl, kleinen Preiseund und recht guten Fotos , wie zb.

Fotolia Fotolia

istock oder Panthermedia. Für relativ wenig Geld erhält man schon ganz gute Fotos. Wirklich einzigartige Fotos gibts es bei den "großen, alten" Stockfoto Anbietern zb. Getty. Es gibt auch gratis Bildarchive, leider haben wir hier selten was finden können, was man auf Webseiten sehen möchte. Der Vollständigkeit halber sind genannt:  http://www.pixelio.de/