WordPress 4.4 führt Responsive Images ein.

Responsive Images zur Suchmaschinenoptimierung?

Oft wird ja die Frage gestellt, ob ein regelmäßiges Update von WordPress und Plugins

<img class="alignnone wp-image-1910 size-large" src="http://domain.com/wp-content/uploads/2016/05/Bild-650x397.jpg" alt="Responsive Images im Responsive-Web-Design" width="650" height="397" srcset="http://domain.com/wp-content/uploads/2016/05/Bild-650x397.jpg 650w, http://domain.com/wp-content/uploads/2016/05/Bild-300x183.jpg 300w, http://domain.com/wp-content/uploads/2016/05/Bild.jpg 900w" sizes="(max-width: 650px) 100vw, 650px">

wirklich notwendig sei. Einerseits heißt es "Never change a running system" und andererseits bringen neue Versionen so feine Dinge wie Responsive Images.

Was ist der Unterschied von Responsive Images zu Responsive Design? Während Responsive Design die Anordnung von (block level) Elementen auf dem entsprechenden Gerät regelt, weisen responsive Bilder den Browser an, die jeweils passendste Größe eines Bildes zu laden.

Der Vorteil liegt auf der Hand - kleinere Bilder werden schneller geladen was die Suchmaschinen freut und somit der Suchmaschinenoptimierung (SEO) dient.

Zuvor wurde ein Bild, das in der Desktopversion z. B. über die ganze Seite ging, auf einem Smartphone lediglich mithilfe des responsive Designs verkleinert (zuvor aber in der vollen Größe). Da aber WordPress in der Regel Bilder in den Größen Vorschaubild, Mittel, Groß und vollständige Größe anlegt (manche Themes und Plugins auch noch weitere Größen), können auf den kleinen Handybildschirmen die kleineren Formate der Bilder geladen werden.

Wie macht WordPress das?

Gottseidank automatisch mit den HTML Attributen srcset und sizes des <IMG>-Tags.

In srcset sind drei Bilder mit den Größen (eigentlich Breiten = width) 650w, 300w und 900w hinterlegt.

In sizes= wird angegeben, dass bis zu einer maximalen Breite des Browserfensters von 650 Pixel (max-width: 650px) das Bild in 100% Breite angezeigt wird (100vw = 100% der Viewport Width = Breite des Browserfensters). In allen anderen Fällen wird eine Breite von 650 Pixel verwendet.

Responsive Bilder in eigenen Plugins

Die Automatik von WordPress, die Bilder responsive macht greift allerdings nicht, wenn eigene Plugins den Content mit get_the_content() aus der Datenbank abfragen.

Hie muss zusätzlich die Funktion wp_make_content_images_responsive() auf den Content angewendet werden.

$content=get_the_content(); 
$content=wp_make_content_images_responsive(do_shortcode($content));