• Startseite HTML-Kurs

Eine Website in 5 Tagen - Geht das?

Etwas über Bilder

Bilder werden zu einer URL verlinkt oder zunächst auf der Festplatte des "Entwicklungs-PC" abgelegt und dann auf die website 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 17%, height auto via Einstellung in der styley.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.

        <figure>
            <img
                src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"
                alt="Firefox-Symbol"
                style="width: 17%;"
                title="Firefox-Icon als Beispiel">

            <figcaption>Firefox-Icon</figcaption>
            </figure>

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

        <figure>
            <img
                src="./img/Yngrid-mittel.webp"
                alt="Yngrid auf Burg Königstein"
                style="width: 60%;"
                title="Yngrid, Sächsische Schweiz"
            >
            <figcaption>
                Yngrid auf Burg Königstein<br>
                Ausflug in die Sächsische Schweiz 2023
            </figcaption>
        </figure>

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.

Hier noch ein Testbild von Machu Picchu, Original File 1836 × 1756 px, mit width 40%. In der separaten style-Datei ist 100% als max-Breite definiert, damit die originale Größe anzeigt werden kann, die Höhe wird automatisch proportional zu Breite ausgegeben. Die gewünschte Breite des Bildes wird dann auf der spezifischen html-Seite im img-Element eingestellt.

Achtet bei Bildern aus dem Internet auf die Copyright-Angaben. Viele Bilder sind kostenpflichtig oder haben Lizenzbedingungen, die einzuhalten sind.

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 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.

Bilder-Galerie mit horizontalem Scrollbalken

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

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 ein Bild mit einer kleinen Bildgröße (Datei 960px) anzubieten, damit es schnell geladen wird. Mit einem Mausclick (Bildlink) wird dann ein zweites, größeres Bild (Datei 2048px) in einem neuen Tab dargestellt. Die Bildgrößen sind natürlich individuell festzulegen.

Beispiel: Dinosaurierbild mit Bildlink

<figure>
    <a
        href="./img/2024dpmDiplodocusKampfgr.webp"
        target="_blank">
        <img
            src="./img/2024dpmDiplodocusKampfkl.webp"
            loading="lazy"
            alt="Saurier"
            title="Dinosaurierpark Münchehagen">
    </a>

    <figcaption>
        Dinosaurier im Dinosaurierpark Münchehagen
    </figcaption>
</figure>

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 separaten 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. Im HTML wird die Bildbreite über ein CSS festgelegt oder, wenn die Breite für ein Bild spezifisch festgelegt werden soll, wird im BODY beim img-Element mit style="width: xx%" angegeben. Dies erlaubt es, für jedes Bild eine individuelle Breite anzugeben. In der CSS ist die Regel für die Breite max-width: 100% und für die Höhe auto, d. h. Bilder können die originale Größe anzeigen und die Höhe wird proportional zur Breite ausgegeben.