Wie man die Featured Image-Größe in WordPress ändert: Ein vollständiger technischer Leitfaden

Vorgestellte Bilder — auch als Post-Thumbnails bezeichnet — sind der primäre visuelle Anker jeder WordPress-Website. Sie erscheinen in Beitragslisten, Archivseiten, Social-Media-Vorschauen und RSS-Feeds, wodurch ihre Abmessungen ein direkter Faktor für die Layout-Konsistenz und die wahrgenommene Designqualität sind. Das Ändern der Größe des vorgestellten Bildes in WordPress bedeutet entweder, die Pixelabmessungen neu zu definieren, die WordPress beim Hochladen registriert, zu aktualisieren, wie Ihr Theme diese Abmessungen zur Renderzeit anfordert, oder beides — und das Versäumnis, beide Seiten zu berücksichtigen, ist der mit Abstand häufigste Grund, warum in der Größe geänderte Bilder im Frontend falsch aussehen.

Dieser Leitfaden behandelt alle verfügbaren Methoden, von codefreien Dashboard-Einstellungen bis hin zur direkten PHP-Anpassung, mit präzisem technischem Kontext für jeden Ansatz.

Verstehen, wie WordPress mit Bildgrößen umgeht

Bevor Sie eine Einstellung ändern, müssen Sie die Pipeline verstehen. Wenn Sie ein Bild hochladen, speichert WordPress nicht eine einzige Datei — es generiert mehrere abgeleitete Dateien basierend auf registrierten Größendefinitionen. Diese Definitionen befinden sich in der Datenbank und werden entweder vom WordPress-Kern, Ihrem aktiven Theme oder installierten Plugins registriert.

Die drei Größen, die WordPress standardmäßig registriert, sind:

• Thumbnail — typischerweise 150x150 px, standardmäßig hart zugeschnitten
• Medium — bis zu 300x300 px, proportional skaliert
• Large — bis zu 1024x1024 px, proportional skaliert

Ihr Theme registriert zusätzliche Größen mit add_image_size(). Wenn eine Vorlage the_post_thumbnail('large') aufruft, sucht WordPress nach der Datei, die für diese registrierte Größe zum Zeitpunkt des Hochladens generiert wurde. Dies ist der entscheidende architektonische Punkt: Das Ändern einer Größendefinition ändert bereits hochgeladene Bilder nicht rückwirkend. Sie müssen Thumbnails nach jeder Größenänderung neu generieren.

Methode 1: Größe des vorgestellten Bildes über die WordPress-Medieneinstellungen anpassen

Dies ist der richtige Ausgangspunkt für Websites, bei denen das Theme eine der drei Kerngrößen für die Ausgabe des vorgestellten Bildes verwendet.

Schritt 1: Medieneinstellungen aktualisieren

Navigieren Sie in Ihrem WordPress-Dashboard zu Einstellungen > Medien. Sie sehen drei Größengruppen. Ermitteln Sie, welche Größe Ihr Theme für vorgestellte Bilder verwendet — überprüfen Sie Ihre Theme-Dokumentation oder untersuchen Sie das gerenderte HTML, um die CSS-Klasse zu bestätigen (z. B. wp-image-* neben size-large).

Passen Sie die Breiten- und Höhenfelder für die entsprechende Größe an. Das Setzen einer Dimension auf 0 weist WordPress an, proportional entlang der anderen Achse zu skalieren, anstatt zuzuschneiden.

Klicken Sie auf Änderungen speichern.

Schritt 2: Vorhandene Thumbnails neu generieren

Neue Uploads verwenden sofort die aktualisierten Abmessungen. Für Bilder, die sich bereits in Ihrer Medienbibliothek befinden, müssen Sie Ableitungen neu generieren. Das zuverlässigste Tool hierfür ist das Plugin Regenerate Thumbnails von Alex Mills.

Nach der Installation und Aktivierung gehen Sie zu Tools > Regen. Thumbnails und klicken Sie auf Regenerate All Thumbnails. Bei großen Bibliotheken ist dies ein ressourcenintensiver Vorgang — führen Sie ihn in Zeiten mit geringem Datenverkehr durch, und wenn Sie einen VPS Hosting-Plan nutzen, sollten Sie erwägen, PHP's max_execution_time und memory_limit in php.ini vorübergehend zu erhöhen, um Timeouts zu verhindern.

