WordPress liefert automatisch passende Bilder

WordPress 4.4 liefert je nach Größe des Browserfensters automatisch passende Bilder aus. Redakteure und Besucher merken davon nichts. Am Beispiel des neuen Standardthemes Twenty Sixteen möchte ich Ihnen zeigen, wie das in der Praxis aussieht.

Große Bilder für breite Browserfenster

Wenn eine Grafikdatei in die Mediathek hochgeladen wird, erzeugt WordPress automatisch verschiedene Versionen der Datei. In einem breiten Browserfenster (auch Viewport genannt), liefert WordPress eine passende große Datei aus:

Screenshot - breites Browserfenster mit großer Grafikdatei
Die Grafikdatei ist 1024px breit und wiegt 146Kb.

Kleine Bilder für schmale Browserfenster

Wenn der Besucher mit einem kleineren Browserfenster daher kommt, wie z. B. auf einem Smartphone, dann liefert WordPress automatisch eine passende kleinere Datei aus. 

Screenshot - schmales Browserfenster mit kleiner Grafikdatei
Die Grafikdatei ist 300px breit und wiegt ca. 13,49 Kb.

Und das Beste: Der Redakteur muss dafür wirklich gar nichts tun. Er lädt wie gewohnt eine Grafikdatei in die Mediathek. WordPress kümmert sich darum und berücksichtigt dabei sogar die Pixeldichte des Bildschirms.

Fazit: Jeder bekommt die Grafik, die für ihn am besten ist.

Know-how: Responsive Bilder im HTML

Falls es Sie genauer interessiert und HTML für Sie kein Fremdwort ist: Die Technik im Hintergrund nennt sich »responsive Bilder« und drüben auf pmueller.de habe ich sie in einem Blogbeitrag »Responsive Bilder – ein Überblick« ausführlich erläutert:

  • WordPress implementiert die Anwendungsfälle »Unterschiedliche Pixeldichte« und»Unterschiedliche Viewportbreite«.
  • Das von WordPress erzeugte HTML wird im Beitrag in Abschnitt »2. Grafiken nach Viewport: img und srcset w« beschrieben.

Aber das ist wie gesagt optional. Es funktioniert auch, wenn Sie das nicht wissen.

Schreibe einen Kommentar