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.
Update vom 17. Janur 2017: Seit WordPress 4.4 wurden Responsive Images in den Core integriert. Die in diesem Beitrag beschriebene Lösung ist also nicht mehr notwendig.
Update vom 24. März 2015: Mit der heute morgen erschienenen Version 2.2.0 fügt das Plugin auch das sizes-Attribut ein. Es kann also jetzt einfach aktiviert und genutzt werden. Nähere Informationen zu Anpassungs-Möglichkeiten gibt es auf der GitHub-Site des Projekts.
Update vom 08. Februar 2015:
Wie Alexander in seinem Kommentar richtig bemerkt, wäre das Nachrüsten des sizes
-Attributes im Gegensatz zu der Entfernung von Werten aus dem srcset
-Attribut besser geeignet, das Problem mit zu größen Bildgrößen in den Griff zu bekommen. Der Browser kann so entscheiden, ob er nicht doch ein größeres Bild für die bessere Darstellung benötigt, beispielsweise bei den Retina-Displays von Apple (vielen Dank noch mal für den Hinweis). Ich habe den Abschnitt nach dem folgenden Absatz komplett überarbeitet.
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)!
Das ganze funktioniert setzt leider voraus, dass es keinen Unterschied zwischen device pixel und layout pixel gibt. Den gibt es aber! Zwar möchte ich auf meinem Retina Display nicht immer die volle Pixeldichte haben (1600), aber die bessere Qualität von 1200 gegenüber 800 nehme ich dann doch gerne.
Aber wesentlich ist, dass es für deinen Workaround bereits einen standardisierten Workaround, nämlich das sizes Attribut gibt. Aus meiner Sicht wäre es wünschenswert, wenn das CMS gerade bei der Verwaltung unterschiedlicher sizes Attribute für die unterschiedlichen Bild-Format und Bild-Platz - Kombinationen weiterhelfen würde. So wie es aussieht, wird dies jedoch bei dem wordpress plugin nicht gemacht (eventuell wird es Heuristiken geben, welche zu große "Fehler" verhindern sollen.)
Sofern du das ganze für dich verbessern möchtest, solltest du mit deinem Plugin statt der srcset Begrenzung einfach das sizes Attribut einfügen, was in deinem Fall sizes="(min-width: 800px) 800px" wäre. Bei komplexeren Designs mit Breakpoints sowie min-width/max-width kann es dann schon mal etwas komplexer werden und muss entweder manuell pflegbar sein oder kann über lazySizes (data-sizes="auto") ausgerechnet werden.
Ein beta-wordpress-plugin dafür findest du hier: https://github.com/aFarkas/wp-lazysizes
Hi Alexander,
vielen Dank für deinen ausführlichen Kommentar! Stimmt, an die höheren Pixeldichten hatte ich gar nicht gedacht ...
Ich werde mir deine Anregungen mal genauer anschauen und ein Update des Artikels einplanen!
Moin,
legt das Plugin auch gleich die passenden Größen an oder muss man diese eigenständig generieren (und das Plugin wählt einfach aus, was gerade da ist?)
Hi!
Das RICG-Plugin wählt die Größen, die in der WordPress-Installation eingestellt sind, nutzt also die Standard-Bildgrößen.
Bei meiner kleinen Lösung muss leider manuell eingestellt werden, was in das sizes-Attribut kommt, da das ja von Theme zu Theme stark unterschiedlich ist (das war wohl auch der Grund, warum die Macher des RICG-Plugins das nicht integriert haben).
Hi,
danke für den Artikel. Bei mir funktioniert das Ganze leider nicht. Ich habe das Plugins installiert und ein Foto in eine Seite eingebunden. Im Quellcode sind nun das sizes-Attribut sowie das srcset-Attribut mit den verschiedenen Bildquellen/größe hinterlegt, ausgeliefert werden diese aber augenscheinlich nicht. Verkleinere ich das Browserfenster auf ein Mobilformat und speichere das eingebundene Foto zu Testzwecken herunter, so handelt es sich dabei um das Originalfoto. "Gescratched" wird das Foto ebenfalls nicht. Was mache ich falsch?
Viele Grüße
Hi Dirk,
das kann ich so nicht sagen. Du nutzt nur das Plugin aus dem WordPress-Directory, korrekt? Also nicht meine Anpassung noch zusätzlich?
Kannst du einen Link zu deiner Seite posten? Dann kann ich da gerne mal drauf schauen.
Viele Grüße,
Flo