Ein Thumbnail ist die verkleinerte Fassung eines Bildes, die als Vorschau dient und auf das große Bild oder einen Eintrag verweist. Auf Übersichtsseiten trägt es die Kachel, in Galerien die Auswahl.
- Thumbnail
Verkleinerte Fassung eines Bildes, die als Vorschau auf das große Bild oder einen Eintrag verweist.
Beispiel: „Jede Kachel der Übersicht zeigt ein Thumbnail des Projekts.“Auch: Vorschaubild oder Miniaturbild. Das englische Wort meint wörtlich den Daumennagel und damit die Größe.
Abgrenzung zum Icon: Ein Icon ist ein gezeichnetes Zeichen für eine Funktion. Ein Thumbnail ist ein verkleinertes Bild eines bestimmten Inhalts.
Größe und Gewicht
Ein Thumbnail wird in genau der Größe ausgeliefert, in der es angezeigt wird. Eine Kachel von 400 Pixeln Breite braucht keine Datei mit 2000. Auf Übersichten mit zwanzig Kacheln summiert sich der Unterschied zu mehreren Megabyte.
Dazu gehört das verzögerte Laden für alles, was nicht im ersten Bildschirm liegt, und feste Angaben zu Breite und Höhe, damit die Kacheln beim Laden nicht springen.
Wie viele Kacheln sofort geladen werden, hängt davon ab, wie viele im ersten Bildschirm liegen. Bei einer Übersicht mit sechzig Einträgen entscheidet diese Grenze darüber, ob die Seite nach einer Sekunde steht oder nach zehn.
Welches Format sich lohnt
Für Fotos sind WebP und AVIF die erste Wahl: Sie liefern bei gleicher Qualität deutlich kleinere Dateien als JPEG. Browser, die sie nicht lesen, bekommen über das picture-Element eine JPEG-Fassung geliefert, ohne dass jemand etwas davon merkt.
Bei Grafiken mit Flächen und Text, etwa Logos oder Schemazeichnungen, bleibt SVG richtig. Es skaliert verlustfrei und wiegt meist weniger als jede Pixelfassung. Ein Raster aus zwanzig Kacheln profitiert von dieser Entscheidung stärker als jede einzelne Seite sonst.
Beschriftung und Alternativtext
Ein Thumbnail, das auf einen Eintrag verweist, braucht keinen eigenen Alternativtext, wenn direkt daneben der Titel als Text steht; sonst hört ein Screenreader dieselbe Angabe zweimal. Steht das Bild allein, beschreibt der Alternativtext, was zu sehen ist.