HTML Img • Bilder

• Home
• Kontakt
• Impressum
• Suche

• CSS
• HTML
• Javascript Basis
• Javascript für Webseiten
• Tutorials
• SVG / 3D-Canvas MathML

Bilder – Fotos und Grafiken – in HTML-Seiten

Browser können nur wenige Bild- oder Grafikformate zuverlässig darstellen. JPEG, GIF oder PNG sind die sichersten Formate für die Anzeige von Bildern in Webseiten, WEBP und AVIF sind jüngeren Datums als die alten Formate und punkteb mit kleineren Dateigrößen. Das img-Tag bettet auch externe SVG-Dateien ein.

img fügt das Bild nicht wirklich in die Webseite ein, sondern Bilder bleiben aus technischer Sicht an ihrem Speicherort. Das img-Tag ist ein Platzhalter und bildet mit dem src-Attribut einen Link zum Bild – Bilder sind »embedded content« (eingebetteter Inhalt).

src-Attribut mit Pfad zum Speicherort des Bildes Breite in Pixel Höhe in Pixel │ │ │ ▼ ▼ ▼ <img src="img/mond.png" width="600" height="230" alt="Mond mit Wolken"> ▲ │ └--- Alternativer Text

Das img-Element bewirkt keinen Zeilenumbruch, sondern erzeugt ein Inlineelement. Das img-Tag kann in ein a-Element gesetzt werden, um einen klickbaren Link zu erzeugen. Die Browser legen bei einem Bild innerhalb eines a-Tags einen Rahmen um alle vier Seiten, um das Bild als Link zu kennzeichnen. Der CSS-Stil a img { border: none; } entfernt den Rahmen.

Das img-Element ist leer (void). Mit XHTML wurde ein Schrägstrich das Ende des Elements gesetzt werden: <img ... />. Der Schrägstrich an Ende des img-Tags kann wegfallen.

Mit figure und figcaption erhält das Bild einen Container, um es vom Text abzuheben, zu positionieren und eine Bildunterschrift oder Legende hinzuzufügen.

img Tag – Attribute

alt ist ein Text, der anstelle des Bildes von Browsern gezeigt wird, die Bilder oder Grafiken nicht darstellen. Das alt-Attribut muss immer gesetzt werden und soll nicht einfach das Bild beschreiben, sondern eher seine Aussage. loading weist die Browser an, wie das Bild zu laden ist: mit lazy lädt der Browser das Bild erst, wenn es beim Scrollen der Seite in den Viewport kommt, mit dem Wert eager soll der Browser das Bild (z.B. im Seitekopf) bevorzugt laden und auto stellt dem Browser frei, wann er das Bild lädt. decoding="async" Hinweise für die Decodierung des Bildes – async weist den Browser an, das Bild »fast« sofort, aber asynchron aufzubauen. Der Browser könnte Bilder z.B. laden, wenn der obere Inhalt im Browserfenster (above the fold) geladen und sichtbar ist, und der Benutzer verweilt, bevor er die Seite scrollt. src ist die URL der Bilddatei und muss immer gesetzt werden. Die URL muss den Dateinamen enthalten und ist ein relativer oder absoluter Pfad zur Bilddatei. ┌── Bild im selben Verzeichnis wie die HTML-Seite ▼ <img src="bild.webp" width="" height="" …> ┌── Bild im Ordner fotos unterhalt der Seite ▼ <img src="fotos/bild.webp" width="" height="" …> ┌── Bild im Ordner fotos oberhalb der Seite ▼ <img src="../fotos/bild.webp" width="" height="" …>

Absolute Pfade beginnen mit "https://" und dem Domainnamen oder im sogen. Root-Verzeichnis (das oberste Verzeichnis) mit "/".

<img src="https://www.mediaevent.de/wp-content/uploads/2024/04/height-screen-1-200.webp" alt="" > <img src="/wp-content/uploads/2024/04/height-screen-1-200.webp" alt="" > srcset Liste von alternativen Bildern für verschiedene Umgebungen (hochauflösende Monitore, Desktop-Monitore, mobile Geräte) sizes Bildgrößen für verschiedene Seitenlayouts. Bestimmt, welchen Raum das Bild innerhalb des Layouts einnimmt – z.B. 33% der Breite des Viewports bei einem Spaltenlayout. crossorigin regelt, ob und welche fremden Seiten per Skript (z.B. AJAX) direkt auf das Bild zugreifen können usemap Namen einer Image Map, die mit dem Element verknüpft werden soll. Eine Image Map oder Area Map unterteilt das Bild in klickbare Bereiche. ismap ist ein boolescher Wert und kennzeichnet, dass es sich bei dem Bild um eine klickbare serverseitige Image Map handelt. width / height Breite des Bildes, Höhe des Bildes referrerpolicy Bilder werden mit einem zusätzlichen HTTP-Request geladen und kann aus einer anderen Umgebung als das HTML-Dokument stammen. referrerpolicy gibt z.B. mit unsafe-url an, ob das Bild von einer ungesicherten Quelle stammt (nicht https sondern http).

