Responsive Images im WordPress Blog

Webseiten, die nicht für Smartphones optimiert sind, werden von Google im Suchergebnis auf die hinteren Plätze verbannt. Spätestens seit diesem „Mobilegeddon“ ist Responsive Design kein „nice to have“ mehr. Es ist Pflichtprogramm. Aber wie steht es um die Bilder im responsiven Blog?

Beim Aufbau des GPS Radler Blogs habe ich mich intensiv mit Responsive Images und Retina-Bildern beschäftigt. Profitiere von diesen Erfahrungen und optimiere deinen Blog mit flexiblen Bildern.

Ohne viel Theorie möchte ich meinen Weg zu Responsive–Bildern vorstellen. Quasi als eine Art Best-Practice aus der Praxis.

Kleine Bilder für kleine Bildschirme

Wenn sich dank Responsive Webdesign schon das Layout deines Blogs der Breite des Browsers anpasst, warum sollten das nicht auch die Bilder machen?

Dank dem flexiblen Einbau von Grafiken per CSS-Code scheint doch alles gut zu funktionieren. Bilder passen sich dynamisch an die Größe des Bildschirms an.

Ja, ABER! Das ganze passiert nur im Browser. Wird das Bild nur per CSS auf die Browser-Breite reduziert, verringert sich nicht die Dateigröße. Auf niedrigauflösenden Geräten werden trotzdem die hochauflösenden Grafiken geladen.

GRAFIK CSS-skalieren

Die Bildgröße (in Pixel und in kB) bleibt gleich. Zudem benötigt dieses „runterskalieren“ Rechenpower. Beides ist nicht gerade förderlich für schnelle Lade- und Anzeigezeiten.

Im Beispiel oben ist das angezeigte Bild 72,7 kB groß. Könnte man das genau passende Bild (478 x 284 Pixel) verwenden, wäre es nur 47,1 kB groß. Eine Einsparung von über 35%. Das spart Datenvolumen und so auch Zeit, bis die Webseite angezeigt werden kann. Gerade bei den teilweise doch recht „dünnen Mobilfunkleitungen“ ist das nützlich.

Um in Zukunft Probleme mit zu großen Bilddateien zu lösen, hat sich die Responsive Images Community Group (RICG) als ein Zusammenschluss engagierter Entwickler gegründet. Nach mehreren Jahren teils hitziger Diskussionen ist neben dem neuen HTML-Element mit dem Namen <picture> eine Erweiterung vom img-Element herausgekommen. Das img-Element wird um die neuen Attribute srcset und sizes ergänzt. In der Praxis sollte dem Konstrukt aus srcset und sizes der Vorzug gegeben werden.

Die RICG-Spezifikationen erweitern das <img>-Element um die Attribute scrset und sizes. Im Prinzip schaut der HTML-Quelltext dann so aus:

<img src=" " srcset=" " sizes=" " alt=" ">

src (Source) definiert wie gehabt die Bildquelle. Das ganze dient auch als Fallback-Lösung für alte Browser.

srcset (Source Set) definiert einen Satz von Bilddateien, getrennt durch ein Komma.

Hinter jeder Datei kann ein x- oder w-Wert dem Browser zusätzliche Informationen übermitteln. Mit dem w-Wert hinter dem Dateinamen gibt der Programmierer dem Browser die tatsächliche Breite der Grafikdatei in Pixel mit.

Der Wert sizes dient als Information, um die geeignete Grafik für die Größe des Browserfensters zu bestimmen.

Das soll es auch schon mit der Theorie gewesen sein. Los geht’s mit der Praxis.

Wahl des WordPress Plugins

Die Suche im WordPress.org Verzeichnis hat einige Treffer ausgespuckt. Einer der ersten stammt direkt vom Erfinder der responsiven Bilder.

RICG Responsive Images Plugin

