Bilder mit HTML einfügen

1 - Bild einfügen

HTML Code:

<img src="bild.jpg" />

Bilder und Grafiken in HTML einfügen

Vollständig korrekt sollte obiges Beispiel noch durch den alt-Tag ergänz werden.

<img src="bild.jpg" alt="Kurze Beschreibung"/>

Erklärung zu obigen Codebeispiel:

  • "img" steht für image, engl. für Bild.
  • "src" bedeuted source, engl. für Quelle, dort wird der Dateiname der Grafik bzw. den Pfad dorthin angegeben.
  • "alt" alt ist der alternative Text der angezeigt wird, falls das Bild nicht (mehr) existiert, fehlerhaft benannt worden ist oder ein Besucher alle Bilder ausgeblendet hat.

Um das ganze auf deinem Rechner auszuprobieren, erstellen Sie eine Grafik mit dem Namen den du bei "src" einträgst, und speichere das Bild im selben Ordner indem auch die HTML-Datei liegt, oder lade eine Grafik aus dem Internet (Rechtsklick aufs Bild -> speichern unter) und bennene das Bild nach Wunsch (Rechtsklick auf die gespeicherte Datei -> umbenennen).
Will man nun das Bild skalieren oder horizontal ausrichten, so ist folgendes Beispiel eine Möglichkeit. Einfach mal experimentieren und selber herausfinden was passiert:

<img src="bild.jpg" alt="eine grafik" width="100" height="150" align="left">

 

Achtung:

Wenn Bilder manuell skaliert werden (wie oben gezeigt) kann es passieren, dass das Bild verzerrt wird. Ein Beispiel wäre ein Bild von einem Gesicht dass in der Höhe gleich bleibt jedoch in die Breite gezogen wird. Dass das ganze nicht schön aussieht ist klar. Prozentuale Angaben der Bildgröße wären eine Möglichkeit. So können sie statt 100 einfach 100% schreiben und der Browser halbiert die Maße.

2 - Bilder fürs Web optimieren / verkleinern

Wenn aber, wie oben erwähnt, viele große Bilder per HTML-Angaben verkleinert werden, müssen diese jedoch trotzdem in Originalgröße auf den Computer des Besuchers geladen werden, erst dort kann der Browser diese dann verkleinert anzeigen. Deshalb beugen Sie lange Ladezeiten vor indem Sie Bilder mit einem Grafikbearbeitungsprogramm verkleinern anstatt sie nur mit Hilfe von den HTML-Attributen "width" und "height" zu skalien.

Viele Grafikbearbeitungsprogramme bieten die Möglichkeit Bilder "fürs Web optimiert zu speichern", diese Möglichkeit sollten Sie immer in Betracht ziehen, da die Qualität kaum leidet, jedoch die Dateigröße drastisch reduziert wird.

Tipp: "Bilder online komprimieren" bei einer Suchmaschine eingeben und ihr werdet zahlreiche Programme finden, die euch die Arbeit abnehmen.

 

Wie Sie sehen, sehen Sie nichts! Nun ja, fast nicht... das optimierte Bild, dessen Dateigröße 4 mal kleiner ist, hat eine kleine Unschärfe in den Lichtreflexionen im Auge. Da das auch nur mit genauestem Hinsehen erkennbar ist zeigt ziemlich gut, dass eine Optimierung hinsichtlich der Dateigröße bei wenigen Grafiken kein Nachteil bietet, bei vielen, großen Grafiken zur Notwendigkeit wird.
Sollen Grafiken oder Bilder in hervorragender Qualität Ihren Weg zum Besucher finden, binden Sie diese verkleinert auf Ihrer Webseite ein und verlinken diese zusätzlich in Originalgröße. Ein Link auf große Datein (>500KB) sollten Sie immer kenntlich machen sodass Besucher mit limitiertem Datenvolumen (vorallem beim Surfen mit mobilen Endgeräten) die Möglichkeit haben einen datenintensiven Download zu vermeiden.

 

Hier ein Beispiel (4-faches Datenvolumen gespart):

3 - Bild als Link

Grafiken als Verweise zu definieren ist oft nützlich, z.B. bei einem Button. Mit Hilfe der Schachtelung der beiden Tags ( a-Tag + img-Tag) kann man eine Grafik zum Link machen.

Plus Zeichen

Hierbei gibt es allerdings ein kleines Schönheitsproblem. Links werden standardmäßig unterstrichen um diese als solche kenntlich zu machen und um Grafiken wird ein Rahmen gelegt. Um diesen zu vermeiden muss das Attribut border="0" in den img-Tag eingefügt werden.

Plus Zeichen

<a href="http://www.html-einfach.de/"><img src="bild.jpg" alt="das ist ein bild" border="0"></a> 

Will man nun auf allen Seite das Umrahmen von Grafiken verhindern könnte man das in einer externen Stylesheetdatei zentral definieren:

*img{ border:0px;}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.