Thumbnails gestalten und Bilder richtig einbinden

„Manchmal kommt es vor, dass eine Grafik oder ein Foto etwas hilflos, alleingelassen und schwebend auf einer Webseite wirkt.“ Diese Beobachtung eröffnete die ursprüngliche Fassung dieses Beitrags im Jahr 2006. Sie stimmt weiterhin – nur sind die Mittel, ein Bild einzubinden, heute andere.

Die Methoden von damals

Der Beitrag stellte vier Varianten vor, um ein Vorschaubild in die Seite zu integrieren.

Der einfache Rahmen

Die naheliegendste Lösung war ein HTML-Attribut direkt am Bild:

<img src="thumb.gif" border="1">

Dieses Attribut gibt es seit HTML5 nicht mehr. Es war eine der Darstellungsangaben, die aus HTML entfernt und nach CSS verlagert wurden.

Der gestrichelte Rahmen

Hier wird die Zeit spürbar. Der Beitrag hielt fest, dass ein gepunkteter Rahmen zwar per CSS möglich sei, „jedoch kann der Internet Explorer im Gegensatz zum Firefox und anderen Browsern das Gewünschte nicht richtig darstellen.“ Deshalb die Empfehlung, den Effekt als Grafik zu bauen – mit dem Vorteil, den Abstand der Punkte frei wählen zu können.

Der damalige Code, mit ausgeschriebenem Sechsstellen-Hexwert:

<img src="thumb.gif" style="border: 1px dotted #000000;">

Der doppelte Rahmen

Die interessanteste Variante des Originals: zwei Rahmen, wobei der innere dieselbe Farbe hat wie der Seitenhintergrund. Das Auge nimmt dadurch nur den äußeren wahr, und zwischen Bild und Linie entsteht ein Abstand. Für das feinere Ergebnis empfahl der Beitrag, den schwarzen Rahmen auf 75 % Deckkraft zu setzen – „bei jeder Farbe muss man abwägen, bei welchem Prozentsatz der Rahmen das Bild edel macht und schlicht hervorhebt.“

Die Winkel an den Ecken

Für Bilder, die besonders hervorgehoben werden sollten: an allen vier Ecken kleine Winkel, die das Bild einfassen. Der Beitrag schlug auch vor, nur zwei diagonal gegenüberliegende zu verwenden. Das ließ sich damals ausschließlich als Grafik umsetzen.

Wie es heute geht

Der doppelte Rahmen ohne Trick

Was 2006 zwei Rahmen und eine passende Hintergrundfarbe brauchte, ist heute eine Zeile. padding erzeugt den Abstand, der Hintergrund muss nicht mehr erraten werden:

.thumb {
  border: 1px solid rgba(0, 0, 0, 0.75);  /* die 75 % von damals */
  padding: 6px;
  background: #fff;
}

Der entscheidende Fortschritt steckt in rgba: Transparenz ließ sich früher nur im Grafikprogramm erzeugen und musste als fester Farbwert abgelesen werden. Heute passt sich der Rahmen dem an, was hinter ihm liegt.

Die Eckwinkel ohne Grafik

Der aufwendigste Effekt des Originals braucht heute keine Bilddatei mehr. Ein Element, vier Ränder, zwei Verläufe – die Winkel entstehen aus dem Hintergrund selbst:

.thumb-winkel {
  position: relative;
  padding: 10px;
}

.thumb-winkel::before,
.thumb-winkel::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid #0090c8;
}

/* oben links */
.thumb-winkel::before {
  top: 0; left: 0;
  border-right: 0;
  border-bottom: 0;
}

/* unten rechts */
.thumb-winkel::after {
  bottom: 0; right: 0;
  border-left: 0;
  border-top: 0;
}

Das entspricht genau der Variante, die der Beitrag als Ausprobier-Vorschlag nannte: zwei diagonal gegenüberliegende Winkel statt vier.

Und der gepunktete Rahmen?

Der funktioniert inzwischen überall gleich. Die Grafiklösung von damals ist überflüssig geworden – der Abstand der Punkte lässt sich zwar nicht direkt steuern, wohl aber über die Rahmenstärke beeinflussen:

.thumb-gepunktet {
  border: 3px dotted #999;   /* dickerer Rahmen = groessere Punkte */
  padding: 8px;
}

Was heute wichtiger ist als der Rahmen

Der eigentliche Unterschied liegt nicht in der Gestaltung, sondern darin, was ein Vorschaubild technisch leisten muss. Drei Punkte, die 2006 nicht existierten:

Die passende Größe für das jeweilige Gerät

Damals gab es ein Bild in einer Größe. Heute liefert man mehrere und überlässt dem Browser die Auswahl:

<img src="thumb-400.webp"
     srcset="thumb-400.webp 400w,
             thumb-800.webp 800w,
             thumb-1200.webp 1200w"
     sizes="(max-width: 700px) 100vw, 350px"
     width="400" height="300"
     alt="Beschreibung des Bildinhalts"
     loading="lazy">

Zwei Angaben darin sind wichtiger, als sie aussehen. width und height verhindern, dass das Layout springt, sobald das Bild geladen ist – einer der drei Werte, an denen Google die Nutzererfahrung misst. Und loading="lazy" lädt Bilder erst, wenn sie in die Nähe des sichtbaren Bereichs kommen.

Der Alternativtext

Der alte Beitrag erwähnt ihn nicht – 2006 war das keine Selbstverständlichkeit. Heute ist er Pflicht: für Screenreader, für Suchmaschinen und für den Fall, dass das Bild nicht lädt. Er beschreibt, was zu sehen ist, nicht dass es ein Bild ist.

Einheitlicher Zuschnitt

Ein Problem, das der Beitrag indirekt anspricht – Bilder, die „schwebend“ wirken – hat oft eine schlichte Ursache: unterschiedliche Seitenverhältnisse in einer Reihe. Dafür gibt es heute eine direkte Lösung:

.galerie img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;   /* schneidet zu, statt zu verzerren */
}

Ein vollständiges Beispiel

Die Bildergalerie von damals, mit heutigen Mitteln – Raster, einheitlicher Zuschnitt, Rahmen im Stil des doppelten Rahmens, dezente Reaktion beim Überfahren:

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.galerie a {
  display: block;
  padding: 6px;
  background: #fff;
  border: 1px solid #d9d9d9;
  transition: border-color 0.15s, transform 0.15s;
}

.galerie a:hover,
.galerie a:focus-visible {
  border-color: #0090c8;
  transform: translateY(-2px);
}

.galerie img {
  display: block;         /* entfernt den Abstand unter dem Bild */
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .galerie a { transition: none; }
}

Der display: block-Eintrag löst nebenbei ein Problem, das 2006 viele beschäftigt hat: Ein Bild ist standardmäßig ein Inline-Element und steht damit auf der Grundlinie einer Textzeile – darunter bleibt ein paar Pixel Abstand, der sich sonst nicht erklären lässt.

Fazit

Die vier Gestaltungsideen von 2006 sind alle noch gültig – der Rahmen, der Abstand, der doppelte Rahmen, die Eckwinkel. Nur brauchte drei davon damals eine Grafikdatei, und heute keine mehr.

Verschoben hat sich der Schwerpunkt: Die Frage ist nicht mehr, wie ein Vorschaubild eingefasst wird, sondern in welcher Größe es ausgeliefert wird, wann es lädt und ob es beschrieben ist.

Bei Bildergalerien, Ladezeitoptimierung und sauberer Umsetzung helfen wir als Agentur für Programmierung gerne weiter.