Grafiken und Bilder

Mit Bildern und Grafiken hast du eine weitere Möglichkeit deine Page zu verfeinern.
Dies kann ein Hintergrundbild sein, grafische Buttons, themenspezifische Bilder oder einfach Bilder von dir. Aber auch hier gibt es einige Regeln, die du beachten solltest.

» Bilder:

Bilder sind natürlich auf fast jeder privaten Page zu finden, sei es vom Webmaster, Landschaftsbilder, ein Hintergrundbild oder etwas anderes. Hier musst du aber bedenken, dass Bilder sich auch sehr negativ auf die Ladezeit auswirken können. Du solltest deshalb, bevor du Bilder verwendest, diese für das Web optimieren. Dies bedeutet, du solltest das Bild in eine annehmbare Größe bringen und auch in ein webtaugliches Format speichern. Als Format eignet sich hier vor allem das jpg-Format. Dieses Format hat den Vorteil, das die Bilder kompromiert werden und dadurch weniger schwer sind. Es gibt zwar dabei einen kleinen Qualitätsverlust, dieser ist aber auf einer Webseite kaum merklich.

» Thumbs:

Du solltest wissen, dass beim Laden einer Seite immer alle Bilder in Original geladen werden. Ein Bild wird vielleicht nicht so ins Gewicht fallen, aber bei vielen Bildern auf einer Seite wird das die Ladezeit erheblich beeinträchtigen. Hier ist ein sehr häufiger Fehler, den viele machen, das sie nur mittels HTML die Pixelangaben ändern. Zwar wird nun das Bild verkleinert dargestellt, es wird jedoch trotzdem das Original geladen.

Ich empfehle dir deshalb, Thumbs von den Bildern zu erstellen, so dass du praktisch Vorschaubilder hast. Thumbs kannst du sehr einfach mit einem Freewareprogramm erstellen. Du kannst dann diese Thumbs auf einer Seite als Vorschaubilder belassen und sie mit dem Original verlinken.
Es werden durch diese Methode zuerst nur die kleinen Bilder geladen und das Original nur dann, wenn man es tatsächlich aufruft.

» Animierte Bilder:

Von Anfängern werden immer wieder Gifs in Massen eingesetzt. Da hüpft, springt und zappelt es. Davon kann ich dir nur abraten. Zu viele animierte Bilder machen zum einen die Page sehr unruhig und sie lenken auch vom eigentlichen Inhalt ab. Viele Besucher verlassen solche Seiten sofort wieder.
Jedoch kann ein animiertes Bild, an der richtigen Stelle eingesetzt, dazu beitragen, die Page aufzulockern. Nur solltest du damit sehr sparsam umgehen.

» Alt Tags:

Alt Tags sind ein beschreibender Text für Bilder, der durch HTML eingegeben wird. Du solltest bei Bildern immer einen Alt Tag eingeben. Du kannst darin eine kurze Beschreibung der Bilder hineinschreiben oder einfach einen aussagekräftigen Namen für das Bild.
Bei einen Menü mit Grafikbuttons hat dieser Tag noch einen weiteren Vorteil. Falls ein Besucher nur mit einem reinen Textbrowser surft, sieht er zumindest immer den Text, den du im Alt Tag angegeben hast und hat somit trotzdem ein Menü.

Leider erscheint beim IE ein kleiner Nebeneffekt. Der Text, den man eingibt, erscheint, wenn man mit der Maus darüberfährt. Meist ist dieser Effekt nicht erwünscht, weshalb viele einfach den Alt Tag weglassen.
Du kannst diesen Effekt jedoch vermeiden, in dem du noch zusätzlich einen leeren title Tag eingibst.