Was ist ein Thumbnail?

Sie sind hier:
Geschätzte Lesezeit: 2 min

Der Terminus Thumbnail heißt im Deutschen direkt übersetzt „Daumennagel“. Im Webdesign versteht man darunter ein kleines Vorschaubild oder Miniaturbild, das man meistens anklicken kann, um das Bild in Originalgröße sehen zu können.

Was sind Kennzeichen von Thumbnails?

Ein Thumbnail ist eine verkleinerte Version eines Bildes, die oft die gleichen Abmessungen und Proportionen wie andere Thumbnails hat. Das Maß für Thumbnails unterscheidet sich je nach Verwendungszweck und variiert von beispielsweise 50 x 50 Pixel bis hin zu 500 x 500 Pixel. Miniaturbilder werden verwendet, wenn Sie die Ladezeit beschleunigen oder Ihren Inhalt auf eine saubere, fokussierte Weise präsentieren möchten. Wenn es zum Beispiel zu viele Informationen auf einer Seite gibt, die aber alle zusammen für den Kontext gesehen werden müssen, dann helfen Thumbnails dabei, nur das Wichtigste anzuzeigen.  Gleichzeitig schaffen Sie etwas Platz um Texte, damit diese nicht zu erschlagend wirken. Thumbnail-Bilder sind in der Regel mit einem Link versehen. Dieser Link führt entweder zu einer Unterseite mit weiteren Inhalten, zu einer Galerie, wo man weitere Bilder sehen kann oder es öffnet sich eine Großansicht in einem PopUp-Fenster, damit man das Bild in voller Größe betrachten kann.

Wie sollten Vorschaubilder gestaltet sein?

Aufgrund der geringen Größe sollte der im Fokus stehende Inhalt bei Thumbnails klar erkennbar sein und den Unser zum Klicken motivieren. Das Motiv sollte daher idealerweise klar strukturiert sein. Da Vorschaubilder häufig quadratisch sind, sollte der Bildausschnitt so gewählt werden, dass der wesentliche Teil des Fotos im Mittelpunkt steht. Helligkeit und Kontraste sollten mit Hilfe geeigneter Bildbearbeitungsprogramme gut ausgesteuert sein. Es hat sich bewährt, die Schärfe bei Miniaturbildern im Vergleich zu den großen Originalen etwas nachzujustieren. Damit wird das Motiv besser erkennbar. Gesichter sollten Sie in Nahaufnahmen abbilden. Die Gestaltung (wie z.B. Maße, Einsatz von Rahmen, Schatten, etc.) sollte konsistent sein und zum Unternehmensimage passen.

Wie werden Thumbnails eingesetzt?

Im Web sind Thumbnails mittlerweile allgegenwärtig. Thumbnails dienen häufig als Produktbilder. Sie nehmen weniger Platz ein als Detailaufnahmen. Man kann sich durch sie hindurchklicken, um einen Eindruck und ersten Produktüberblick zu bekommen. Es gibt Käufern gerade so viel Informationen, dass sie zum Weiterklingen animiert werden. Google-Suchseiten zeigen oft zuerst Miniaturbilder an, damit Nutzer schnell Videos, Nachrichtenartikel oder andere Arten von Medien finden können, ohne sich jedes Mal durchklicken zu müssen, wenn sie eine neue Suche starten. Sie sind aber auch in kleineren Größen als Vorschau von Kunstwerken oder Fotos Galerien zu finden.

Der Zweck eines Thumbnails ist, dass die Betrachter eine Vorstellung davon haben, was sie erwartet. Sie werden für die schnelle Betrachtung von Inhalten im Überblick verwendet, bevor man sich durchklickt und tiefer in die Materie eindringt. Thumbnails sind praktisch, wenn Sie endlos auf einer Seite scrollen, um das zu finden, was Sie suchen. Sie unterstützen darin, sich als User einen schnellen Überblick verschaffen zu können. Man klickt also nichts Unbekanntes an, sondern hat schon eine Idee, was kommt. Wenn die angekündigte Vorschau allerdings zu anderen Inhalten führt und man das optische Element bzw. das angekündigte Thema nicht wiederfindet, führt dies zu Enttäuschungen. Das sollte man als Website-Betreiber tunlichst vermeiden.

Was sind weitere Vorteile von Thumnails?

Thumbnails können wesentlich schneller geladen werden als Bilder in Originalgröße. Allerdings sollten Sie darauf achten, dass auf Ihrer Website die Miniaturbilder nicht automatisiert durch HTML erstellt werden. Auf diese Art und Weise erleiden Sie Geschwindigkeitseinbußen. Besser ist es, die Miniaturbilder in einem genau definierten Maß gesondert zu erstellen. Gegebenenfalls müssen für verschiedene Endgeräte verschiedene Größen erstellt werden.

Etwas größere Vorschaubilder können mit einem Text-Overlay versehen werden. Damit können Sie einen Titel und auch Fließtext festlegen. Diese Texte sollten den Inhalt knapp zusammenfassen, damit die Nutzer eine noch klarere Vorstellung davon erhalten, welches Thema sie beim Anklicken erwartet.

Aufrufe: 23
Vorheriger Artikel: Was ist ein User Interface (UI)?
Nächster Artikel: Was ist ein Slider?