Die alten Attribute align, border, hspace und vspace sind nicht mehr in HTML vertreten. Sie gelten schon seit langem als deprecated – veraltet.

Bildgröße

width und height sind wichtige Attribute für das img-Tag und werden nicht ins CSS verbannt. Die Browser nutzen die Angabe width und height für einen Platzhalter und bauen die Seite schon auf, während das Bild noch geladen wird.

Die Angaben width und hight müssen auch nicht die physikalische Pixelauflösung des Bildes angeben. Das Bild kann kleiner oder größer sein und wird für responsive Webseiten mit CSS width:100% height:auto an den umfassenden Block angepasst.

Wichtig ist allerdings das richtige Seitenverhältnis, das durch width und height bestimmt wird, damit das Bild auf der Seite nicht verzerrt wirkt.

Gute Programm-Editoren helfen bei der Bestimmung der physikalischen Größe des Bildes und setzen src, width und height ein. Das src-Attribut muss dann nur noch auf das korrekte Verzeichnis auf dem Webserver verweisen.

<figure> ... </figure>

Wenn das Bild größer oder kleiner als der verfügbare Platz ist, passt CSS object-fit das Bild an seine Box an.

Lazy Loading – Bilder im letzten Moment laden

Das Attribut loading ist noch jung, wird aber von allen modernen Browsern (Chrome, Firefox, EDGE, Safari, Opera) unterstützt. Mit loading="lazy" lädt der Browser das Bild erst, wenn der Benutzer weit genug gescrollt ist. Das beschleunigt nicht nur das Laden der Seite, sondern erspart Transfervolumen / Bandbreit, wenn der Benutzer nicht bis zum Seitenende scrollt.

<img loading="lazy" src="florenz.webp" width="1000" height="673" alt="Birken">

Die Browser führen das späte Laden aber nur durch, wenn width- und height-Attribut der Bilder im img-Tag notiert sind.

Das link-Tag mit rel="preload" as="image" wird für Bilder mit loading=lazy nicht mehr gebraucht.

Bilder vom Text umfließen lassen

Ohne CSS verhält sich ein Bild in einem Text immer wie ein einzelnes Zeichen im Text: Das Bild sitzt auf der Grundlinie der Zeile und dehnt die Textzeile nach oben aus.

<p> <img src="mond.png" style="float: left;" loading="lazy" alt="Mond" width="180" height="123"> Ein Bild mit Mond neben einem Text</p>

Erst durch die CSS-Eigenschaft float: left; umfließt der Text das Bild.

Damit sich das Bild an den verfügbaren Platz im Browserfenster anpasst (das Bild responsive wird), setzt das CSS img { width: 100%; height: auto; } ein.

<img src="mond.png" style="float: left;" loading="lazy" alt="Abnehmender Mond" width="180" height="123">

Das war ein beliebter Ansatz für Bilder in längeren Textabsätzen. Auf kleinen Monitoren wandert der Text automatisch unter das Bild.

HTML img src – Dateinamen und Pfade

Dateinamen ohne Umlaute und Leerzeichen, sonst wird das Bild u.U. nicht angezeigt. süße pistazien.jpg steckt sich der Webserver selber ein.

Die meisten Webserver nehmen Groß- und Kleinschreibung ernster als jeder Oberlehrer. Für Unix sind Italienische-Pralinen.jpg und italienische-pralinen.jpg zwei verschiedene Pralinenschachteln.

Bild mit Base64 einbetten

Wenn Bilder sehr klein sind, war es mit den älteren HTTP-Protokollen sinnvoll, sie im Base64-Format direkt in das HTML-Markup einzubetten. Dabei wächst die Bildgröße leicht an, aber Base64-Bilder sparten einen HTTP-Request beim Laden der Seite.

<img alt="HTML img als Base64 einbetten" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg … >

Base64 Online von Dominik Hanke um jpg, gif und png in Base64 umzuwandeln

Wenn Webseiten bereits vom HTTP2-Protokoll bedient werden, bringt diese Technik keinen Vorteil mehr, weil HTTP2 mehrere Ressourcen simultan auf einer Verbindung liefern kann. Dasselbe gilt für Image Sprites, wenn mehrere Bilder zu einem großen Bild zusammengefasst werden, um sie dann vom CSS zerstückelt in die Seite einsetzen zu lassen.

Zudem unterstützen heute die meisten der modernen Browser das native loading="lazy", das dem Ladevorgang erst anstößt, wenn das Bild beim Scrollen in den sichtbaren Bereich kommt.

Mehr zu HTML img