Nach der Installation sind keine Einstellungen nötig – oder besser gesagt: möglich. Erste Tests brachten allerdings Ernüchterung. Das Plugin bezieht die Bildgröße immer auf die gesamte Breite des Bildschirms. Egal, welche Breite das Design vorgibt. Für eine Bildschirmbreite von beispielsweise 1024 Pixel steht dieser Wert auch im sizes-Attribut. Im zweispaltigen Design ist aber nur Platz für ein 630 Pixel breites Bild. Das hat zur Folge, dass ein viel zu großes Bild geladen wird.

Leider ist das Plugin so gut wie nicht an die Gegebenheiten des eigenen Blog anzupassen. Außer für einspaltige Designs kann ich RICG nicht empfehlen.

Responsify WP

Den nächsten Versuch starte ich mit dem Responsify WP (RWP) Plugin, ein noch recht junges Plugin von einem engagierten Entwickler aus Schweden. Die Beschreibung und die Dokumentation auf GitHub sind jedenfalls vielversprechend.

Der Eindruck hat sich bei Tests gefestigt, womit die Entscheidung gefallen war: Responsive Images für den GPS Radler Blog werde ich mit dem Plugin RWP umsetzten.

In 4 Schritten zu Responsive Images

• Größe und Layout der Bilder festlegen

Dabei geht es um Designfragen. Welche Bildformate soll es geben? Wie groß sollen die Bilder im Blog erscheinen? Wie ist die Ausrichtung im beziehungsweise am Text?

• Theme-Layout und Bildgrößen analysieren, um die Breakpoints mit den unterschiedlichen Bildgrößen zu ermitteln.

Bei welcher Bildschirmbreite springt das Theme-Layout um? Wie groß sollen oder können die Bilder zwischen diesen Breakpoints sein?

• Neue Bildgrößen in WordPress anlegen, entweder per functions.php oder mit dem Plugin „Simple Image Sizes“.

Es können zwar die Standard-WordPress Bildgrößen (Mittelgroß und Groß) verwendet werden. Besser ist es aber, eigene Formate anzulegen.

• Responsify WP einstellen

Im Backend von WordPress sind unter Einstellungen → RWP Settings außer den auszuschließenden Bildgrößen keine Anpassungen nötig. Die Standardwerte passen.

Die Hauptarbeit liegt beim sogenannten Filtern. Schließlich müssen die Media-Queries der einzelnen Bildgrößen dem Plugin bekannt gemacht werden. Für jedes unter Punkt 1 festgelegte Bildformat gibt es unterschiedliche Breakpoints.

Wie unterscheidet man am einfachsten die verschiedenen Bildformate? Im GPS Radler Blog bietet sich das WordPress-Bildformat an. Als Unterscheidung dient dabei der CSS Klassenname. Denn WordPress fügt automatisch den Namen der verwendeten Bildgröße als CSS-Klasse dem Bild hinzu.

Die Zuordnung Bildformat → sizes Attribut erfolgt über einen Filter in der functions.php.

Hierzu ein Beispiel:

<?php
 function edit_attributes( $attributes ) {
    if ( is_integer( strpos( $attributes['class'], 'size-medium') ) ) {
        $attributes['sizes'] = '
(max-width: 500px) 350px,
(max-width: 1018px) 630px,
750px';
    }
    return $attributes;
 }
 add_filter( 'rwp_edit_attributes', 'edit_attributes' );
 ?>

Grafiken mit der Bildgröße „Mittel“ werden bis zu einer Bildschirmbreite von 500 Pixeln in der 350 Pixel Version angezeigt. Bei einer größeren Bildschirmbreite erscheinen sie in der 630 Pixel Version und bei einem Viewpoint von über 1018 Pixeln in der größten Version mit 750 Pixeln.

Sobald diese Anpassungen erledigt sind, liefert dein Server einen WordPress Blog mit flexiblen Bildern aus.

Wie geht es weiter?

Wer sich tiefer mit der Materie Responsive Images beschäftigen möchte und dazu noch etwas über Retina-Bilder erfahren will, dem sei das eBook „Responsive Images für WordPress“ empfohlen. Darin gibt es mehr Hintergrundinformationen, auch zu Bildern für Retina Displays. In einer Schritt-für-Schritt Anleitung wird gezeigt, wie ein Blog mit flexiblen Bildern anreichert wird.