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 haben nur maximal 25-50 KB. Das ist oft mit Bildern und Texten nur sehr schwer zu erreichen. Wenn Sie einmal 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! Durch derart hohe Ladezeiten verärgert man natürlich auch den geduldigsten Besucher.

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 "Raketen" sind: Bilder sollten möglichst nicht mehr als 10 oder 15 KB haben. Sie werden feststellen, dass man oft schon mit 6 bis 9 KB gute Qualitäten erreichen kann - schließlich will ja niemand daraus ein Poster machen.

png und jpg sind die gängigen Grafikformate

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 durchsichtigen Hintergrund, wie z.B. Logos.

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 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 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.