Das HTML Das IMG-Tag regelt das Einfügen von Bildern und anderen statischen grafischen Objekten innerhalb einer Webseite. Dieses allgemeine Tag unterstützt mehrere obligatorische und optionale Attribute, die Ihre Möglichkeiten zum Entwerfen einer ansprechenden, bildorientierten Website erweitern.
Ein Beispiel für ein vollständig geformtes HTML-IMG-Tag sieht so aus:
Erforderliche IMG-Tag-Attribute
src="/Pfad/zu/Bild.jpg"
Das einzige Attribut, das Sie benötigen, um ein Bild auf einer Webseite anzuzeigen, ist das src Attribut. Dieses Attribut identifiziert den Namen und die Position der anzuzeigenden Bilddatei.
alt="Beschreibung des Bildes"
Um gültiges XHTML und HTML4 zu schreiben, alt Attribut ist ebenfalls erforderlich. Dieses Attribut wird verwendet, um nicht visuellen Browsern Text bereitzustellen, der das Bild beschreibt. Browser zeigen den alternativen Text auf unterschiedliche Weise 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 einige zeigen es überhaupt nicht an.
Verwenden Sie die Alt-Text um zusätzliche Details zum Bild anzugeben, die für den Text der Webseite nicht relevant oder wichtig sind. Denken Sie jedoch daran, dass in Screenreadern und anderen Nur-Text-Browsern der Text inline mit dem Rest des Textes auf der Seite gelesen wird. Um Verwirrung zu vermeiden, verwenden Sie beschreibenden Alternativtext, der (zum Beispiel) "Über Webdesign und HTML" anstelle von "Logo" sagt.
Das alt Text ist auch für SEO (Suchmaschinenoptimierung) unerlässlich. Die Bots, die Suchmaschinen wie Google verwenden, um den Inhalt von Websites zu durchsuchen, können keine Bilder "sehen". Sie verlassen sich auf die alt Text, um zu bestimmen, was auf der Seite steht.
Im HTML5, das alt Attribut ist nicht immer erforderlich, da Sie a. verwenden können Bildbeschriftung um weitere Beschreibungen hinzuzufügen. Sie können dieses Attribut auch verwenden, um eine ID anzugeben, die eine vollständige Beschreibung enthält:
aria-beschriebenby="Beschreibung des Bildes"
Alt-Text ist auch nicht erforderlich, wenn das Bild rein dekorativ ist, wie z. B. eine Grafik oben auf einer Webseite oder Symbole. Aber wenn Sie sich nicht sicher sind, fügen Sie für alle Fälle Alt-Text ein.
Größenattribute
Breite = "500"und.
Höhe = "500"Abhängig von Ihrem Design verwenden Sie die. Höhe und. Breite
Im Allgemeinen möchten Sie, dass die Bildgröße in Ihrem CSS festgelegt wird. In den meisten Fällen liegt dies an den Abmessungen des übergeordneten Containers eines Bildes. Dieser Ansatz ermöglicht die größte Flexibilität bei der Anpassung an unterschiedliche Bildschirmgrößen. Es gibt jedoch immer noch Fälle, in denen Sie Bildabmessungen als HTML-Attribute angeben möchten.
Andere nützliche IMG-Attribute
title="Beschreibender Bildname"Das Attribut ist ein globales Attribut, das auf jedes angewendet werden kann. HTML-Element. Außerdem ist die. Titel
Die meisten Browser unterstützen die Titel Attribut, aber sie tun es auf unterschiedliche Weise. Einige zeigen den Text als Pop-up 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 verlassen Sie sich nicht darauf, dass diese Informationen entweder versteckt sind oder sichtbar. Sie sollten dies auf keinen Fall verwenden, um Keywords für Suchmaschinen zu verbergen. Diese Praxis wird heute von den meisten Suchmaschinen bestraft.
usemap=""und.
ismap=""Diese beiden Attribute legen clientseitig () und serverseitig (ISMAP) fest. Imagemaps
longdesc="Eine genauere Beschreibung Ihres Bildes"Das. lange Beschreibung
Veraltete und veraltete IMG-Attribute
Einige Attribute sind jetzt in HTML5 veraltet oder in HTML4 veraltet. Für das beste HTML sollten Sie andere Lösungen finden, anstatt diese Attribute zu verwenden.
Grenze="3"
ausrichten="links"Mit diesem Attribut können Sie ein Bild in den Text einfügen und den Text darum herumfließen lassen. Sie können ein Bild rechts oder links ausrichten. Es wurde zugunsten der veraltet. float CSS-Eigenschaft
hspcace="10"und.
vspace="10"Das. hspace und. vspace Attribute fügen horizontalen Leerraum hinzu ( hspace) und vertikal ( vspace
lowsrc="/path/to/lowres.jpg"Das. niedrigsrc -Attribut stellt ein alternatives Bild bereit, wenn Ihre Bildquelle so groß ist, dass sie extrem langsam heruntergeladen wird. Sie haben beispielsweise ein 500 KB großes Bild, das Sie auf Ihrer Webseite anzeigen möchten, aber das Herunterladen von 500 KB würde lange dauern. Sie erstellen also eine viel kleinere Kopie des Bildes, vielleicht in Schwarzweiß oder einfach nur extrem optimiert, und fügen das in die ein. niedrigsrc
Das niedrigsrc Attribut wurde Netscape Navigator 2.0 zum Tag hinzugefügt. Es war Teil von DOM Level 1, wurde dann aber aus DOM Level 2 entfernt. Die Browserunterstützung für dieses Attribut war lückenhaft, 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 ein 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 Ladegeschwindigkeit der Seite ist ein entscheidender Bestandteil eines guten Webdesigns, und große Bilder verlangsamen Seiten enorm – selbst wenn Sie die niedrigsrc Attribut.