Images réactives Wordpress - Sélection de l'image incorrecte sur les écrans retina

Question

J'ai travaillé dur pour essayer de faire fonctionner les images responsives sur ce site que je suis en train de construire et juste quand je pensais que tout allait bien, je regarde cela sur l'iPad retina et il sélectionne la mauvaise image. Non seulement c'est la mauvaise taille mais c'est aussi affiché en paysage, pas en portrait. Je n'ai aucune idée pourquoi cela se passe ainsi car j'ai créé des tailles d'images personnalisées pour toutes les différentes tailles d'écran et j'ai également créé la version XL à utiliser sur les écrans retina.

Voici le code HTML de l'image avec le srcset et les tailles.

Comme les écrans retina ont double pixels, j'ai d'abord essayé d'ajouter ceci aux tailles pour cibler les iPads mais rien ne s'est produit :

(min-width: 2048px) 1010px 

Le drôle de chose est que j'ai une image avec les dimensions de 1010px et j'ai spécifié dans les tailles que quand c'est le double des pixels il faut utiliser cette image. Au lieu de cela, il utilise cette taille : 940x627.jpg

Est-ce que quelqu'un peut expliquer pourquoi cela se produit, s'il vous plaît ?

Answer 1

Bonnes personnes, j'ai réussi à comprendre pourquoi la page ne chargeait pas les bonnes images. Comme je l'ai mentionné dans ma question, par défaut Wordpress ne chargera que les images du srcset avec le même rapport d'aspect. Si vous souhaitez inclure des tailles d'images personnalisées avec un ratio différent, vous devez les ajouter via la fonction wp_calculate_image_srcset.

Le problème avec cela, c'est que toutes les tailles personnalisées seront chargées dans le srcset de chaque image et le navigateur sélectionnera l'image en fonction de la largeur et du ratio les plus proches.

Deuxièmement, j'ai réalisé que l'image sur laquelle Wordpress se base pour le rapport d'aspect est la taille d'image originale plutôt que la taille personnalisée que vous chargez dans la page. Donc là où j'avais l'image en portrait avec la taille personnalisée de add_image_size('portrait-case-study-lg', 505, 757, true);, Wordpress obtenait en réalité le ratio d'aspect du fichier original qui était de 2000px x 1500px. Comme celui-ci avait un ratio différent, les tailles d'images que j'avais créées pour les tailles en portrait étaient ignorées et c'est plutôt l'image avec le ratio d'aspect le plus proche qui était choisie.

La façon dont j'ai réglé cela a été de supprimer la fonction wp_calculate_image_srcset qui ajoutait les tailles dans le srcset et plutôt de redimensionner les images originales dans Photoshop pour avoir le même ratio d'aspect que les images plus petites.

Par exemple, au lieu d'avoir la taille d'image personnalisée de portrait-case-study-xl qui était utilisée pour recadrer le fichier image original, j'ai supprimé cela et au lieu de cela ai téléchargé l'image originale à cette taille.

add_image_size('portrait-case-study-xl', 1010, 1514, true);
add_image_size('portrait-case-study-lg', 505, 757, true);

Cela signifie que Wordpress sélectionne maintenant le 'portrait-case-study-lg' sur différentes tailles d'écran car le rapport d'aspect est le même que l'original.

Il serait bon si Wordpress pouvait vous permettre de supprimer l'image originale du srcset car cela signifie maintenant que je ne peux pas automatiquement créer la bonne taille lorsque le client télécharge une image sur une page.