WordPress: Responsive Bilder bei eigenen Bildgrößen

WordPress rechnet alle Bilder nach dem Hochladen runter und speichert diese in kleineren Auflösungen ab. Die Bilder in den unterschiedlichen Größen bieten die Basis für responsive Bilder, die vor ein paar Versionen in WordPress eingeführt wurden. Mit einem responsiven Bild bietet man dem Browser mehrere Bilder in unterschiedlichen Größen an. Der Browser lädt nur das Bild, das er wirklich braucht. Auf mobilen Geräten muss dann nicht mehr das große Bild geladen werden, das nur am Desktop benötigt wird.

Wenn man nur mit den Standardgrößen von WordPress arbeitet, muss man sich um nichts weiter kümmern. Oft werden weitere Bildgrößen benötigt, die sich in WordPress in der functions.php hinzufügen lassen. Sieht klassisch wie folgt aus.

add_image_size('post-thumbnail', 1024, 500, true);

Mit dieser Zeile wird von dem Bild, das hochgeladen wird, eine Version mit der Kantenlänge 1024x500px erstellt und zugeschnitten. Bindet man diese Größe in WordPress ein und schaut in den Quelltext, wird von WordPress kein entsprechender Code für das responsive Bild generiert. Das liegt daran, dass weitere Bilder in dem gleichen Seitenverhältnis fehlen.

add_image_size('post-thumbnail', 1024, 500, true);
add_image_size('post-thumbnail-medium', 768, 375, true);
add_image_size('post-thumbnail-small', 300, 146, true);

Nach dem Hinzufügen von weiteren Versionen für das Bild mit den etwas anderen Seitenverhältnis, stehen WordPress weitere Bilder für das responsive Bild zur Verfügung und generiert auch den entsprechenden Code.