Bilder werden zu einer URL verlinkt oder zunächst auf der Festplatte des "Entwicklungs-PC" abgelegt und dann auf die web site hochgeladen.
Sie werden mit dem img-Element eingefügt. Für das Element müssen wir einiges beachten, darunter:
src Das src- Attribut gibt den Speicherort des Bildes an. Zum Beispiel: src
="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png".
alt Das alt-Attribut gibt eine Textbeschreibung des Bildes an. Zum Beispiel: alt="Firefox
icon". Falls etwas schiefgeht wird das Bild nicht geladen und stattdessen wird der Text angezeigt. Der
Eintrag soll sich von der Bildunterschrift unterscheiden, da gleichlautende Einträge unschöne Dopplungen
ergeben und Screenreadern Probleme bereiten können.
width Das Attribut gibt die Breite des Bildes in Pixel oder Prozent zur Originalgröße an.
Im CSS wird die Breite als "max=100%" festgelegt. Im BODY kann dann für jedes Bild die gewünschte Breite
individuell in % der Maximalbreite angegeben werden. Bei Icons oder kleinen Grafiken ist eventuell die
Angabe in Pixel geeignet.
height Das height Attribut gibt entsprechend die Höhe des Bildes an. Um die Höhe im
Verhältnis zur Breite proportional korrekt anzugeben, erfolgt die Einstellung mit "auto" im CSS.
Die Verwendung des Elements figure = Abbildung (scontainer) erlaubt eine semantisch korrekte Ausrichtung von Bildunterschriften mit dem Element figcaption. Der Rahmen ist durch das figure-Element definiert worden. Innerhalb des figcaption-Elements können beliebige weitere HTML-Elemente benutzt werden, z.B. Überschriften, Absätze, Links usw.
Ausflug Sächsische Schweiz 2023
Für die Darstellung von Bildern auf dem Smartphones, sind Anpassungen im Style erforderlich (in der css-Datei im Abschnitt @media screen). Zu beachten ist ferner, dass bei Prozentangaben für das <img>-Tag im body, das style-Attribut benötigt wird (style="width: xx%"), sonst gibt der HTML5-Validator einen Fehler aus.
Bilder aus dem Internet sollten am besten lokal abgespeicht und in einer geeigneten Dateigröße angeboten werden. Diese kann - je nach Verwendungszweck - unterschiedlich sein. Das Macchu Picchu Bild auf der Startseite, ist zwar ein gutes Beispiel für ein direkt geladenes Bild aus dem Internet, ist aber wegen der Dateigröße (1836 × 1756 px) ungünstig. Die Ladezeit ist bei dieser Größe eher schlecht, da zunächst alle Pixel geladen werden. Dies macht sich besonders auf dem Smartphone bemerkbar. Für Bilder innerhalb einer Webseite reichen 960 px Bildbreite bei 85 % Bildqualität im Format webp völlig aus. Für eine Seite mit vielen kleinen Vorschaubildern sollten weitere Anpassungen der Originalgröße vorgenommen werden. Häufig reicht es, ein zusätzliches Originalbild mit einer Breite von 480 px anzubieten. In den Tutorials werden weitere Möglichkeiten der Bildoptimierung beschrieben; fündig wird man mit folgender Suche: srcset, lazy load, prefetch.
Tipp: Für die Darstellung von Bildern, lohnt es sich ein weiteres Stylesheet anzulegen und mit den entsprechenden HTML-Seiten zu verknüpfen.
Wir müssen auf die Verzeichnisstruktur achtgeben. Wenn die Bilder nicht im Verzeichnis der Index.html stehen, sondern wie üblich in einem Unterverzeichnis img und wir aus einem anderem Unterverzeichnis zugreifen, ist die Notation z. B. src=./img/Dateiname; siehe Quellcode.
Bilder können auch nebeneinander dargestellt werden.
weiter zur Seite Bilder nebeneinanderIn dieser einfachen Variante verwenden wir nur HTML und einige Style-Angaben im "HEAD-Bereich.
Benutze den horizontalen Scrollbalken um mehr Bilder zu sehen. Mouseclick stellt das Bild formatfüllend im Tab dar, zürück mit Tab/Pfeiltaste links. Noch mehr Bilder? Mouseclick auf das letzte Bild!
Was ist passiert? Im HEAD-Bereich haben wir mit dem div-Element einen "Container" eingefügt, den wir "slider" genannt haben. Dadurch können wir für diese Box einige Styles definieren, z.B. Hintergrund weiß, Randbreite 2 px, Bildbreite 25% etc. Im Body fügen wir dann die Bilder in den "slider" ein.
Wenn Bilder in Fotoqualität dargestellt werden sollen, ist es sinnvoll, zunächst kleinere Bilder (Datei
960px) anzubieten, damit sie schnell geladen werden. Bei einem Mausclick (Bildlink) werden sie im neuen Tab
vergrößert (Datei 2048px) dargestellt. Die Bildgrößen sind natürlich individuell festzulegen.
Bildunterschrift 2
Bei diesen Bilden wird die Bildbeschriftung mit "figcaption" realisiert, das "title"-Attribut kann als Tooltip eingefügt werden. Die "großen" Bilder werden in einem separaten Tab geöffnet. Eine Beschriftung ist dadurch nicht möglich, bei Bedarf kann sie direkt mit einem separaten Fotoeditor in das Bild geschrieben oder mittels Javascript realisiert werden. Hierfür gibt es zahlreiche Bibliotheken und Beispiele im Internet, z.B. "lightbox". Eine Art der Umsetzung, die ihr in meinen Fotogalerien findet.