Bilder einfügen
Was ist eine Homepage ohne Grafiken? Langweilig! (Zumindest die meisten.) Grafiken, das sind zum Beispiel der Hintergrund einer Seite (in meiner Box das leicht verwischte Grün), ein aufwändiger Schriftzug in einer superseltenen Schriftart, ein animiertes Gif, eine Eckbordüre und natürlich die Bilder einer Gallerie.

In diesem Bereich findest du die Themen
Ein Wort zu Bildbearbeitungsprogrammen
Grafikformate
Bilder einfügen
Feste Maße zuweisen
Bilder als Links
Hintergrundsbilder
Vorschaubilder

 

Bildbearbeitungsprogramme

Um deine Homepage mit Grafiken aufzupeppen, solltest du zumindest über ein kleines Grafikprogramm verfügen. Paint ist vermutlich auf jedem PC zu finden (Start - Programme - Zubehör - Paint), kann aber nur Bitmaps (bmp) bearbeiten, die sich für die Gestaltung einer Webseite kaum eignen - die Dateien sind einfach viel zu groß.

    Was sollte das Programm auf jeden Fall können?
  • die Formate JPG und GIF bearbeiten (!!!), am besten auch in den verschiedenen Komprimierungsstufen
  • Bilder vergrößern und verkleinern
  • Bildausschnitte herstellen
  • Schrift bearbeiten
    Nett wäre es außerdem, wenn es folgende Funktionen aufweisen würde:
  • Farben in HTML-Code darstellen
  • die Position des Mauszeigers im Bild in Pixeln angeben (später wichtig für Image-Maps)
  • verschiedene Werkzeugfunktionen
  • Filter sind auch nicht schlecht für besondere Effekte

Ich benutze PaintShop Pro 6. Du kannst die neueste Version dieses Programmes auf der Homepage von Corel herunterladen und 30 Tage lang kostenlos testen: PaintShop Pro. Den Preis von knapp 90 Euro finde ich für den Umfang angemessen, aber im Netz gibt es auch kostenlose Bildbearbeitungsprogramme wie zum Beispiel GIMP, das Photoshop sehr ähnlich sein soll.

 

Grafikformate

Die gängigsten Formate für Webgrafiken sind gif und jpg, und an diese solltest du dich auch halten. Was ist daran so besonders? Nun, sie bieten relativ gute Qualität bei relativ kleiner Datengröße - und die ist ja im Web das A und O. Die meisten anderen Grafikformate sind voluminöser, und mit dem PNG-Format kommen einige Browser nicht zurecht.

JPG bietet eine hohe Farbenvielfalt; wenn du Bilder mit vielen verschiedenen Farben hast (Farbübergänge gehören auch dazu), solltest du zum JPG greifen. Bei vielen Programmen kannst du die Komprimierungsqualität bestimmen. Die meisten Bilder vertragen es ohne sichtbaren Verlust, um bis zu 15 - 20 % komprimiert zu werden. Rottöne sind allerdings sehr kritisch, die "grisseln" schon je nach Menge und Fläche bei 1 - 2 %.

GIF ist in seiner Farbanzahl eingeschränkt auf maximal 256 Farben. Das klingt im ersten Moment viel, ist es aber nicht, wenn du ein farbenreiches Werk hast. Hast du jedoch Grafiken mit weniger Farben (Schriftzüge zum Beispiel - Schwarz auf Weiß; Strichzeichnungen, Skizzen, Tuschezeichnungen, Comicartiges mit flächigen Farben, etc.), solltest du dem GIF-Format eine wohlwollende Chance geben. Die Farben werden gestochen scharf, wo es beim JPG schon mal zu Verwischungen kommen kann, und die Dateigröße ist auch geringer. Außerdem ist GIF das Format für teilweise transparente Grafiken - optimal also, um Bilder nahtlos auf einem gemusterten Hintergrund erscheinen zu lassen.

PNG verbindet die Vorteile von JPG und GIF. Es hat die Farbvielfalt der JPGs, kann aber auch transparent wie ein GIF sein und ohne Farbverlust komprimiert werden. Wie bereits erwähnt haben jedoch einige Browser damit Probleme; ich verwende es nicht, weil mein Grafikprogramm zu alt ist, um es zu erzeugen.

Ob du im Endeffekt JPG oder GIF vorziehst, ist bei jedem Bild eine neue Entscheidung. Im Zweifelsfall schau dir im Vorschaufenster deines Grafikprogramms beide Versionen an und entscheide dich jedes Mal aufs Neue, in welchem Verhältnis Qualität zu Dateigröße steht.

Hier siehst du ein Bild von Chrys (© Blackdragon), das ich jeweils durch einige Komprimierungsstufen als JPG und GIF "gejagt" habe: Beispiele (Vorsicht, die Ladezeit könnte etwas länger werden.)

 

Bilder einfügen

Ah, endlich kommen wir zum interessanten Teil! Dem HTML-Code! ^_~ Nach der vielen Theorie nun die Praxis, und die ist simpel und kurz:

<img src="chrys.jpg">

Dieses Stück Code fügt das so benannte Bild ein. img ist die Abkürzung für engl. image, was Bild bedeutet. src steht für engl. source, was Quelle im Sinne von Ursprung ist. Zwischen die Gänsefüßchen kommt dann der Bildname samt richtiger Endung. Auch hier gilt, was ich schon beim Verlinken aufgeführt habe: mit dem Ordnernamen kommt man in einen Ordner rein, mit ../ wieder raus.

 