Häufige Fehlerquelle: Wenn Ihr Theme eine eigene benutzerdefinierte Größe mit demselben Label wie eine Kerngröße registriert, hat das Medieneinstellungs-Panel keinen Einfluss darauf. Der add_image_size()-Aufruf des Themes hat Vorrang.

Methode 2: WordPress-Customizer oder Theme-Optionen-Panel verwenden

Viele kommerzielle Themes bieten Bildgrößensteuerungen ohne Codeänderungen an.

Schritt 1: Customizer überprüfen

Gehen Sie zu Design > Anpassen. Suchen Sie unter Abschnitten mit den Bezeichnungen Theme-Optionen, Blog-Einstellungen, Layout oder Beitragseinstellungen. Einige Themes bieten hier einen eigenen Abschnitt Vorgestelltes Bild an.

Wenn Steuerelemente vorhanden sind, passen Sie Breite und Höhe an und klicken Sie dann auf Veröffentlichen. Das Theme aktualisiert seine registrierte Größendefinition und generiert in einigen Implementierungen automatisch betroffene Bilder neu.

Schritt 2: Ein dediziertes Theme-Optionen-Panel überprüfen

Premium-Themes, die auf Frameworks wie Redux oder Kirki aufgebaut sind, haben oft ein eigenständiges Menüelement Theme-Optionen oder Theme-Panel in der Dashboard-Seitenleiste. Suchen Sie nach Unterabschnitten mit den Namen Bildeinstellungen, Post-Thumbnails oder Archiv-Layout.

Passen Sie die Werte an, speichern Sie und generieren Sie dann Thumbnails manuell mit der oben beschriebenen Plugin-Methode neu, da die meisten Theme-Panels die Neugenerierung nicht automatisch auslösen.

Methode 3: Benutzerdefinierte Bildgrößen in functions.php definieren

Dies ist die technisch korrekte Methode für Entwickler und alle, die präzise Kontrolle über Abmessungen, Zuschneide-Verhalten und Größenbenennung benötigen. Es ist auch die einzige Methode, mit der Sie Größen registrieren können, die nicht mit den Kernstandards in Konflikt geraten.

Schritt 1: Die benutzerdefinierte Größe registrieren

Bearbeiten Sie die functions.php-Datei Ihres Child-Themes. Bearbeiten Sie niemals die Dateien eines übergeordneten Themes direkt — Updates überschreiben Ihre Änderungen. Wenn Sie kein Child-Theme haben, erstellen Sie eines, bevor Sie fortfahren.

Fügen Sie Folgendes innerhalb einer verknüpften Funktion hinzu:

function mytheme_custom_image_sizes() {
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'featured-hero', 1200, 600, true );
    add_image_size( 'featured-card', 400, 300, true );
}
add_action( 'after_setup_theme', 'mytheme_custom_image_sizes' );

Parameteraufschlüsselung für add_image_size():

• Argument 1 — das Größen-Handle (String), das beim Aufrufen des Bildes in Vorlagen verwendet wird
• Argument 2 — Breite in Pixeln
• Argument 3 — Höhe in Pixeln
• Argument 4 — Zuschneidemodus: true für harten Zuschnitt auf exakte Abmessungen; false für proportionale Skalierung; ein Array wie array( 'left', 'top' ) für positionelles Zuschneiden

Sonderfall: Das Übergeben von true als Zuschneidargument verwendet standardmäßig zentriertes Zuschneiden. Wenn Ihre vorgestellten Bilder Motive haben, die konsistent außermittig sind (z. B. Porträtfotografie), verwenden Sie ein positionelles Array — array( 'center', 'top' ) — um zu verhindern, dass Köpfe abgeschnitten werden.

Schritt 2: Die benutzerdefinierte Größe in Template-Dateien aufrufen

Suchen Sie die Template-Datei, die für das Rendern des vorgestellten Bildes verantwortlich ist. Häufige Kandidaten sind single.php, archive.php, content.php oder template-parts/content-single.php. Suchen Sie nach the_post_thumbnail, um den genauen Aufruf zu finden.

Ersetzen Sie das vorhandene Größenargument:

// Before
the_post_thumbnail( 'large' );

// After
the_post_thumbnail( 'featured-hero' );

Für mehr Kontrolle über das Ausgabe-Markup verwenden Sie get_the_post_thumbnail() mit benutzerdefinierten Attributen:

echo get_the_post_thumbnail(
    get_the_ID(),
    'featured-hero',
    array(
        'class' => 'hero-image lazyload',
        'alt'   => get_the_title(),
        'loading' => 'lazy',
    )
);

