WordPress 4.4: Reihenfolge der Bilder im srcset-Attibut umdrehen

Mit WordPress 4.4 wurden das srcset-Attribut und das size-Attribut in den img-Tag integriert. Beide Attribute sind dafür da, dem Broswer bei vorgegebenen Fenstergrößen oder Auflösungen angepaßte Bilder auszuliefern: Also z.B. bei einer Bilderschirmbreite von 600px die von WordPress generierten 600px großen Bilder und nicht das Bild in voller Größe.

» make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

Gerade für die Anwendung auf mobilen Geräten lassen sich so die Ladezeiten von Bilder reduzieren.

Letzte Woche bin ich allerdings beim Betrachten einer WordPress 4.4-Installation auf dem Tablet über ein merkwürdiges Verhalten gestolpert.

Beim Überprüfen einer Webseite auf einem iPad 2 ist mir aufgefallen, dass der Safari-Browser dort immer nur das erste Bild aus dem srcset-Attribut darstellt. Das ist deshalb so auffällig, weil in WordPress zuerst das kleinste Bild in das Attribut gesetzt wird und zuletzt das größte Bild.

Beispiel:

Auf dem besagten iPad erschien also immer das Bild für 300px Bildschirmbreite.

Nach einiger Recherche bin ich darauf gestoßen, dass der „Mobile Safari“ zwar das srcset-Attribut seit iOS8 versteht, aber leider nicht die Angaben bezüglich der Browserfensterbreite (den sogenannten w-descriptor). „Mobile Safari“ kann lediglich mit dem x-descriptor für die Auflösung des Bildschirms etwas anfangen. Daher wird dann immer nur die erste Bildangabe im Attribut berücksichtigt.

Um diesen Fehler zu umgehen, habe ich dieses kleine Script geschrieben, das einfach die Reihenfolge im srcset-Attribut umdreht (von groß zu klein).

Das vorherige Beispiel würde dann also wie folgt aussehen:

Das Script könnt Ihr einfach in die functions.php im Theme-Ordner kopieren.