Feste Maße zuweisen

Ein nettes Schmankerl, gerade wenn man einen Text mit Bildern dekoriert, ist das Zuweisen der Bildgröße im img-Tag. Dafür musst du die Größe des Bildes kennen. Die nennt dir entweder dein Zeichenprogramm oder beispielsweise Irfan View. Unser Beispielsbild (der erschrockene Chrys) ist 200 Pixel breit und 200 Pixel hoch - dargestellt in den meisten Programmen als 200x200 (manchmal kommt hier nach einem weiteren x noch eine weitere Zahl, die du getrost ignorieren kannst). Erst Breite, dann Höhe. Wie üblich sind die Angaben englisch.

<img src="chrys.jpg" width=200 height=200>

Was bringt das? Nun, Text lädt deutlich schneller als Bilder. Der Besucher beginnt zu lesen, dann poppt das Bild in den Text, der Text verschiebt sich, der Besucher verliert die Zeile und ärgert sich ein bisschen. Mit den Größenangaben hält der Browser an dieser Stelle gleich einen Platzhalter für das Bild frei, der Text baut sich gleich darum herum auf, und alle sind froh und zufrieden.

 

Bilder als Links

Natürlich kann man Bilder auch als Link benutzen. So funktionieren die Schriftzüge in der Navigation meiner kleinen Box. ^_^ Erst setzt man den ganz normalen Link, dann fügt man statt eines Schriftzugs den Tag für das gewünschte Bild ein.

<a href="http://www.jainoh.de" target=_blank>
  <img src="jai-banner.jpg" border=0>
</a>

border=0 sorgt dafür, dass um das Bild kein hässlicher Rahmen in einer nichtgefälligen Farbe entsteht. Lass den Befehl ruhig mal weg und schau dir an, wie es dann aussieht.

 

Hintergrundsbilder

Du willst keinen einfarbigen Hintergrund haben, weil das langweilig ist? Kein Problem. Aber erinnere dich daran, dass ein unruhiger Hintergrund zu sehr vom Inhalt ablenkt oder es schwer macht, länger auf der Seite zu verweilen, weil man Texte nur schwer lesen kann oder schlicht angenervt ist.

Erinnere dich an den body-Tag, in dem schon die Hintergrundsfarbe definiert wurde. Das solltest du auch weiterhin tun, da die Farbe vor dem Bild geladen wird, und damit ein unschönes Aufflackern in einer unpassenden Farbe vermieden wird. Der passende Befehl ist folgender:

<body bgcolor="#000000" background="tapete.gif">

Damit würde das Bild tapete.gif als Hintergrund gesetzt, und zwar als sich endlos wiederholende Kachel. Wähle also ein Bild, das auch in der Wiederholung gut aussieht.

Welches Attribut ich bei Hintergründen sehr schätze, ist der Befehl, der bewirkt, dass ein Hintergrund nicht mitscrollt, wenn man im Text weitergeht. Es gibt einen veralteten Befehl, der auch nur für den IE Gültigkeit hat. bgproperties="fixed" fügt man auch in den body-Tag ein. Die weitaus elegantere Methode ist jedoch über Stylesheets, denen ich jedoch an anderer Stelle mehr Aufmerksamkeit widmen werde.

 

Vorschaubilder

Vorschaubilder aka Thumpnails sind die kleinen Bilder oder Bildausschnitte, die man häufig in Galerien findet, die einen ersten Eindruck des Bilds hinter dem Link geben, ohne dass man das Bild erst laden muss. Sinn der Sache ist, dass man einen Überblick erhält, ohne gleich die kompletten Grafiken laden zu müssen und sich dann entscheiden zu können, welches Bild man wirklich anschauen will - ergo Wartezeit reinstecken, bis es geladen ist.

Niemals, und ich wiederhole, niemals erstelle Vorschaubilder, indem du die originalen Bilder verlinkst und sie via HTML lediglich kleiner erscheinen lässt. Egal wie klein das Bild erscheinen mag, es wird die Originalgröße geladen, und das frisst Zeit und Datenverkehr ohne gleichen. Dann kannst du dir Thumpnails auch gleich sparen und alle Bilder auf eine Seite packen.

Schnappe dir dein Zeichenprogramm, entscheide dich für eine geeignete Größe der Thumpnails (ich preferiere 100x100 Pixel, aber das ist eine ganz individuelle Vorliebe) und dann verkleinere entweder das gesamte Bild auf dieses Format und speichere es extra ab oder wähle einen besonders interessanten Ausschnitt in dieser Größe. Der entsprechende Code kann dann zum Beispiel so aussehen:

<a href="chrys.jpg">
  <img src="tn-chrys.gif" border=0 width=100 height=100>
</a>

Damit lädt die Galerieseite mit den Thumpnails das Vorschaubild namens tn-chrys.gif, und bei einem Klick darauf kommt man direkt auf das Originalbild. Du kannst natürlich das Originalbild auch dekorativ in eine eigene HTML-Datei einbinden. Dann könnte der Link so aussehen:

<a href="chrys01.html">
  <img src="tn-chrys.gif" border=0 width=100 height=100>
</a>