Eigene Bildgrößen in WordPress hinzufügen – So geht’s richtig!

Einleitung

Bilder sind ein zentraler Bestandteil jeder WordPress-Website. Doch nicht immer reichen die standardmäßigen Bildformate aus, um das optimale Design und die beste Performance zu erzielen. Durch das Hinzufügen eigener Bildgrößen können Sie sicherstellen, dass Ihre Bilder immer perfekt in das Layout passen und gleichzeitig die Ladezeiten optimiert werden.

Warum eigene Bildgrößen in WordPress wichtig sind

• Maßgeschneiderte Bildformate für verschiedene Bereiche der Website (z. B. Header, Blogbeiträge, Thumbnails)
• Reduzierung unnötiger Bildgrößen, die Speicherplatz und Ladezeiten beanspruchen
• Einheitliche Darstellung von Bildern für ein professionelles Erscheinungsbild

Vorteile für Performance und Design

• Schnellere Ladezeiten durch optimal zugeschnittene Bilder
• Geringere Serverbelastung und weniger Speicherverbrauch
• Konsistentes Design durch passgenaue Bildformate

Standard-Bildgrößen in WordPress

WordPress generiert automatisch verschiedene Bildgrößen, wenn Sie ein Bild in die Mediathek hochladen. Diese Standardgrößen sind:

• Thumbnail: 150x150 px (quadratisch, zugeschnitten)
• Medium: 300x300 px (proportional skaliert)
• Large: 1024x1024 px (proportional skaliert)
• Full Size: Originalgröße des hochgeladenen Bildes

Wie WordPress Bilder automatisch skaliert

Beim Hochladen eines Bildes generiert WordPress automatisch verschiedene Versionen, basierend auf den Standardgrößen. Diese können unter Einstellungen > Medien angepasst werden. Doch manchmal reicht das nicht aus, und es werden individuelle Bildgrößen benötigt.

Eigene Bildgrößen registrieren

Mit der Funktion add_image_size() können eigene Bildgrößen hinzugefügt werden. Der Code wird in die functions.php des Themes eingefügt:

function custom_image_sizes() {
    add_image_size('custom-small', 400, 300, true); // Zuschneiden auf 400x300 px
    add_image_size('custom-medium', 800, 600, false); // Proportional skalieren
    add_image_size('custom-large', 1200, 800, true); // Zuschneiden auf 1200x800 px
}
add_action('after_setup_theme', 'custom_image_sizes');

Erklärung der Parameter:

• Der erste Wert ist der Name der Bildgröße (z. B. custom-small)
• Der zweite und dritte Wert sind Breite und Höhe in Pixeln
• Der vierte Parameter bestimmt, ob das Bild zugeschnitten (true) oder proportional skaliert (false) wird

Eigene Bildgrößen im Theme nutzen

Verwendung von the_post_thumbnail()

Um eine eigene Bildgröße in einem Theme-Template zu verwenden, kann the_post_thumbnail() genutzt werden:

echo get_the_post_thumbnail($post->ID, 'custom-small');

Falls Sie ein benutzerdefiniertes <img>-Element generieren möchten:

$image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'custom-small');
if ($image) {
    echo '<img src="' . esc_url($image[0]) . '" width="' . esc_attr($image[1]) . '" height="' . esc_attr($image[2]) . '" alt="">';
}

Bildgrößen nachträglich regenerieren

Warum das nötig ist

Wenn Sie neue Bildgrößen hinzufügen, wirken Sie sich nicht auf bereits hochgeladene Bilder aus. Daher müssen bestehende Bilder neu generiert werden.

Plugins wie „Regenerate Thumbnails“ verwenden

Das Plugin Regenerate Thumbnails kann helfen, bestehende Bilder für neue Größen anzupassen:

1. Installieren und aktivieren Sie das Plugin.
2. Gehen Sie zu Werkzeuge > Regenerate Thumbnails.
3. Klicken Sie auf „Regenerate Thumbnails for All Attachments“.

Eigene Bildgrößen in Gutenberg & Medienbibliothek anzeigen

Damit eigene Bildgrößen in der Mediathek und im Gutenberg-Editor auswählbar sind, muss die Funktion image_size_names_choose verwendet werden:

function custom_image_sizes_in_admin($sizes) {
    return array_merge($sizes, array(
        'custom-small' => __('Kleine benutzerdefinierte Größe'),
        'custom-medium' => __('Mittlere benutzerdefinierte Größe'),
        'custom-large' => __('Große benutzerdefinierte Größe'),
    ));
}
add_filter('image_size_names_choose', 'custom_image_sizes_in_admin');

Nach dem Hinzufügen dieses Codes können die neuen Bildgrößen direkt in der Medienauswahl verwendet werden.

Fazit

Wann eigene Bildgrößen sinnvoll sind

• Wenn die Standardgrößen nicht zu Ihrem Design passen
• Um eine bessere Performance durch optimierte Bildgrößen zu erreichen
• Für ein einheitliches Erscheinungsbild in Ihrem Theme

Best Practices für optimale Performance

• Verwenden Sie nur die Bildgrößen, die Sie wirklich benötigen
• Aktivieren Sie die Zuschneide-Funktion (true), um konsistente Formate zu erhalten
• Nutzen Sie Regenerate Thumbnails, wenn Sie bestehende Bilder anpassen möchten

Mit diesen Schritten können Sie in WordPress maßgeschneiderte Bildgrößen hinzufügen und so das Design und die Performance Ihrer Website verbessern.