Thumbnail Generator

Für einen LinkedIn-Post oder ein Blog-Cover brauchst du selten mehr als eine Headline, vielleicht ein Bild und das richtige Format. Der Thumbnail-Generator macht genau das. Du wählst ein Format, ziehst Headline, Unterzeile und Bild an ihren Platz und lädst das Ergebnis herunter. Als PNG oder als PDF.

Kein Login, kein Wasserzeichen, kein Upload zu einem Server. Das Tool läuft komplett im Browser. Warum ich es gebaut habe, statt bei Canva zu bleiben, steht im verlinkten Beitrag.

So funktioniert es

Du wählst zuerst eines von drei Formaten: 16:9 (1920×1080) für ein klassisches Querformat-Thumbnail, 4:5 (1080×1350) für einen Hochformat-Feed-Post, oder 9:16 (1080×1920) für Storys und Reels. Headline, Unterzeile und ein optionales Bild lassen sich danach direkt in der Vorschau greifen und verschieben.

Die Ebenen rasten ein: an Dritteln, Vierteln und der Mitte der Fläche. Sie rasten auch aneinander, sobald zwei Elemente nah genug zusammenkommen. Ein Klick löst dabei noch keine Bewegung aus. Erst nach etwa drei Pixeln Weg zählt der Zeiger als Ziehen.

Sonst würde jeder Klick in den Text zum Editieren die Position verschieben. Kleine gelbe Griffe an den Seiten des ausgewählten Textes ändern die Breite des Zeilenumbruchs. Die Schriftgröße bleibt dabei gleich. Die Ecken des Bildes skalieren es.

Der Export zeichnet nicht die Vorschau ab. Er rendert auf einem unsichtbaren Canvas in der vollen Zielauflösung, Pixel für Pixel. Für die Headline ist standardmäßig Anton eingestellt: fett und kompakt. Impact steht als Alternative bereit.

Anton liegt selbst gehostet im Projekt, eingebunden über eine eigene @font-face-Regel. Der Grund: next/font gibt der Canvas-Funktion nur einen gehashten Namen. Den kann sie nicht auflösen.

Vor jedem Export lädt das Tool die Schrift deshalb explizit nach und wartet, bis sie bereit ist. Sonst würde eine Export-Datei im Hintergrund still auf Impact zurückfallen, ohne dass du das am Bildschirm siehst.

Für mehrere Slides gibt es eine eigene Leiste zum Hinzufügen, Duplizieren, Löschen und Durchblättern. Der PDF-Export lädt die Bibliothek pdf-lib erst beim Klick auf „PDF herunterladen“ nach. Wer nur ein PNG braucht, lädt diesen Code nie.

Welche Maße für welche Plattform gelten

YouTube empfiehlt für Thumbnails eine Auflösung von 3840×2160 Pixel im Seitenverhältnis 16:9, mit einer Mindestbreite von 640 Pixel (YouTube-Hilfe). Das 16:9-Format im Generator liegt mit 1920×1080 klar über dieser Mindestbreite, aber unter der empfohlenen Höchstauflösung. Für Hochformat-Feeds auf Instagram oder LinkedIn ist 4:5 das gängige Format. Für Storys, Reels und Shorts bleibt 9:16 die Vorgabe.

Mehr zu den Bildmaßen für Instagram steht im Beitrag zu den Lightroom-Export-Einstellungen für Instagram. Dort auch die Randfälle beim Zuschnitt im Profil-Grid.

Warum Text bei kleiner Darstellung noch lesbar sein muss

Ein Thumbnail wird selten in der Größe betrachtet, in der du es baust. In einer Suchergebnisliste, einem Feed oder einer Vorschau-Kachel schrumpft es auf einen Bruchteil. Oft bleiben nur wenige Zentimeter auf einem Handy-Bildschirm.

YouTube verlangt nur eine Mindestbreite von 640 Pixel. In Suchergebnissen und Vorschlägen erscheint das Bild trotzdem deutlich kleiner. Was auf dem großen Vorschaubildschirm noch klar lesbar aussieht, kann in dieser Größe zu einem grauen Fleck verschwimmen.

Deshalb ist die Headline im Generator standardmäßig groß, zwischen 60 und 220 Pixel Schriftgröße. Gesetzt ist sie in Anton: fett, kompakt, ohne dünne Striche. Die verschwinden bei kleiner Darstellung zuerst.

Die Unterzeile bleibt bewusst kleiner, 24 bis 100 Pixel. Sie ist für ergänzenden Text gedacht, nicht für den Haupttext. Eine brauchbare Faustregel: Wenn du die Headline auf einem Handy-Display nicht in einer Sekunde lesen kannst, ist sie zu lang oder zu klein gesetzt.

Thumbnail oder Social-Preview-Bild?

Beides sieht ähnlich aus, macht aber unterschiedliche Jobs. Ein Thumbnail ist ein Bild, das du bewusst gestaltest. Es soll in einem Feed oder einer Ergebnisliste auffallen, in einem der drei Formate oben.

Ein Social-Preview-Bild dagegen ist das Bild, das Plattformen automatisch zeigen, wenn jemand einen Link zu deiner Seite teilt. Gesteuert wird es über das og:image-Metatag im Seitenkopf. Facebook empfiehlt dafür 1200×630 Pixel im Seitenverhältnis 1.91:1, mit 200×200 Pixel als absolutem Minimum (Meta for Developers).

Dieses Tool exportiert kein 1.91:1-Format und deckt damit keine og:image-Vorschau ab. Title und Description erscheinen neben dem Vorschaubild in der Google-Suche. Dafür gibt es den Meta Checker.

Wann du es brauchst

Du produzierst eine Woche LinkedIn-Thumbnails auf einmal. Das Format bleibt über mehrere Slides eines Karussells konsistent. Oder du exportierst aus derselben Vorlage direkt ein mehrseitiges PDF-Deck, statt jede Folie einzeln herunterzuladen.

Karussell-Texte entstehen oft parallel zu den Bildern. Dafür gibt es das LinkedIn-Text-Formatierungstool. Und wenn ein Export am Ende zu groß für eine Blog-Coverdatei ist, hilft der WebP-Converter beim Nachkomprimieren.

Was es nicht kann

Es gibt keine Bildbibliothek, keine Filter, keine Ebenen und keine Vorlagen jenseits der drei Formate. Das ist die Design-Bandbreite, die du gegen Login und Wasserzeichen eintauschst. Ein Slide trägt genau eine Headline, eine optionale Unterzeile, ein optionales Bild und einen von drei Hintergrundfarben.

Alles läuft im Tab, nichts wird gespeichert. Schließt du die Seite, ist der Entwurf weg. Ein Export vorher ist also Pflicht, nicht optional.

Das Logo unten im Bild zeigt standardmäßig „ERIC HINZPETER“, lässt sich aber über die Optionen abschalten. Wer das Tool für eigene Thumbnails nutzt, sollte diese Checkbox als Erstes finden.