Banner

Bilder in Internetauftritten


Ein schöner Internetauftritt zeichnet sich natürlich auch durch schöne Bilder aus. Damit kann er aber auch schnell an seine technischen Grenzen stoßen. Man kann enorm viel Speicherplatz einsparen und die Geschwindigkeit entsprechend enorm verbessern, wenn man sich an ein paar Regeln hält.

Richtige Größe

Man kann durch einfache HTML- und CSS-Befehle ein Bild sehr schnell anpassen. Das ist jedoch schlechter Stil und Ressourcenverschwendung. Nimmt man ein Bild mit einer guten Digitalkamera auf, kann dies leicht 10MB für sich beanspruchen. Bei 10 Bildern wird das ziemlich viel. Alte Modemanschlüsse bräuchten dafür ca. 10 Stunden.
Werden die Bilder gleich mit einer Bildbearbeitungssoftware (z.B. GIMP) auf die exakt nötige Größe umgerechnet, schrumpft die Größe schnell auf meist unter 50kB. Das entspräche bei dem 10MB-Beispiel 0,5%.
Für dich ist es bequemer, die Größe über Befehle festzulegen. Deinen Besuchern vergeht dabei allerdings schnell die Freude. Die meisten werden die Seite dann wohl schnell schließen.

Das richtige Format

Es gibt einige Bildformate mit Vor- und Nachteilen. Benutze kein bmp, es hat keine Vorteile gegenüber den Folgenden.
jpeg/jpg verliert einige Informationen gegenüber dem Original. Bei Fotos und Bildern, die wenig zusammenhängende gleichfarbige Flächen verwenden ist das meist die richtige Wahl. Es beherrscht allerdings keine Transparenz. Auch gut geeignet für Hintergründe.
gif ist ein Format mit vielen Möglichkeiten. Neben Transparenz sind hier sogar bewegte Bilder möglich. Es komprimiert verlustfrei. Allerdings ist die Farbtiefe sehr eingeschränkt. Eine gute Wahl für Logos und Icons.
png macht das Trio komplett. Es komprimiert auch wie gif ohne Verlust von Informationen. Wie jpeg kann es eine sehr hohe Farbtiefe verwenden. Transparenz unterstützt es außerdem. Jedoch keine Animationen. Am besten ist es geeignet für Designelemente wie Schattierungen und Buttons.

Das alt-Attribut

Ein Bild in einer Website einzubinden ist denkbar einfach. Allerdings reicht es nicht nur das Bild angegeben. Es muss auch ein beschreibender Alternativtext angegeben werden. Das ist wichtig!

<img src="krone.jpg" alt="Königskrone" />

Warum brauch ich das? Sieht doch jeder, was drauf ist!
Falsch: Es sieht eben nicht jeder. Sehbehinderte Menschen haben da ihre Schwierigkeiten. Die können es sich allerdings vorlesen lassen, wenn das alt-Attribut gesetzt ist. In einigen Browsern erscheint auch der alt-Text statt dem Bild.
Um das zu ermöglichen, muss eine Beschreibung des Bildes mit alt="" angegeben werden. Die Fälle sind auch gar nicht so selten.
Inzwischen wird eine fehlende alt-Angabe als fehlerhafter Code von Browsern und Suchmaschinen erkannt.
Außerdem: Es beschreibt das Bild gut für Suchmaschinen ;-)