web-dev-qa-db-fra.com

WP 4.4. responsive charge l'image normale après le chargement de l'image responsive

J'ai les 2 nouvelles tailles ajoutées que je teste:

// testing
add_image_size('new-small', 500, false);
add_image_size('medium-large', 768, false); // just added today for devices support

image sortie html:

<img class="alignnone size-full wp-image-24" src="http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image.jpg" alt="test-image" width="932" height="524" srcset="http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image-500x281.jpg 500w, http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image-768x432.jpg 768w, http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image.jpg 932w" sizes="(max-width: 932px) 100vw, 932px">

Je regarde l'onglet réseau en chrome, et lorsque je recharge le navigateur à 500x900 (largeur hauteur), il charge d'abord la bonne image, puis charge immédiatement l'image naturelle après:  enter image description here 

Quelqu'un a-t-il rencontré cela ou sait-il comment le réparer?

functionsimagesadd-image-sizeresponsive
4
RMH

Il s’agit plus d’une question générale sur le srcset et le navigateur, pas d’une question spécifique à WordPress.

Cependant, en général, vous ne pouvez pas prédire ce que les navigateurs vont faire avec les informations srcset. Pour votre exemple spécifique, il semble que vous n'ayez pas effacé le cache complètement entre vos rechargements. Notez la réponse 304 indiquant que l'image de votre navigateur est déjà mise en cache (304 correspond à la réponse Non modifié).

Dans une telle situation, il est parfaitement raisonnable qu'un navigateur utilise simplement la plus grande image qu'il possède déjà dans le cache. Vous avez déjà la version de qualité supérieure, autant l'utiliser. Utiliser une image de qualité inférieure ici ne vous fera pas économiser de la bande passante réseau, ce qui est l’essentiel de l’intérêt de srcset pour commencer. L'algorithme de Chrome n'est pas simplement "utiliser la taille de l'image qui convient".

Donc, pour vraiment tester, vous devez vider le cache et recharger. À chaque fois.

Quelques informations de base sur la manière dont différents navigateurs utilisent srcset: https://stackoverflow.com/questions/28683635/is-there-something-wrong-with-my-srcset-definition-or-is-current-browser-suppor

Edit: Comme Mark Kaplun l’a souligné dans les commentaires, il est tout à fait possible pour un navigateur de choisir une image plus grande en fonction de la vitesse de connexion. Par exemple, Chrome choisira toujours la plus grande image s'il sait que l'image se trouve sur le système de fichiers local (comme si vous visualisiez un fichier .html local). Il peut également connaître "localhost" et choisir la grande image à ce moment-là également. Vous ne forcez pas le problème, vous ne pouvez pas regarder derrière le rideau. Pas vraiment. Le but de srcset est de fournir aux navigateurs les informations nécessaires pour leur permettre de choisir l’image. Ce n'est pas à vous de pouvoir décider pour eux quelle image est utilisée dans quelles circonstances.

6
Otto