Schritt 3: Die benutzerdefinierte Größe im Medien-Uploader auswählbar machen (Optional)

Standardmäßig erscheinen mit add_image_size() registrierte benutzerdefinierte Größen nicht im Größen-Dropdown des WordPress-Medien-Uploaders. Um sie für die redaktionelle Nutzung zugänglich zu machen, fügen Sie diesen Filter hinzu:

function mytheme_add_image_sizes_to_selector( $sizes ) {
    return array_merge( $sizes, array(
        'featured-hero' => __( 'Featured Hero (1200x600)', 'mytheme' ),
        'featured-card' => __( 'Featured Card (400x300)', 'mytheme' ),
    ) );
}
add_filter( 'image_size_names_choose', 'mytheme_add_image_sizes_to_selector' );

Schritt 4: Thumbnails neu generieren

Führen Sie das Plugin Regenerate Thumbnails wie in Methode 1 beschrieben aus. Für alle zuvor hochgeladenen Bilder werden neue abgeleitete Dateien in den neuen Abmessungen generiert.

Methode 4: Größe des vorgestellten Bildes in einem Page-Builder anpassen

Page-Builder wie Elementor, Divi und Bricks Builder abstrahieren die Template-Ebene, sodass Template-Dateibearbeitungen möglicherweise nicht angewendet werden. Jeder Builder hat seine eigenen Bildgrößensteuerungen.

Elementor

1. Öffnen Sie die Seite oder den Beitrag in Elementor.
2. Wählen Sie das Widget Vorgestelltes Bild oder ein Beiträge-Widget, das das Thumbnail anzeigt.
3. Suchen Sie im linken Panel unter dem Tab Inhalt nach Bildgröße.
4. Wählen Sie eine registrierte Größe aus dem Dropdown oder wählen Sie Benutzerdefiniert, um Pixelabmessungen einzugeben.
5. Klicken Sie auf Aktualisieren.

Technischer Hinweis: Wenn Sie in Elementor „Benutzerdefiniert” auswählen, wird keine neue WordPress-Bildgröße registriert — es verwendet JavaScript, um das Bild clientseitig zu skalieren, oder fordert das Bild in voller Größe an und skaliert es über CSS. Dies erhöht das Seitengewicht. Bevorzugen Sie für leistungskritische Seiten immer eine registrierte WordPress-Größe gegenüber einer benutzerdefinierten Elementor-Dimension.

Divi

Im Blog-Modul oder Post-Featured-Image-Modul von Divi steuert die Option Bildgröße unter Erweitert, welche registrierte WordPress-Größe angefordert wird. Divi hat auch eigene Bildgrößeneinstellungen unter Divi > Theme-Optionen > Allgemein > Thumbnail-Größen, die zusätzliche Ableitungen registrieren.

Methode 5: Ein Plugin für codefreie benutzerdefinierte Bildgrößen verwenden

Wenn das Bearbeiten von PHP keine Option ist, replizieren diese Plugins die add_image_size()-Funktionalität über eine Benutzeroberfläche:

Simple Image Sizes ist der direkteste Ersatz für add_image_size(). Nach der Installation navigieren Sie zu Einstellungen > Medien — das Plugin fügt unterhalb der Kernstandards einen Abschnitt für benutzerdefinierte Größen hinzu. Definieren Sie Ihre Größe, speichern Sie und verwenden Sie die integrierte Neugenerierung des Plugins, um sie anzuwenden.

Vergleich: Alle Methoden auf einen Blick

Leistungs- und Bildoptimierungsüberlegungen

Das Registrieren zu vieler Bildgrößen ist ein häufig übersehenes serverseitiges Problem. Jede registrierte Größe generiert beim Hochladen eine neue Datei. Eine Website mit 15 registrierten Größen und 2.000 Bildern in der Medienbibliothek hat potenziell 30.000 Bilddateien auf der Festplatte. Auf Shared Hosting füllt dies Kontingente; auf jedem Server erhöht es die Backup-Größen.

Überprüfen Sie Ihre registrierten Größen regelmäßig. Verwenden Sie diesen Code-Ausschnitt in einem temporären Plugin oder functions.php, um alle registrierten Größen aufzulisten:

add_action( 'wp_loaded', function() {
    if ( current_user_can( 'manage_options' ) && isset( $_GET['show_image_sizes'] ) ) {
        echo '<pre>';
        print_r( wp_get_registered_image_subsizes() );
        echo '</pre>';
        exit;
    }
} );

