Depuis quelques jours, WordPress est passé en version 4.4. Cette version apporte notamment une modification importante pour le confort des utilisateurs : l’utilisation de l’attribut srcset des balises HTML <IMG> pour fournir au navigateur les URL des images dans différentes tailles.

L’intérêt est énorme, en particulier sur les mobiles, puisque le navigateur peut ainsi choisir l’image la mieux adaptée à la taille et à la définition de l’écran, et ainsi éviter par exemple de charger une énorme image en 2560×1440 pour l’afficher sur un écran de smartphone en 540×960…

Hélas, il y a un soucis dans l’implémentation de cet attribut dans le nouveau WordPress 4.4 : même si la page est visitée en HTTPS, les adresses des images dans l’attribut srcset restent en HTTP. Un point que les navigateurs n’aiment pas particulièrement, et qui a le plus souvent pour conséquence de ne pas afficher ces images tant que l’utilisateur n’a pas explicitement accepté l’intégration d’élément « non sécurisés » dans une page sécurisée.

Si vous rencontrez vous aussi ce problème sur votre site, voilà une solution simple pour y remédier. Elle reprend le principe que j’avais déjà mis en place en mai dernier pour adapter le protocole des images au protocole de la page.

Au lieu de modifier uniquement le protocole de l’URL associée avec un attribut src ou href, il faut adapter le code pour gérer aussi l’attribut srcset, qui a une particularité : il référence plusieurs URL à la fois. Le plus simple pour cela est de passer par une fonction de callback pour le remplacement, la fonction prenant en paramètre la valeur complète de l’attribut, pour y transformer toutes les URL trouvées.  Une fois traduit en PHP, ça donne quelque chose comme ça :

Notez que cette solution n’est valable que si vos pages sont accessibles via un seul nom de domaine, ce qui est de toute façon largement recommandé. Si votre site est par exemple accessible via www.votredomaine.tld et votredomaine.tld, je vous recommande de mettre en place une redirection.