HTML IMG-Tag-Attribute

Verwendung des HTML-IMG-Tags für Bilder und Objekte

Das HTML IMG-Tag regelt das Einfügen von Bildern und anderen statischen grafischen Objekten in eine Webseite. Dieses gemeinsame Tag unterstützt mehrere obligatorische und optionale Attribute, die Ihre Fähigkeit, eine ansprechende, bildorientierte Website zu erstellen, bereichern.

Ein Beispiel für ein vollständig geformtes HTML-IMG-Tag sieht folgendermaßen aus:


Erforderliche IMG-Tag-Attribute

SRC.

Das einzige Attribut, das Sie benötigen, um ein Bild auf einer Webseite anzuzeigen, ist das SRC-Attribut. Dieses Attribut gibt den Namen und den Speicherort der anzuzeigenden Bilddatei an.

ALT.

Um gültiges XHTML und HTML4 zu schreiben, ist auch das ALT-Attribut erforderlich. Dieses Attribut wird verwendet, um nicht visuellen Browsern Text bereitzustellen, der das Bild beschreibt. Browser zeigen den alternativen Text auf verschiedene Arten an. Einige zeigen es als Popup an, wenn Sie mit der Maus über das Bild fahren, andere zeigen es in den Eigenschaften an, wenn Sie mit der rechten Maustaste auf das Bild klicken, und andere zeigen es überhaupt nicht an.

Verwenden Sie den Alternativtext, um zusätzliche Details zu dem Bild anzugeben, die für den Text der Webseite nicht relevant oder wichtig sind. Beachten Sie jedoch, dass in Bildschirmleseprogrammen und anderen Nur-Text-Browsern der Text inline mit dem Rest des Texts auf der Seite gelesen wird. Verwenden Sie beschreibenden Alternativtext (z. B. "Über Webdesign und HTML") anstelle von "Logo", um Verwirrung zu vermeiden.

In HTML5 ist das ALT-Attribut nicht immer erforderlich, da Sie eine Beschriftung verwenden können, um eine Beschreibung hinzuzufügen. Sie können dieses Attribut auch verwenden, um eine ID anzugeben, die eine vollständige Beschreibung enthält:

ARIA-DESCRIBEDBY

Alternativtext ist auch nicht erforderlich, wenn das Bild rein dekorativ ist, z. B. eine Grafik oben auf einer Webseite oder Symbole. Wenn Sie sich nicht sicher sind, fügen Sie für alle Fälle einen Alternativtext hinzu.

Empfohlene IMG-Attribute

BREITE und HÖHE Sie sollten sich angewöhnen, immer die Attribute WIDTH und HEIGHT zu verwenden. Und Sie sollten immer die tatsächliche Größe verwenden und die Größe Ihrer Bilder nicht mit dem Browser ändern.

Diese Attribute beschleunigen das Rendern der Seite, da der Browser dem Bild Speicherplatz im Design zuweisen und dann den Rest des Inhalts weiter herunterladen kann, anstatt auf das Herunterladen des gesamten Bildes zu warten.

Andere nützliche IMG-Attribute

TITLEDas Attribut ist ein globales Attribut, das auf jedes HTML-Element angewendet werden kann. Darüber hinaus können Sie mit dem TITLE-Attribut zusätzliche Informationen zum Bild hinzufügen.

Die meisten Browser unterstützen das TITLE-Attribut, jedoch auf unterschiedliche Weise. Einige zeigen den Text als Popup an, während andere ihn auf Informationsbildschirmen anzeigen, wenn der Benutzer mit der rechten Maustaste auf das Bild klickt. Sie können das TITLE-Attribut verwenden, um zusätzliche Informationen über das Bild zu schreiben, aber nicht damit rechnen, dass diese Informationen entweder ausgeblendet oder sichtbar sind. Sie sollten dies auf keinen Fall verwenden, um Stichwörter für Suchmaschinen auszublenden. Diese Praxis wird jetzt von den meisten Suchmaschinen bestraft.

USEMAP und ISMAP Mit diesen beiden Attributen werden clientseitige () und serverseitige (ISMAP) Imagemaps für Ihre Bilder festgelegt. LONGDESCTDas LONGDESC-Attribut unterstützt URLs zu einer längeren Beschreibung des Bildes. Diese Funktion macht Ihre Bilder leichter zugänglich.

Veraltete und veraltete IMG-Attribute

Einige Attribute sind in HTML5 veraltet oder in HTML4 veraltet. Für bestes HTML sollten Sie andere Lösungen finden, anstatt diese Attribute zu verwenden.

RAND Das Attribut definiert die Breite in Pixel eines beliebigen Randes um das Bild. Es wurde zugunsten von CSS in HTML4 verworfen und ist in HTML5 veraltet. ALIGN Mit diesem Attribut können Sie ein Bild in den Text einfügen und den Text fließen lassen. Sie können ein Bild rechts oder links ausrichten. Es wurde zugunsten der CSS-Eigenschaft float in HTML4 verworfen und ist in HTML5 veraltet. HSPACE und VSPACEDie Attribute HSPACE und VSPACE fügen horizontal (HSPACE) und vertikal (VSPACE) Leerzeichen hinzu. Auf beiden Seiten der Grafik (oben und unten oder links und rechts) werden Leerzeichen eingefügt. Wenn Sie also nur einseitig Leerzeichen benötigen, sollten Sie CSS verwenden. Diese Attribute wurden in HTML4 zugunsten der Rand-CSS-Eigenschaft veraltet und sind in HTML5 veraltet. LOWSRC Das Attribut LOWSRC bietet ein alternatives Bild, wenn Ihre Bildquelle so groß ist, dass sie extrem langsam heruntergeladen wird. Möglicherweise haben Sie ein Bild mit 500 KB, das Sie auf Ihrer Webseite anzeigen möchten, aber das Herunterladen von 500 KB würde viel Zeit in Anspruch nehmen. Sie erstellen also eine viel kleinere Kopie des Bildes, möglicherweise in Schwarzweiß oder einfach nur extrem optimiert, und fügen diese in das LOWSRCattribute ein. Das kleinere Bild wird zuerst heruntergeladen und angezeigt. Wenn das größere Bild angezeigt wird, ersetzt es das niedrig quellige.

Das Attribut LOWSRC wurde Netscape Navigator 2.0 zum IMG-Tag hinzugefügt. Es war Teil von DOM Level 1, wurde aber dann von DOM Level 2 entfernt. Die Browserunterstützung für dieses Attribut war skizzenhaft, obwohl viele Websites behaupten, dass es von allen modernen Browsern unterstützt wird. Es ist in HTML4 nicht veraltet oder in HTML5 veraltet, da es nie offizieller Bestandteil einer der beiden Spezifikationen war.

Vermeiden Sie die Verwendung dieses Attributs und optimieren Sie stattdessen Ihre Bilder, damit sie schnell geladen werden. Die Geschwindigkeit des Ladens von Seiten ist ein wesentlicher Bestandteil eines guten Webdesigns, und große Bilder verlangsamen die Seiten enorm - selbst wenn Sie das LOWSRC-Attribut verwenden.