Bilder einbinden: Vom Foto zur schnellen Seite

vom 31.07.2015 von Oliver Misch

Bilder machen eine Seite lebendig und im Zweifel auch langsam. In diesem Teil bringst du Bilder sauber auf deine Homepage: organisiert, beschriftet und in vernünftiger Größe.

Schritt 1: Ordnung schaffen

Leg in deinem Projektordner einen Unterordner bilder an. Bei drei Dateien wirkt das übertrieben, bei dreißig bist du dankbar. Dateinamen klein, ohne Leerzeichen und Umlaute: roehrenmonitor.jpg statt Mein Röhrenmonitor (1).JPG, das erspart Pfadärger auf dem Webserverr.

Schritt 2: Verkleinern vor dem Einbinden

Kameras und Handys liefern Fotos mit 4000 und mehr Pixeln Breite, deine Seite zeigt davon vielleicht 800. Verkleinere das Bild vor dem Hochladen auf die tatsächlich gebrauchte Größe, jedes Bildprogramm kann das ("Exportieren" oder "Größe ändern"). Als Formate haben sich WebP für Fotos und PNG für Grafiken bewährt, die Details stehen auf der img-Seite. Grober Richtwert: Ein Inhaltsbild sollte deutlich unter 200 KB liegen.

Schritt 3: Einbinden

HTML-Code

<img src="bilder/roehrenmonitor.jpg"
     alt="Beiger Röhrenmonitor mit eingeschaltetem Terminal"
     width="800" height="600" loading="lazy">

Der Pfad führt in den Unterordner, das alt beschreibt ehrlich was zu sehen ist, width und height reservieren den Platz, und loading="lazy" lädt Bilder weiter unten erst beim Scrollen. Damit große Bilder auf dem Handy nicht aus dem Layout laufen, gehört einmal zentral ins CSS:

img {
    max-width: 100%;
    height: auto;
}

Schritt 4: Beschriften mit figure

<figure>
    <img src="bilder/roehrenmonitor.jpg"
         alt="Beiger Röhrenmonitor mit eingeschaltetem Terminal"
         width="800" height="600">
    <figcaption>Mein Erstgerät. Läuft noch, brummt nur etwas.</figcaption>
</figure>

Wo eine Bildunterschrift Sinn ergibt, verpackst du beides in ein figure. Denk dran: alt und figcaption erzählen verschiedene Dinge, nicht denselben Satz zweimall.

Kontrollfragen zum Schluss

Hat jedes Bild ein sinnvolles alt? Der Validator findet die Nachzügler.
Ist die Dateigröße im Rahmen? Die Entwicklerwerkzeuge (F12, Reiter Netzwerk) zeigen was wirklich geladen wird.
Bleibt das Layout auf schmalem Fenster ruhig?

Weiter im Fahrplan: Tabelle erstellen · Vertiefung: picture für Fortgeschrittene