Etwas über Bilder

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.

Beispiel Firefox Icon, Dateigröße 256x256 px, mit width 5%, height auto via Einstellung im HEAD.

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.

Beispielbild von Yngrid, auf 853 px Breite gespeichert und im img-Element auf 50% eingestellt.

Für die Darstellung von Bildern auf Smartphones, sind Anpassungen im Style erforderlich. Vergleiche im Smartphone die Bilder auf der Startseite. Diese wurden wurden durch: min-width: 320px angepast. Für unterschiedlichen Endgeräte sind aber "responsive" Elemente, wie "picture" oder "srcsets" und Anpassungen der Originalgröße erforderlich. Dies würde für einen Einstieg zu weit gehen. 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.

Tipp 1: 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, aber wegen der Dateigröße (1836 × 1756 px) und damit verbundenen Ladezeit gleichzeitig ein schlechtes Für Bilder innerhalb einer Webseite reichen 960 px Bildbreite bei 85 % Bildqualität völlig aus.

Tipp 2: Für die Darstellung von Bildern, lohnt es sich eventuell 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.

Bilder-Galerie mit horizontalem Scrollbalken

In dieser einfachen Variante verwenden wir nur HTML und einige Style-Angaben im "HEAD-Bereich.

2023 Ausflug Rödertal

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.

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.

Allgemeine Vorgehensweise für die Bereitstellung von Bildern:

1. Bilder werden in einem Ordner, z.B img, unterhalb der index-Datei abgespeichert.
2. Die Bilder werden mit eindeutigen und nachvollziebaren Dateinamen gespeichert.
3. Für Fotos ist das bevorzugte Format webp mit Qualität 85%; die Standardbildgröße der abgespeicherten Fotos, also der jeweiligen Fotodatei, ist vom Verwendungszweck abhängig.
4. Auf der HTML-Seite wird im BODY die Bildbreite beim img-Element mit style="width: xx%" angegeben. Dies erlaubt es, für jedes Bild eine individuelle Breite anzugeben. Im HEAD oder der css-Datei ist Style für die Breite max-width: 100% und auto für die Höhe festgelegt.