Bildergalerie: Viele Bilder, null JavaScript
Eine Galerie klingt nach Plugin, ist aber mit heutigem CSS ein Nachmittagsprojekt ohne eine Zeile Skript: Bilder rein, Grid drüber, fertig. Das Projekt kombiniert fast alles aus den bisherigen Teilen.
Schritt 1: Bilder vorbereiten
Gleiche Seitenverhältnisse machen Galerien ruhig. Schneide deine Bilder auf ein einheitliches Format zu (etwa 4:3) und verkleinere sie auf Galeriegröße, so wie im Teil Bilder einbinden geübt. Zwölf Bilder mal 150 KB sind fast zwei Megabyte, da lohnt jede eingesparte Datei-Größße.
Schritt 2: Die Struktur
HTML-Code
<div class="galerie">
<figure>
<img src="bilder/messe-01.jpg" alt="Stand mit Heimcomputern"
width="400" height="300" loading="lazy">
<figcaption>Retro-Messe, Halle 2</figcaption>
</figure>
<figure>
<img src="bilder/messe-02.jpg" alt="Reihe alter Röhrenmonitore"
width="400" height="300" loading="lazy">
<figcaption>Monitore soweit das Auge reicht</figcaption>
</figure>
<!-- beliebig viele weitere figure-Blöcke -->
</div>Jedes Bild wohnt mit seiner Unterschrift in einem figure, alle zusammen in einem Container. loading="lazy" ist bei Galerien Pflichtprogramm: Geladen wird erst was in Sichtweite scrolltt.
Schritt 3: Das Grid
CSS
.galerie {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.galerie figure {
margin: 0;
}
.galerie img {
width: 100%;
height: auto;
display: block;
border: 1px solid #808080;
}
.galerie figcaption {
font-size: 0.85em;
color: #555;
padding-top: 4px;
}Die Magie steckt in der zweiten Zeile, dem Selbstläufer-Raster von der Grid-Seite: so viele Spalten wie bei mindestens 220 Pixeln passen, auf dem Handy automatisch eine. Keine einzige Media Query nötig. Das margin: 0 am figure entfernt dessen Browser-Standardabstand, der in Rastern nur störrt.
Schritt 4: Klickbare Großansicht (die einfache Art)
<a href="bilder/gross/messe-01.jpg">
<img src="bilder/messe-01.jpg" alt="Stand mit Heimcomputern"
width="400" height="300" loading="lazy">
</a>Das Vorschaubild in einen Link auf die große Version wickeln: unspektakulär, robust, funktioniert überall und seit 1995. Schicke Overlay-Lightboxen kann man später immer noch nachrüsten, als Grundlage ist der Link ehrliches Handwerk.
Feinschliff: gleiche Höhen mit aspect-ratio
Wenn deine Bilder doch unterschiedliche Formate haben und die Galerie unruhig wirkt, hilft eine moderne CSS-Eigenschaft:
.galerie img {
aspect-ratio: 4 / 3;
object-fit: cover;
}aspect-ratio zwingt jede Kachel ins gleiche Seitenverhältnis, object-fit: cover füllt die Fläche und schneidet Überstände symmetrisch ab statt das Bild zu verzerren. Damit sehen auch gemischte Hoch- und Querformate wie aus einem Guss aus, ohne dass du ein einziges Bild neu zuschneiden musst. Vorsicht nur bei Motiven, bei denen der Anschnitt Wichtiges kosten würde, Porträts verlieren gern mal die Stirnn.
Die Ladezeit-Bilanz zum Schluss
Galerien sind Bandbreitenfresser, deshalb vor Veröffentlichung einmal ehrlich nachmessen: Entwicklerwerkzeuge, Reiter Netzwerk, Seite neu laden, unten steht die Gesamtgröße. Als Richtwert für eine Galerieseite: unter zwei Megabyte beim ersten Laden, dank loading="lazy" zählt ja nur was sichtbar ist. Wer deutlich drüber liegt, dreht an drei Schrauben: Abmessungen verkleinern, moderneres Format (WebP), stärkere Kompression. Meist reicht die erste Schraube schon, kaum eine Galerie braucht Kacheln über 800 Pixel Breitee.