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

Einleitung #

Bil­der sind ein zen­tra­ler Bestand­teil jeder Word­­Press-Web­­si­te. Doch nicht immer rei­chen die stan­dard­mä­ßi­gen Bild­for­ma­te aus, um das opti­ma­le Design und die bes­te Per­for­mance zu erzie­len. Durch das Hin­zu­fü­gen eige­ner Bild­grö­ßen kön­nen Sie sicher­stel­len, dass Ihre Bil­der immer per­fekt in das Lay­out pas­sen und gleich­zei­tig die Lade­zei­ten opti­miert wer­den.

Warum eigene Bildgrößen in WordPress wichtig sind

• Maß­ge­schnei­der­te Bild­for­ma­te für ver­schie­de­ne Berei­che der Web­site (z. B. Hea­der, Blog­bei­trä­ge, Thumb­nails)
• Redu­zie­rung unnö­ti­ger Bild­grö­ßen, die Spei­cher­platz und Lade­zei­ten bean­spru­chen
• Ein­heit­li­che Dar­stel­lung von Bil­dern für ein pro­fes­sio­nel­les Erschei­nungs­bild

Vorteile für Performance und Design

• Schnel­le­re Lade­zei­ten durch opti­mal zuge­schnit­te­ne Bil­der
• Gerin­ge­re Ser­ver­be­las­tung und weni­ger Spei­cher­ver­brauch
• Kon­sis­ten­tes Design durch pass­ge­naue Bild­for­ma­te

Standard-Bildgrößen in WordPress #

Word­Press gene­riert auto­ma­tisch ver­schie­de­ne Bild­grö­ßen, wenn Sie ein Bild in die Media­thek hoch­la­den. Die­se Stan­dard­grö­ßen sind:

• Thumb­nail: 150x150 px (qua­dra­tisch, zuge­schnit­ten)
• Medi­um: 300x300 px (pro­por­tio­nal ska­liert)
• Lar­ge: 1024x1024 px (pro­por­tio­nal ska­liert)
• Full Size: Ori­gi­nal­grö­ße des hoch­ge­la­de­nen Bil­des

Wie WordPress Bilder automatisch skaliert

Beim Hoch­la­den eines Bil­des gene­riert Word­Press auto­ma­tisch ver­schie­de­ne Ver­sio­nen, basie­rend auf den Stan­dard­grö­ßen. Die­se kön­nen unter Ein­stel­lun­gen > Medi­en ange­passt wer­den. Doch manch­mal reicht das nicht aus, und es wer­den indi­vi­du­el­le Bild­grö­ßen benö­tigt.

Eigene Bildgrößen registrieren #

Mit der Funk­ti­on add_image_size() kön­nen eige­ne Bild­grö­ßen hin­zu­ge­fügt wer­den. Der Code wird in die functions.php des The­mes ein­ge­fü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 ers­te Wert ist der Name der Bild­grö­ße (z. B. cus­­tom-small)
• Der zwei­te und drit­te Wert sind Brei­te und Höhe in Pixeln
• Der vier­te Para­me­ter bestimmt, ob das Bild zuge­schnit­ten (true) oder pro­por­tio­nal ska­liert (false) wird

Eigene Bildgrößen im Theme nutzen #

Verwendung von the_post_thumbnail()

Um eine eige­ne Bild­grö­ße in einem The­­me-Tem­p­la­­te zu ver­wen­den, kann the_post_thumbnail() genutzt wer­den:

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

Falls Sie ein benut­zer­de­fi­nier­tes <img>-Ele­ment gene­rie­ren möch­ten:

$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 Bild­grö­ßen hin­zu­fü­gen, wir­ken Sie sich nicht auf bereits hoch­ge­la­de­ne Bil­der aus. Daher müs­sen bestehen­de Bil­der neu gene­riert wer­den.

Plugins wie „Regenerate Thumbnails“ verwenden

Das Plug­in Rege­ne­ra­te Thumb­nails kann hel­fen, bestehen­de Bil­der für neue Grö­ßen anzu­pas­sen:

1. Instal­lie­ren und akti­vie­ren Sie das Plug­in.
2. Gehen Sie zu Werk­zeu­ge > Rege­ne­ra­te Thumb­nails.
3. Kli­cken Sie auf „Rege­ne­ra­te Thumb­nails for All Attach­ments“.

Eigene Bildgrößen in Gutenberg & Medienbibliothek anzeigen #

Damit eige­ne Bild­grö­ßen in der Media­thek und im Guten­­berg-Edi­­tor aus­wähl­bar sind, muss die Funk­ti­on image_size_names_choose ver­wen­det wer­den:

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 Hin­zu­fü­gen die­ses Codes kön­nen die neu­en Bild­grö­ßen direkt in der Medi­en­aus­wahl ver­wen­det wer­den.

Fazit #

Wann eige­ne Bild­grö­ßen sinn­voll sind

• Wenn die Stan­dard­grö­ßen nicht zu Ihrem Design pas­sen
• Um eine bes­se­re Per­for­mance durch opti­mier­te Bild­grö­ßen zu errei­chen
• Für ein ein­heit­li­ches Erschei­nungs­bild in Ihrem The­me

Best Prac­ti­ces für opti­ma­le Per­for­mance

• Ver­wen­den Sie nur die Bild­grö­ßen, die Sie wirk­lich benö­ti­gen
• Akti­vie­ren Sie die Zuschnei­­de-Fun­k­­ti­on (true), um kon­sis­ten­te For­ma­te zu erhal­ten
• Nut­zen Sie Rege­ne­ra­te Thumb­nails, wenn Sie bestehen­de Bil­der anpas­sen möch­ten

Mit die­sen Schrit­ten kön­nen Sie in Word­Press maß­ge­schnei­der­te Bild­grö­ßen hin­zu­fü­gen und so das Design und die Per­for­mance Ihrer Web­site ver­bes­sern.