Responsive Images in WordPress mit dem Plugin „RICG Responsive Images“

Responsive Images sind eine tolle Sache – wenn sie denn eingesetzt werden: Es werden verschiedene Bildgrößen bereitgehalten und je nachdem, was für einen Viewport der Nutzer hat, die richtige ausgegeben. Von sich aus bringt WordPress diese Funktion nicht mit, doch das Plugin „RICG Responsive Images“ schafft Abhilfe.

Responsive Images in WordPress leicht gemacht (mit einem kleinen „aber“)

Das Plugin „RICG Responsive Images“ ist im WordPress Plugin Directory zu finden und bietet die einfache Integration von Responsive Images in eure WordPress-Installation. Nach der Installation und Aktivierung des Plugins braucht ihr nichts weiter zu tun, als Bilder in euren Beitrag einzufügen. Seit Version 2.1 werden auch Beitragsbilder als Responsive Images ausgegeben.

Zu dem ganz großen Glück fehlt allerdings das sizes-Attribut. Ohne dieses würde, wenn der Viewport größer ist als eine bestimmte Bildgröße, diese in jedem Fall geladen werden – auch, wenn das Design eigentlich nicht breiter ist und kein Fall wie etwa ein höher auflösendes Display vorliegt, auf dem ein größeres Bild einen visuellen Mehrwert bieten würde. Nachrüsten lässt sich dies relativ einfach (wenn ihr den Code-Schnipsel nutzen wollt, dann müsst ihr natürlich Anpassungen bei dem sizes-Attribut vornehmen, die genau zu dem eingesetzten Theme passen).

<?php
/**
* Plugin Name: Add sizes attribute
* Description: Add sizes attribute to images and post thumbnails
* Version: 1.0
* Author: Florian Brinkmann
* Author URI: https://florianbrinkmann.com/
* License: GNU General Public License v2 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
if ( ! defined( 'ABSPATH' ) )
exit;


//Add sizes attribute to the images which are send to the editor
function add_sizes_attribute( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
	$html = preg_replace( '/(srcset="[^"]*")/', '$1 sizes="(min-width: 800px) 800px"', $html );
	return $html;
}
add_filter( 'image_send_to_editor', 'add_sizes_attribute', 10, 8 );


//Add sizes attribute to the post thumbnails
function add_sizes_attribute_to_post_thumbnail( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
	// if the HTML is empty, short circuit
	if ( '' === $html ) {
		return;
	}
	$html = preg_replace( '/(srcset="[^"]*")/', '$1 sizes="(min-width: 800px) 800px"', $html );
	return $html;
}
add_filter( 'post_thumbnail_html', 'add_sizes_attribute_to_post_thumbnail', 10, 5);
Code-Sprache: HTML, XML (xml)

Beim Einfügen eines Bildes in dem Editor wird nun die Funktion add_sizes_attribute() ausgeführt. Diese fügt nach dem srcset-Attribut das sizes-Attribut ein. Gleiches passiert mit dem HTML-Code des Post Thumbnails. Da hier auf dem Blog die Bilder eigentlich immer über die gesamte Breite eingefügt werden, kann es bei dieser einfachen Regel bleiben.

Wenn aber beispielsweise auch andere Bildgrößen genutzt werden, dann könntet ihr hier mit einer if-Bedingung prüfen, welchen Wert der Parameter $size hat, und dementsprechend dann andere Angaben in das sizes-Attribut einfügen, beispielsweise so:

	if( $size == 'medium'){
		$html = preg_replace( '/(srcset="[^"]*")/', '$1 sizes="(min-width: 400px) 400px"', $html );
	}else{
		$html = preg_replace( '/(srcset="[^"]*")/', '$1 sizes="(min-width: 800px) 800px"', $html );
	}
	return $html;
Code-Sprache: PHP (php)

Wenn ihr Verbesserungsvorschläge zu meiner Lösung habt, schreibt einfach einen Kommentar (natürlich gerne auch, wenn ihr etwas anderes sagen wollt)!