Barrierefreiheit

Optimale Bildgrößen im Webdesign


Warum sind Bildgrößen im Webdesign so wichtig?

Bilder werten deine Website nicht nur optisch auf – sie haben direkten Einfluss auf Ladezeit, Benutzererlebnis und SEO. Gerade bei WordPress-Seiten mit dem Kadence-Theme, das stark auf Performance und Responsive Design setzt, ist die richtige Bildgröße entscheidend.
In diesem Beitrag zeige ich dir, welche Bildgrößen in WordPress + Kadence optimal sind, wie du sie richtig einbindest und welche Tools du zur Bildoptimierung nutzen solltest.


Bildformate in WordPress: Was ist sinnvoll?

Es gibt verschiedene Bildformate, die jeweils für unterschiedliche Zwecke geeignet sind:

  • JPEG (oder JPG) ist ideal für Fotos und Bilder mit vielen Farben. Die Dateien sind relativ klein bei guter Qualität – perfekt für Blogbeiträge oder Galerien.
  • PNG eignet sich gut für Bilder mit Transparenz, wie z. B. Logos oder Icons. Es verwendet eine verlustfreie Kompression, hat aber größere Dateigrößen.
  • WebP ist ein modernes Bildformat, das eine sehr hohe Komprimierung bei gleichzeitig guter Bildqualität ermöglicht. Es wird mittlerweile von fast allen modernen Browsern unterstützt und sollte für alle gängigen Bilder verwendet werden.
  • SVG ist ein Vektorformat, das sich verlustfrei skalieren lässt. Es ist ideal für Logos, Icons oder einfache Illustrationen. In WordPress ist es standardmäßig deaktiviert, kann aber mit dem Plugin „Safe SVG“ verwendet werden.


Tipp: WordPress 5.8+ unterstützt WebP nativ. Nutze ein Plugin wie “Enable Media Replace” oder “Imagify”, um vorhandene Bilder zu konvertieren.

2. Kadence-spezifische Bildgrößen

Kadence erstellt automatisch mehrere Bildgrößen je nach Theme-Layout. Die wichtigsten:

Wenn du das Kadence-Theme verwendest, solltest du dich an folgende Bildgrößen halten, je nachdem, wo das Bild eingesetzt wird:

  • Für Hero-Bilder (also große Bilder oben auf Seiten oder Landingpages), empfiehlt sich eine Größe von etwa 2000 x 1200 Pixeln. So wirkt das Bild auf großen Monitoren scharf, ohne unnötig groß zu sein.
  • Das Beitragsbild in der Blog-Übersicht (z. B. im Grid oder Blog-Archiv) sollte etwa 800 x 600 Pixel groß sein. Das reicht für Desktop und mobil.
  • Für das Featured Image im Einzelbeitrag eignet sich ein Format von 1200 x 675 Pixeln, was dem 16:9-Format entspricht. Das sieht modern aus und funktioniert gut für Social Media Sharing.
  • Galeriebilder, etwa in Kadence-Galerie-Blocks, sollten quadratisch und etwa 800 x 800 Pixel groß sein, damit sie auf Mobilgeräten und Desktop gleichmäßig wirken.
  • Thumbnails, also Vorschaubilder in Widgets, Sidebars oder Kategorieansichten, sind meist 300 x 300 Pixel groß.
  • Für das Logo deiner Website ist ein Maß von 250 x 100 Pixeln gut geeignet – oder du nutzt ein SVG-Logo, das sich verlustfrei skaliert.
  • Das Favicon (also das kleine Symbol im Browser-Tab) sollte 512 x 512 Pixel groß sein. WordPress verwendet diese Größe intern, skaliert aber automatisch auf 32 x 32 Pixel herunter.

Du findest die Bildgrößen unter Design > Customizer > Layout > Blog Posts / Pages – Kadence erlaubt dort genaue Einstellungen.

3. Responsive Bilder in WordPress

WordPress erstellt beim Hochladen eines Bildes automatisch mehrere Größen (z. B. klein, mittel, groß). Das Theme – also in deinem Fall Kadence – nutzt diese Versionen je nach Bildschirmgröße und Situation.

Ein Beispiel: Wenn du ein großes Bild mit 2000 Pixeln Breite hochlädst, erzeugt WordPress automatisch kleinere Varianten davon. Im Frontend lädt der Browser dann automatisch die passende Größe – das spart Datenvolumen und beschleunigt die Seite auf Mobilgeräten.

Wichtig: Auch wenn WordPress Bilder automatisch verkleinert, solltest du keine 6000px breiten Bilder hochladen. Verkleinere sie vor dem Upload auf sinnvolle Maße (z. B. max. 2000px Breite für große Bilder).
Aber: Lade nicht einfach riesige Bilder hoch! Reduziere sie vorher auf eine passende Maximalbreite, z. B. 2000px für Hero-Bilder, 1200px für Content-Bilder.

4. Bildoptimierung für WordPress

  • Imagify oder ShortPixel: Diese Plugins optimieren deine Bilder automatisch beim Hochladen in WordPress. Sie komprimieren JPEG, PNG und wandeln Bilder auf Wunsch auch in WebP um.
  • Regenerate Thumbnails: Dieses Plugin hilft dir, neue Bildgrößen zu erzeugen, wenn du dein Theme wechselst oder in Kadence andere Layoutoptionen auswählst.
  • Safe SVG: Damit kannst du SVG-Dateien sicher in WordPress hochladen – perfekt für Logos oder Icons.
  • Squoosh (von Google): Ein Online-Tool, mit dem du Bilder manuell verkleinern, komprimieren und in WebP konvertieren kannst – alles direkt im Browser.
  • TinyPNG / TinyJPG: Sehr einfache Web-Tools zur verlustarmen Komprimierung von JPEG- und PNG-Dateien.

Tipp: Stelle in den WordPress-Einstellungen unter “Medien” nur sinnvolle Bildgrößen ein – unnötige Größen erhöhen die Serverlast.

5. Performance- und SEO-Tipps für Bilder in Kadence

  • Verwende Lazy Loading (standardmäßig ab WP 5.5 aktiv)
  • Gib ALT-Texte an (wichtig für SEO & Barrierefreiheit)
  • Vermeide Stock-Bilder mit generischen Dateinamen
  • Nutze Kadence Blocks für optimierte Galerien und Bildraster
  • Vermeide das direkte Einbinden riesiger Originalbilder

Fazit

Das Kadence-Theme bietet viele Optionen für schnelle, bildstarke Websites – aber nur, wenn du die Bildgrößen sinnvoll wählst und Optimierungstools nutzt.

Ein paar einfache Schritte wie das Konvertieren in WebP, das Verkleinern vor dem Upload und das Einstellen der richtigen Standardgrößen machen oft den Unterschied zwischen einer trägen Seite und einer performanten Website.

Hilfe gewünscht?

Ich unterstütze dich gern bei der Einrichtung von Kadence, Bildoptimierung, Hosting-Performance oder SEO – schreib mir einfach über das Kontaktformular oder buche eine kurze Website-Analyse!