Besuchen Sie https://yoursite.com/?show_image_sizes=1 als Administrator angemeldet, um die vollständige Liste zu sehen.

Weitere Leistungspraktiken:

• WebP-Format verwenden. WordPress 5.8+ konvertiert hochgeladene Bilder in WebP, wenn die GD- oder Imagick-Bibliothek Ihres Servers dies unterstützt. Überprüfen Sie die Unterstützung unter Tools > Website-Zustand.
• Lazy Loading implementieren. WordPress fügt seit Version 5.5 standardmäßig loading="lazy" zu Bildern unterhalb des sichtbaren Bereichs hinzu. Stellen Sie sicher, dass Ihre benutzerdefinierten the_post_thumbnail()-Aufrufe dieses Attribut beibehalten.
• Vor dem Hochladen komprimieren. Tools wie ShortPixel oder Imagify integrieren sich direkt in die WordPress-Medienpipeline und komprimieren Ableitungen automatisch. TinyPNG eignet sich gut für manuelle Komprimierung vor dem Hochladen.
• Ein CDN verwenden. Wenn Ihre Website ein globales Publikum bedient, reduziert die Auslagerung der Bildbereitstellung an ein CDN die Latenz unabhängig von der Anzahl der registrierten Größen.

Für Websites mit hohem Bildaufkommen — Fotografie-Portfolios, Nachrichtenseiten, WooCommerce-Shops — bietet ein VPS mit cPanel die serverseitige Kontrolle, um PHP-Speicherlimits anzupassen, Imagick direkt zu konfigurieren und Festplattenkontingente zu verwalten, was Shared-Hosting-Umgebungen nicht bieten können.

Responsive Bilder und das srcset-Attribut

WordPress generiert automatisch srcset– und sizes-Attribute für Bilder in Inhalten und greift dabei auf alle registrierten Bildgrößen zurück. Das bedeutet, dass jede von Ihnen registrierte Größe zur Fähigkeit des Browsers beiträgt, die am besten geeignete Auflösung für den Viewport und das Gerätepixelverhältnis des Benutzers auszuwählen.

Wenn Sie the_post_thumbnail() aufrufen, gibt WordPress ein Markup ähnlich dem folgenden aus:

<img src="hero-1200x600.jpg"
     srcset="hero-400x300.jpg 400w, hero-800x400.jpg 800w, hero-1200x600.jpg 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
     alt="Post Title"
     loading="lazy">

Das sizes-Attribut teilt dem Browser mit, wie breit das Bild bei verschiedenen Viewport-Breiten gerendert wird. WordPress generiert einen Standard-sizes-Wert, der jedoch für komplexe Layouts oft ungenau ist. Überschreiben Sie ihn mit dem wp_calculate_image_sizes-Filter oder indem Sie ein benutzerdefiniertes sizes-Attribut im $attr-Array von get_the_post_thumbnail() übergeben.

SSL-, Domain- und Hosting-Kontext

Wenn Sie eine WordPress-Website auf eine neue Domain migrieren oder nach dem Erhalt eines SSL-Zertifikats von HTTP auf HTTPS wechseln, sind in Post-Meta gespeicherte Bild-URLs (_thumbnail_id-Referenzen) relativ zur Anhang-ID und werden von Domain-Änderungen nicht beeinflusst. Bild-URLs, die jedoch in Beitragsinhalten oder Theme-Optionen fest kodiert sind, müssen über eine Such-Ersetzen-Operation mit WP-CLI aktualisiert werden:

wp search-replace 'http://olddomain.com' 'https://newdomain.com' --skip-columns=guid

Wenn Sie eine neue WordPress-Installation von Grund auf einrichten, stellt die Registrierung Ihrer Domain über die Domain-Registrierung und die Kombination mit einer ordnungsgemäß konfigurierten Hosting-Umgebung sicher, dass Ihre Medien-Upload-Pfade und .htaccess-Rewrite-Regeln von Anfang an korrekt sind, und vermeidet fehlerhafte Bild-URL-Muster, die im Nachhinein mühsam zu debuggen sind.

Technische Entscheidungs-Checkliste

Verwenden Sie diese Matrix, um den richtigen Ansatz für Ihre Situation auszuwählen:

