WordPress a introduit les images réactives dans la version 4.4, mais il a également introduit un bogue qui fait qu'elles ne se chargent pas correctement sur les sites cryptés en https.

Le bogue charge l'image principale via https, mais toute la partie responsive srcset est chargée en http. Votre navigateur bloque alors le chargement de l'image en raison d'un "contenu mixte", une fonction de sécurité de votre navigateur.

Voici comment le code précédent est rendu dans une page HTTPS (c'est-à-dire l'image brisée) :

Voici comment résoudre ce problème si votre site SSL affiche soudainement des images brisées :

Allez dans Réglages > Général dans l'interface d'administration de WordPress

Modifiez les valeurs de Site Address et WordPress Address pour utiliser https:// au lieu de http://.

Si ces champs sont grisés, vous pouvez modifier votre fichier wp-config.php pour changer les valeurs des constantes WP_SITEURL et WP_HOME afin d'utiliser https://.

Cela ne résoudra peut-être pas le problème de manière universelle - jusqu'à ce que le bogue soit corrigé dans WordPress, vous pouvez utiliser l'une des deux approches suivantes :

1. Installer le plugin SSL Insecure Content Fixer et le configurer en mode simple. Cela devrait convertir tous les URLS de contenu local pour utiliser https://.
2. Insérez le code suivant dans votre fichier functions.php dans le dossier de votre thème, ou dans un plugin personnalisé :

/**
 * Forcer les URLs dans les attributs srcset dans le schéma HTTPS.
 *
 * Ceci est particulièrement utile lorsque vous utilisez un frontend SSL flexible comme Cloudflare.
 *
 * @param array $sources L'ensemble des sources originales.
 * @return array modification de l'ensemble des sources avec https appliqué.
 */
function ssl_srcset( $sources ) {
	foreach ( $sources as &$source ) {
		$source['url'] = set_url_scheme( $source['url'], 'https' ) ;
	}
	return $sources ;
}
add_filter('wp_calculate_image_srcset', 'ssl_srcset' ) ;

Merci à Jeff Chandler de WPTavern pour la correction ci-dessus.