• Mit loading="lazy" lädt der Browser das Bild erst, wenn es beim Scrollen in den Viewport kommt. Das beschleunigt den Seitenaufbau und spart Bandbreite sowohl beim Benutzer als auch beim Server.
• Infografik Fotos und Grafik für Webseiten optimieren Alles im Überblick: JPG-Fotos, Grafiken mit PNG und Freisteller komprimieren für Qualität und Ladezeit.
• Nicht nur für Fotos, aber besonders für Fotos CSS filter – Weichzeichnen, Graustufen, Kontrast und Sättigung
• Filter für Fotos mit SVG CSS-Filter wirken nicht in allen Browsern, wohl aber SVG-Filter.

Externe Quellen

• Fotos für die Webseite optimieren Fotos für das Internet müssen auf jeden Fall komprimiert werden, um die Ladezeit der Seite so kurz wie möglich zu halten.

HTML-Elemente – Struktur / Attribute

• Grundlagen: HTML-Elemente und Struktur
• HTML-doctype, head und body
• Korrektes valides HTML
• HTML-Formatierung durch den Browser
• HTML-Attribute
• id, class, style Attribute
• Attribute decoding, loading, hidden, download
• Liste der HTML-Elemente
• Custom Elements Eigene HTML-Elemente
• HTML Manifest Application Cache

head und Metadaten

• HTML Doctype
• html Wurzelelement des Dokuments
• head Kopf des Dokuments
• HTML meta-Tag Informationen zum Dokument
• meta name=viewport Anzeigebereich mobiler Geräte
• Cache löschen meta cache-control, expires, meta
• JSON-LD Metadaten in einem Bündel
• HTML link-Element CSS einbinden
• HTML title-Element Die wichtigste Überschrift
• style-Tag CSS im head einbinden
• base Basis-Adresse (URL)

Inhalt strukturieren

• HTML-Elemente verschachteln (Nesting)
• body Sichtbarer Bereich der HTML-Seite
• Struktur article, section, header
• footer nicht das Letzte
• h Überschriften h1, h2, h3, h4, h5 und h6
• aside »Am Rande«
• address Hervorhebung von Adressen
• table HTML-Tabellen
• td / th • Tabellenzellen
• caption • Überschrift einer Tabelle
• colgroup, col Tabellenspalten gruppieren
• thead, tfoot, tbody • Tabellen strukturieren

Inhalt gruppieren

• main Hauptinhalt der Seite
• div Behälter für Inhalte
• dl Definitionslisten
• figure figcaption Abbildungen
• hr Horizontale Linie
• br Zeilenumbruch ohne Formatwechsel
• p Absatz in einem Text
• pre vorformatierter Text
• ul ungeordnete Liste
• ol automatisch nummerierte Liste
• menu Toolbar / Werkzeugleiste
• blockquote Ausführliches Zitat
• details und dialog Interaktive Elemente

Text hervorheben

• a Link (Ankertag)
• a download, mailto, tel
• span organisiert Inline-Elemente
• em, strong, i und b Betonung, fett und kursiv
• mark relevant im aktuellen Zusammenhang
• time | Zeitangaben
• bdo | bdi Laufrichtung des Textes
• del, ins gelöscht, geändert
• sub + sup hoch-/tiefstellen
• small kurzer Hinweis
• abbr Abkürzung
• cite Zitat (inline)
• code, dfn, var • technischer Text

Bilder, Grafik, Video, iframe

• img Bilder in Webseiten einfügen
• srcset img-Attribut für versch. Monitore
• picture Container für alternative Bildgrößen
• Video / Audio für Webseiten
• HTML Video-Tracks – Untertitel
• object Medien anzeigen
• area map Bild in Image Map unterteilen
• iframe • Inline-Fenster
• frame • frameset • noframes (nicht HTML5)

Formulare und Eingabefelder

• form HTML-Formular
• input Formular – Eingabefeld
• Attribute für input-Elemente
• label Name eines Formularelements
• input placeholder, autofocus
• textarea Feld für lange Texte
• input pattern Formulare validieren
• input checkbox, radio, image, button
• input type file – Datei-Upload
• input type date / time – Kalender
• input type color, number – Picker
• type=submit Formular absenden

Weitere Formular-Elemente

• button Schaltfläche
• select Auswahlliste
• input type range
• input und datalist Auswahl von Werten vorgeben
• option / optgroup Optionen einer Selectliste
• progress, meter, output Benutzerhilfen
• fieldset / legend • Eingabefelder gruppieren
• autocomplete Automatisches Vervollständigen
• Beispiel HTML-Formular und PHP-Skript

Scripting

• script Script in HTML einbinden
• template-Tag Vorlage für Scripte
• data Maschinenlesbare Inhalte
• noscript Browser ohne Javascript
• canvas Zeichnen mit Javascript