• Sie müssen eine Kerngröße (Thumbnail/Medium/Large) ändern und bearbeiten keinen Code — verwenden Sie Einstellungen > Medien und generieren Sie dann Thumbnails neu.
• Ihr Premium-Theme hat ein Theme-Optionen-Panel — überprüfen Sie dies zuerst, bevor Sie Dateien anfassen.
• Sie benötigen eine Größe mit exakten Pixelabmessungen und hartem Zuschneiden — verwenden Sie add_image_size() in der functions.php eines Child-Themes.
• Ihr Motiv erfordert nicht-zentriertes Zuschneiden — übergeben Sie ein positionelles Array als viertes Argument an add_image_size().
• Sie verwenden Elementor oder Divi — verwenden Sie die native Bildgrößensteuerung des Builders, bevorzugen Sie jedoch aus Leistungsgründen registrierte WordPress-Größen gegenüber „Benutzerdefiniert”.
• Sie können PHP nicht bearbeiten und benötigen eine benutzerdefinierte Größe — installieren Sie Simple Image Sizes, definieren Sie die Größe und generieren Sie neu.
• Sie haben eine große Medienbibliothek — verwenden Sie Regenerate Thumbnails Advanced, das eine selektive Neugenerierung nach Größenname ermöglicht, um redundante Verarbeitung zu vermeiden.
• Leistung hat Priorität — überprüfen Sie registrierte Größen, aktivieren Sie WebP, implementieren Sie ein CDN und stellen Sie sicher, dass Lazy Loading aktiv ist.
• Sie befinden sich auf Shared Hosting und stoßen bei der Neugenerierung auf Speicher- oder Timeout-Fehler — erwägen Sie die Migration zu einem VPS Hosting-Plan, bei dem PHP-Limits konfigurierbar sind.

FAQ

Warum zeigen meine vorgestellten Bilder nach der Änderung der Medieneinstellungen noch die alte Größe?

WordPress generiert Bildableitungen zum Zeitpunkt des Hochladens. Das Ändern einer Größendefinition in Einstellungen > Medien betrifft nur neue Uploads. Sie müssen ein Thumbnail-Neugenerierungstool ausführen — wie das Plugin Regenerate Thumbnails — um Dateien zu skalieren, die sich bereits in Ihrer Medienbibliothek befinden.

Was ist der Unterschied zwischen add_image_size() mit true versus false als Zuschneideparameter?

Das Übergeben von true zwingt WordPress, das Bild auf die von Ihnen angegebene genaue Breite und Höhe zuzuschneiden, standardmäßig zentriert. Das Übergeben von false skaliert das Bild proportional, sodass keine Dimension Ihre angegebenen Werte überschreitet, was bedeutet, dass die tatsächlichen Ausgabeabmessungen kleiner als angegeben sein können, wenn das ursprüngliche Seitenverhältnis abweicht.

Verlangsamt das Registrieren vieler benutzerdefinierter Bildgrößen meine Website?

Nicht zur Renderzeit — WordPress liefert vorab generierte Dateien. Die Leistungskosten entstehen beim Hochladen, wenn Imagick oder GD eine Ableitung pro registrierter Größe generieren muss. Websites mit vielen Größen und hohem Upload-Volumen können langsame Upload-Antworten und erhebliches Festplattenwachstum erfahren.

Kann ich Bildgrößen entfernen, die ich nicht mehr benötige?

Ja. Verwenden Sie remove_image_size( 'size-name' ) in Ihrer functions.php, um die Generierung einer Größe für neue Uploads zu stoppen. Vorhandene Dateien für diese Größe verbleiben auf der Festplatte, bis sie manuell gelöscht werden. Der WP-CLI-Befehl wp media regenerate --only-missing kann bei der Bereinigung helfen, indem er nur fehlende Größen generiert, ohne alle Ableitungen neu zu erstellen.

Beeinflusst das Ändern der Größe des vorgestellten Bildes, wie Bilder beim Teilen in sozialen Medien erscheinen?

Nicht direkt. Soziale Plattformen wie Facebook und Twitter lesen Open-Graph-Meta-Tags (og:image), um zu bestimmen, welches Bild angezeigt werden soll. Diese Tags werden typischerweise von einem SEO-Plugin wie Yoast SEO oder Rank Math gesetzt, das eine eigene Bildgröße (üblicherweise 1200x630) speziell für das Teilen in sozialen Medien registriert. Das Ändern der Größe des vorgestellten Bildes Ihres Themes ändert das Open-Graph-Bild nicht, es sei denn, Ihr SEO-Plugin ist so konfiguriert, dass es dasselbe Größen-Handle verwendet.