Das HTML-IMG-Tag bestimmt das Einfügen von Bildern und anderen statischen grafischen Objekten in eine Webseite. Dieses häufig verwendete Tag unterstützt mehrere obligatorische und optionale Attribute, die die Gestaltung einer ansprechenden, bildorientierten Website bereichern.
Ein Beispiel für ein vollständig formatiertes 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 Ort der anzuzeigenden Bilddatei an.
ALT.Um gültiges XHTML und HTML4 zu schreiben, drücken Sie die ALT Attribut ist ebenfalls erforderlich. Dieses Attribut wird verwendet, um nicht visuelle Browser mit Text zu versehen, der das Bild beschreibt. Browser zeigen den alternativen Text auf verschiedene Arten an. Einige zeigen es als Popup an, wenn Sie den Mauszeiger über das Bild bewegen, 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 alternativen Text, um zusätzliche Details zum Bild anzugeben, die für den Text der Webseite nicht relevant oder wichtig sind. Beachten Sie jedoch, dass in Screenreadern und anderen Nur-Text-Browsern der Text mit dem restlichen Text auf der Seite inline gelesen wird. Um Verwirrung zu vermeiden, verwenden Sie einen beschreibenden Alternativtext, der beispielsweise "Über Webdesign und HTML" anstelle von "Logo" lautet.
In HTML5 ist das ALT Attribut ist nicht immer erforderlich, da Sie eine Beschriftung verwenden können, um weitere Beschreibungen hinzuzufügen. Sie können das Attribut auch verwenden ARIA-BESCHREIBBAR um eine ID anzugeben, die eine vollständige Beschreibung enthält.
Alttext ist auch nicht erforderlich, wenn das Bild rein dekorativ ist, z. B. eine Grafik oben auf einer Webseite oder Symbole. Wenn Sie sich jedoch nicht sicher sind, fügen Sie bitte für alle Fälle den Alternativtext hinzu.
Empfohlene IMG-Attribute
BREITE und HÖHE. Sie sollten sich daran gewöhnen, immer die BREITE und HÖHE Attribute. 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 Platz für das Bild zuweisen kann und dann den Rest des Inhalts herunterladen kann, anstatt auf das Herunterladen des gesamten Bilds zu warten.
Andere nützliche IMG-Attribute
TITEL. Das Attribut ist ein globales Attribut, das auf jedes HTML-Element angewendet werden kann. Darüber hinaus die TITEL Mit diesem Attribut können Sie zusätzliche Informationen zum Bild hinzufügen.
Die meisten Browser unterstützen das TITEL Attribut, aber sie tun es auf verschiedene Weise. Einige zeigen den Text als Popup an, während andere ihn in Informationsbildschirmen anzeigen, wenn der Benutzer mit der rechten Maustaste auf das Bild klickt. Du kannst den … benutzen TITEL Attribut, um zusätzliche Informationen über das Bild zu schreiben, aber rechnen Sie nicht damit, dass diese Informationen ausgeblendet werden oder sichtbar. Sie sollten dies auf keinen Fall verwenden, um Schlüsselwörter für Suchmaschinen auszublenden. Diese Praxis wird nun von den meisten Suchmaschinen bestraft.
USEMAP und ISMAP. Diese beiden Attribute legen für Ihre Images clientseitige () und serverseitige (ISMAP) Image-Maps fest.
LONGDESC. Das Attribut unterstützt URLs für eine längere Beschreibung des Bildes. Diese Funktion macht Ihre Bilder leichter zugänglich.
Veraltete und veraltete IMG-Attribute
Mehrere Attribute sind jetzt 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 eines Rahmens um das Bild in Pixel. Es wurde in HTML4 zugunsten von CSS aufgegeben und ist in HTML5 veraltet.
AUSRICHTEN. Mit diesem Attribut können Sie ein Bild in den Text einfügen und den Text umfließen lassen. Sie können ein Bild nach rechts oder links ausrichten. Sie wurde zugunsten der CSS-Eigenschaft float in HTML4 nicht mehr empfohlen und ist in HTML5 veraltet.
HSPACE und VSPACE. Das HSPACE und VSPACE Attribute fügen Leerraum horizontal hinzu (HSPACE) und vertikal (VSPACE). Leerzeichen werden auf beiden Seiten der Grafik hinzugefügt (oben und unten oder links und rechts). Wenn Sie also nur auf einer Seite Platz benötigen, sollten Sie CSS verwenden. Diese Attribute wurden in HTML4 zugunsten der Margin-CSS-Eigenschaft nicht mehr unterstützt und sind in HTML5 nicht mehr erforderlich.
LOWSRC. Das LOWSRC Das Attribut bietet ein alternatives Bild, wenn Ihre Bildquelle so groß ist, dass sie extrem langsam heruntergeladen wird. Möglicherweise verfügen Sie über ein Bild mit einer Größe von 500 KB, das Sie auf Ihrer Webseite anzeigen möchten. Das Herunterladen dauert jedoch sehr lange. Sie erstellen also eine viel kleinere Kopie des Bildes, vielleicht in Schwarzweiß oder nur extrem optimiert, und legen diese in das Bild ein LOWSRC Attribut. Das kleinere Bild wird zuerst heruntergeladen und angezeigt, und wenn das größere Bild erscheint, wird es das Bild mit niedriger Quelle ersetzen.
Das LOWSRC Attribut wurde zu Netscape Navigator 2.0 hinzugefügt IMG Etikett. Es war Teil von DOM Level 1, wurde dann aber von DOM Level 2 entfernt. Die Browser-Unterstützung war für dieses Attribut skizzenhaft, obwohl viele Websites behaupten, dass sie von allen modernen Browsern unterstützt wird. Es ist in HTML4 nicht veraltet oder in HTML5 nicht veraltet, da es in keiner der Spezifikationen ein offizieller Teil war.
Vermeiden Sie die Verwendung dieses Attributs und optimieren Sie Ihre Bilder stattdessen so, dass sie schnell geladen werden. Die Geschwindigkeit des Seitenladens ist ein kritischer Teil eines guten Webdesigns, und große Bilder verlangsamen die Seiten enorm - selbst wenn Sie das verwenden LOWSRC Attribut.
