Wenn über Image-SEO für Bloggrafiken gesprochen wird, geht es meist um drei Dinge: Bilder sollen schnell laden, klar wiedergeben, worum es auf der Seite geht, und Suchmaschinen (plus soziale Apps) sollen sie richtig interpretieren können.
Der häufigste Fehler ist simpel: Bilder werden wie Dekoration behandelt. Jemand lädt eine riesige Datei mit einem Namen wie "final-final-2.png" hoch und lässt den Alt-Text leer (oder füllt ihn mit Keywords). Die Seite lädt langsamer, das Bild wirkt auf manchen Bildschirmen unscharf und der Beitrag verpasst Chancen, in der Bildersuche aufzutauchen.
Schlechte Bildentscheidungen schaden auch dem Auftritt dort, wo Menschen den Beitrag entdecken. Deine Grafiken erscheinen als Thumbnail in Suchergebnissen, als Vorschaubild in Messenger-Apps oder als Hero-Bild oben im Artikel. Wenn dieses Bild schwer, seltsam beschnitten oder unklar ist, klicken weniger Leute.
Die meisten Probleme lassen sich beheben, wenn man sie früh erwischt:
Perfektion ist nicht nötig. Eine wiederholbare Gewohnheit reicht: schnell laden, klare Aussage und ein konsistenter Look, den Leser bei mehreren Beiträgen wiedererkennen.
Ein guter Dateiname ist eine kleine Entscheidung mit langfristigem Nutzen. Er hilft, Assets später zu finden, Kollegen zu verstehen, was ein Bild ist, und liefert Suchmaschinen Kontext.
Verwende echte Wörter, die zum Thema der Seite passen, nicht Kameranummern (wie IMG_4920) oder zufällige Zeichenfolgen. Kurz und spezifisch ist besser. Wenn der Beitrag WebP vs AVIF behandelt, sollte der Dateiname das widerspiegeln, nicht ein interner Projektcode.
Bindestriche sind das sicherste Trennzeichen, weil sie wie Leerzeichen gelesen werden. Kleinbuchstaben sind ratsam. Vermeide Sonderzeichen (%, &, ?, Kommas) und wenn möglich Akzente. Auch Keyword-Stuffing solltest du vermeiden. Eine klare Phrase schlägt eine lange Kette von Begriffen.
Füge Größe oder Version nur hinzu, wenn es Fehler verhindert. Responsive Bilder erzeugen oft mehrere Größen, daher führt das Einbacken von Dimensionen in den Hauptnamen meist zu Unordnung. Füge ein Suffix nur, wenn es wirklich verschiedene Varianten gibt, die verwechselt werden könnten, etwa dunkler vs. heller Hintergrund oder ein aktualisiertes Diagramm.
Eine einfache Vorlage, die du wiederverwenden kannst:
\u003ctopic-or-post-slug\u003e-\u003cwhat-it-shows\u003e-\u003cvariant\u003e
Beispiele, die sauber bleiben:
Alt-Text ist in erster Linie für Menschen, die Screenreader nutzen, und für Fälle, in denen ein Bild nicht geladen wird. Das heißt: Er sollte beschreiben, was tatsächlich sichtbar ist, nicht das, was du dir wünschst, dass das Bild sagt. Wenn du ihn als Platz für Keywords benutzt, wird er laut und unbrauchbar.
Eine gute Regel: Schreibe einen klaren Satz, der die Frage beantwortet: „Was ist dieses Bild?“ Wenn eine Person, ein Produkt oder ein Markenelement sichtbar ist, nenne es. Wenn etwas passiert, beschreibe die Handlung. Verzichte auf Füllwörter wie „Bild von“ oder „Grafik zeigt“.
Dekorative Bilder sind anders. Wenn ein Bild keine Information hinzufügt (Hintergrundmuster, Trennlinie, rein dekoratives Icon), nutze leeren Alt-Text (alt="") damit Screenreader es überspringen. Lass den Alt-Text nicht versehentlich weg; die leere Variante ist eine bewusste Entscheidung.
Alt-Text, Bildunterschriften und umgebender Text erfüllen unterschiedliche Aufgaben:
Kurze „schlecht vs. gut“-Beispiele für häufige Bloggrafiken:
Wenn du Bilder in großem Umfang erstellst, hilft ein kleines Style-Guide: ein Satz mit Regeln für Ein-Satz-Alt-Text, einfache Wörter und konsistente Benennungen für wiederkehrende Elemente (Logo, Produkt-UI, Diagramme).
Die meisten Bildprobleme stammen von zwei Extremen: Entweder man exportiert eine einzige riesige Datei für alles oder man exportiert eine kleine Datei und streckt sie so weit, dass sie weich aussieht. Konsistenz behebt beides.
Wähle eine kleine Menge Standardbreiten und halte dich daran. Das macht die Performance vorhersehbar und reduziert Einzelfälle. Ein praktisches Set ist:
Unterschiedliche Platzierungen benötigen unterschiedliche Behandlung. Ein Hero-Bild ist oft breit und kann mehr Details tragen. Ein In-Article-Bild sollte lesbar sein, ohne dass Nutzer zoomen müssen. Ein Thumbnail sollte einfach und kontrastreich sein, weil es oft sehr klein dargestellt wird.
Responsives Bild liefert einfach gesagt: eine kleinere Datei an kleinen Bildschirmen, eine größere an großen Bildschirmen. Du bietest ein paar Größen an, und der Browser wählt automatisch die beste. So bleiben Seiten schnell, ohne an Schärfe zu verlieren.
Zuschneiden vs. Verkleinern: Verkleinern, wenn du denselben Bildausschnitt nur kleiner oder größer willst. Zuschneiden, wenn sich die Form ändert (z. B. ein breites Hero zu einem quadratischen Thumbnail). Wenn du nicht zuschneidest, wird das Thumbnail oft unlesbar, weil das Motiv zu klein wird.
Um Unschärfe auf hochauflösenden ("Retina") Bildschirmen zu vermeiden, sollte deine größte gelieferte Größe mindestens 2× der dargestellten Größe entsprechen. Beispiel: Wenn ein Hero auf dem Desktop 1200px breit angezeigt wird, bereite eine 2400px-Quelle vor und nutze dann Kompression, um die Dateigröße zu reduzieren.
Die Wahl des richtigen Bildformats beeinflusst Ladezeit, Schärfe und wie oft Nutzer abspringen, bevor die Seite fertig geladen ist.
WebP ist für die meisten Blogbilder ein sicherer Default. Es hält Dateien klein und sieht meist gut aus für Fotos, Screenshots und einfache Grafiken.
AVIF kann noch kleiner als WebP sein bei gleicher Qualität, besonders bei großen Fotos und Verläufen. Der Kompromiss ist langsameres Encodieren und ein größeres Risiko, dass bei starker Kompression Hauttöne und feine Texturen etwas "wachsig" aussehen. Viele Teams nutzen AVIF für große Visuals, bei denen die Einsparung wichtig ist.
JPEG macht weiterhin Sinn für Fotos, wenn maximale Kompatibilität oder schnelle Verarbeitung nötig sind. PNG ist gut für Grafiken mit Transparenz (z. B. Logos über einem Hintergrund) oder wenn besonders scharfe Kanten wichtiger sind als Dateigröße. SVG ist ideal für Icons und einfache Formen, weil es bei jeder Größe scharf bleibt.
| Use case | Beste Wahl | Warum | Achtung |
|---|---|---|---|
| Fotos (Blog-Header, Lifestyle) | WebP (oder AVIF für große Header) | Kleine Dateien, gute Qualität | Überkompression-Artefakte |
| Screenshots (UI, Dashboards) | WebP | Guter Kompromiss, kommt mit Text gut zurecht | Falls Text unscharf wirkt, Qualität erhöhen |
| Grafiken mit Transparenz (Badges, Overlays) | PNG (oder WebP, wenn dein Workflow Transparenz gut erhält) | Transparenter Hintergrund bleibt erhalten | PNG kann schwer sein |
| Logos und Icons | SVG | Winzig, scharf in jeder Größe | Komplexe SVGs können aufblähen |
| Diagramme mit feinen Linien | SVG (oder PNG) | Scharfe Linien und Beschriftungen | Nicht als niedrig aufgelöstes JPG exportieren |
Kompression macht Bilddateien kleiner, damit Seiten schneller laden. Gut angewendet verändert sie nicht die Aussage des Bildes. Farben bleiben glaubwürdig, Kanten sauber und wichtige Details gut erkennbar.
Praktisch: Starte etwas höher als nötig bei der Qualität, verringere sie dann, bis du gerade noch ein Problem siehst, und geh einen Schritt zurück. Die richtige Einstellung hängt vom Bild ab — vertrau deinen Augen mehr als starren Regeln.
Achte auf Artefakte, die Vertrauen und Lesbarkeit schädigen: Farbbanding in Verläufen (z. B. Himmel), Halos um ausgeschnittene Motive und weiche oder verwaschene Kanten. Text ist der Ort, an dem Probleme am schnellsten auffallen. Wenn das Bild kleine Texte enthält, macht Kompression sie oft unscharf.
Kleiner Text in Bildern ist aus einem weiteren Grund riskant: Er skaliert auf Handys schlecht und ist nicht durchsuchbar. Wenn Worte wichtig sind, setze sie als echten Text auf die Seite und nutze das Bild nur als visuelle Unterstützung. Wenn Text unverzichtbar ist (z. B. Diagramm-Beschriftungen), mache ihn größer und erwäge ein Format, das Kanten scharf hält.
Eine schnelle Vorher-Nachher-Prüfung, die Overthinking vermeidet:
Konsistente Visuals lassen Beiträge wie aus einer Hand wirken, auch wenn die Themen wechseln. Sie erleichtern außerdem Image-SEO, weil Namensgebung, Größen und Alt-Texte vorhersehbar wiederholt werden.
Fang mit einer einseitigen Style-Guide an, den jeder folgen kann. Halte es simpel: 2–3 Markenfarben (plus Neutrale), 1–2 Schriftarten und ein paar Abstandsregeln. Entscheide früh Details wie Eckenradius, Schattenstärke und ob du Outlines oder gefüllte Formen nutzt. Diese kleinen Entscheidungen sorgen dafür, dass Bilder "zusammenpassen".
Erstelle einige wiederverwendbare Templates, damit du nicht jedes Mal das Rad neu erfindest. Die meisten Blogs profitieren stark von:
Setze Regeln für Icons und Illustrationen. Wähle einen Stil und bleibe dabei. Wenn du Stile mischst, dann bewusst (z. B. nur Linien-Icons und Fotos nur, wenn sie echte Screenshots sind).
Halte eine kleine Bibliothek genehmigter Elemente bereit: Hintergründe, Verläufe, Shapes, Badges und ein Icon-Set. Speichere sie mit klaren Namen, damit niemand zufällige Assets nimmt, die nur "ähnlich genug" aussehen.
Für saisonale Kampagnen ändere nur eine Ebene, nicht das ganze System. Tausche eine Akzentfarbe, füge ein kleines saisonales Badge hinzu oder nutze ein limitiertes Set an Hintergründen. Wenn die Kampagne endet, entfernst du die saisonale Ebene und dein Kern-Look bleibt erhalten.
Konsistenz ist der Schlüssel. Wenn du jedes Mal dieselben kleinen Schritte machst, vermeidest du chaotische Dateinamen, vagen Alt-Text und zufällige Bildgrößen, die Seiten verlangsamen.
Bevor du irgendetwas designst, entscheide, was jedes Bild tun soll: ein Hero, das das Thema schnell erklärt, ein paar unterstützende Bilder, die Abschnitte klären, und ein Social-Share-Bild (oft ein engerer Ausschnitt).
Formuliere die Texte früh. Schreibe Dateinamen und Alt-Text, solange die Idee frisch ist, nicht erst nach dem Export. Beispiel: Wenn der Beitrag WebP vs AVIF heißt, plane webp-vs-avif-size-chart.webp mit Alt-Text wie "Diagramm, das WebP- und AVIF-Dateigrößen für dasselbe Foto vergleicht."
Exportiere dann in einer kleinen Menge an Größen, damit deine Seite die beste für den Bildschirm wählen kann:
Nach der Kompression mach einen 30-Sekunden-"Human Check": Ist Text lesbar, sehen Gesichter natürlich aus, sind Hintergründe sauber und passt es zur Marke (Farben, Schriften, Abstände)?
Zuletzt spotteste auf der Seite vor der Veröffentlichung. Stimmen Dateinamen mit dem Beitrag überein, beschreibt der Alt-Text das Bild ohne Keyword-Stuffing, sind die Dimensionen korrekt und wirkt das Set wie aus einem Guss?
Ein wöchentlicher Beitrag mit dem Titel "WebP vs AVIF: what to use for blog graphics" braucht oft fünf Visuals: ein Hero, drei In-Article-Bilder und ein Social-Preview. Wenn man das als System behandelt, geht es schneller und die Serie wirkt wiedererkennbar.
Beginne mit einem Slug, den du überall benutzt: webp-vs-avif-blog-graphics. Benenne dann jede Datei nach ihrem Zweck und Erscheinungsort:
webp-vs-avif-blog-graphics-hero.webp | Alt: "Side-by-side comparison of the same blog graphic saved as WebP and AVIF" | 1600x900 | WebP (AVIF if supported)webp-vs-avif-blog-graphics-format-table.avif | Alt: "Table comparing WebP and AVIF file size and quality at the same resolution" | 1200x675 | AVIFwebp-vs-avif-blog-graphics-responsive-sizes.webp | Alt: "Example of one image served in multiple responsive sizes for desktop and mobile" | 1200x675 | WebPwebp-vs-avif-blog-graphics-export-settings.png | Alt: "Export settings screen showing quality and metadata options for web images" | 1200x675 | PNG (only if text must stay perfectly sharp)webp-vs-avif-blog-graphics-social-1200x630.jpg | Alt: "Social preview card with the post title and a small WebP vs AVIF label" | 1200x630 | JPEGBranding bleibt konsistent, wenn jedes Bild aus denselben Templates stammt: ein fixes Schriftpaar, zwei Markenfarben und ein sicherer Bereich, damit Text in Social-Previews nicht abgeschnitten wird.
Der schnellste Weg, Image-SEO-Wert zu verlieren, ist, Bilder als Nachgedanken zu behandeln. Ein paar kleine Gewohnheiten halten Seiten leichter, klarer und konsistenter.
Keyword-Stuffing ist der größte Fehler. Dateinamen wie best-image-seo-for-blog-graphics-best-seo.png und Alt-Texte, die wie eine Liste von Phrasen wirken, sehen spammy aus und nützen niemandem. Benenne die Datei nach ihrem Inhalt und schreibe den Alt-Text so, wie du einem Freund das Bild beschreiben würdest.
Ein weiterer häufiger Fehler ist, riesige Bilder hochzuladen und die Seite sie verkleinern zu lassen. Ein 4000px-Bild, das mit 800px angezeigt wird, zwingt Nutzer trotzdem, die große Datei herunterzuladen. Exportiere in den tatsächlich benötigten Größen und nutze responsive Images, damit Mobilgeräte keine Desktop-Assets laden.
Textlastige Grafiken schlagen auch fehl. Eine Zitatkarte mit winziger Schrift sieht auf dem Laptop vielleicht okay aus, ist auf dem Handy aber unlesbar. Halte Text kurz und groß oder verschiebe Details in eine Caption. Wenn Text wirklich ins Bild muss, prüfe die Darstellung in der Telefonansicht vor dem Veröffentlichen.
Style-Drift ist subtil, aber schädlich für das Branding. Zufällige Farben, gemischte Schriften und inkonsistente Abstände lassen einen Blog zusammengewürfelt wirken. Wähle ein kleines Regelset (2 Fonts, begrenzte Palette, Standard-Padding, einheitlicher Eckenradius) und nutze Templates wieder.
Teste außerdem Vorschauansichten und den Dark Mode. Manche Bilder wirken auf dunklem Hintergrund ausgewaschen, und Social-Previews können wichtige Details abschneiden. Prüfe eine dunkle Theme-Ansicht und ob der Fokuspunkt beim Zuschnitt für breite Vorschaubilder noch funktioniert.
Nutze das als letzten 2-Minuten-Check bevor du auf Veröffentlichen klickst:
Danach spotteste auf Mobil und Desktop. Auf Mobil: Achte auf abgeschnittenen Text, winzige Labels und Bilder, die den ersten Absatz zu weit nach unten drücken. Auf Desktop: Achte auf zu große oder weich wirkende Bilder, die gestreckt werden.
Wenn du willst, dass das konsistent bleibt, behandle es wie ein kleines System. Das Ziel ist einfach: Jedes Bild verlässt die Seite mit denselben Basics erledigt, ohne extra Nachdenken.
Beginne mit einer kurzen internen Richtlinie, die jeder an einem vollen Tag befolgen kann. Enthält: Benennungsmuster, Alt-Text-Regeln, Standardgrößen (Hero, Inline, Social), bevorzugte Formate und ein schneller Pre-Publish-Check für Rechtschreibung, Kontrast und Zuschnitt.
Wähle dann drei wiederverwendbare Templates und bleibe einen Monat dabei. Eine einfache Titelkarte, ein Chart-Visual und ein Foto-mit-Label-Layout reichen für viele Blogs. Konsistente Templates lassen die Marke vertraut wirken und machen Alt-Text und Benennung schneller, weil die Struktur sich wiederholt.
Um zu skalieren, arbeite in Batches: Plane die Bilder für den ganzen Beitrag, exportiere die komplette Menge an Größen, komprimiere sie und QA sie als Gruppe. Verfolge auch Ergebnisse, z. B. Klicks von Beiträgen mit starken Thumbnails und welche Visuals wiederverwendet oder geteilt werden.
Wenn du eine All-in-One-Lösung zur Generierung und Pflege dieser Konsistenz möchtest, unterstützt GENERATED (generated.app) Content-Generierung plus Blog-Bild-Generierung, Größenanpassung, Polishing und Performance-Tracking, was hilft, den Workflow wiederholbar zu halten, wenn dein Veröffentlichungsvolumen wächst.
Behandle jedes Bild wie Inhalt, nicht wie reine Dekoration. Verwende einen klaren Dateinamen, präzisen Alt-Text, die passenden Abmessungen für den Einsatzzweck und ein modernes Format mit sinnvoller Kompression, damit es schnell lädt und scharf bleibt.
Nutze eine kurze, beschreibende Phrase, die zum Beitrag und zum Bildinhalt passt, z. B. webp-vs-avif-format-comparison-chart.webp. Kleinbuchstaben, Bindestriche, keine Sonderzeichen und kein Keyword-Stuffing.
Schreibe einen klaren Satz, der beschreibt, was im Bild sichtbar und wichtig ist — so, wie du es jemandem erklären würdest, der das Bild nicht sehen kann. Verzichte auf Füllwörter wie „Bild von“ und keine Aufzählung von Keywords.
Verwende leeren Alt-Text (alt=""), wenn das Bild keine Information hinzufügt, z. B. Hintergrundmuster, Trennlinie oder rein dekorative Form. Leerer Alt-Text sagt Screenreadern ausdrücklich, das Bild zu überspringen.
Alt-Text dient Barrierefreiheit und als Fallback, Captions sind für alle Leser nützlich, wenn Kontext oder eine Erklärung nötig ist. Sie ergänzen sich — Caption kann einen Hinweis geben, was der Leser beachten soll.
Wähle eine kleine, wiederkehrende Menge an Standardbreiten und nutze sie in allen Beiträgen, damit die Performance vorhersehbar bleibt. Ein praktisches Set: 480px, 768px, 1200px und 1600px. Dann liefert deine Seite jeweils die passende Größe.
Skaliere (resize), wenn derselbe Bildausschnitt erhalten bleiben soll. Croppe, wenn sich die Form ändert — etwa ein breites Hero-Bild in ein quadratisches Thumbnail —, sonst wird das Motiv zu klein und unlesbar.
WebP ist ein guter Default für die meisten Blogbilder. AVIF spart oft noch mehr bei großen Fotos und Verläufen, kann aber bei zu starker Kompression problematisch aussehen. PNG ist sinnvoll bei Transparenz oder wenn besonders scharfe Kanten nötig sind; SVG für Icons und einfache Formen.
Komprimiere so lange, bis du gerade noch Qualitätsverluste erkennst, und stell dann eine Stufe zurück. Prüfe bei 100% Zoom auf Banding, Halos und unscharfe Textkanten und teste zusätzlich die Darstellung in der Telefonansicht.
Lege eine kurze Style-Guide-Seite und ein paar Templates (Hero, Zitatkarte, Schrittgrafik) fest, damit Schriftarten, Farben und Abstände konsistent bleiben. Arbeite in einem festen Ablauf: Rollen zuweisen, Dateien benennen, Alt-Text schreiben, Standardgrößen exportieren, komprimieren und kurz auf der Seite prüfen.