L'image en vedette dans 4.4 devrait être plus grande sur un appareil mobile
Je travaille sur un thème qui affiche 3 colonnes avec des images. La taille des vignettes sur les grands écrans sera donc de 360x240px.
Lorsque redimensionné, sur certains appareils mobiles , tels que l'iPhone, il y aura juste 1 colonne avec des images, ce qui peut entraîner le L’image sélectionnée sera plus grande que 360px en largeur.
Maintenant, afin de conserver un bon score PageSpeed, je ne souhaite pas charger une taille d'image plus grande sur des ordinateurs de bureau et la redimensionner via CSS, mais sur des appareils mobiles, j'ai besoin que l'image sélectionnée soit plus grande, comme 640x426px.
Le problème lié à l’utilisation de la même taille d’image sur les appareils mobiles est qu’elle peut ne pas être assez grande pour remplir une colonne et laisser un espace vide à côté.
J'ai enregistré 2 nouvelles tailles d'image, mais il semble que la fonction the_post_thumbnail() choisisse toujours la mauvaise.
add_image_size( 'loop', 360, 240, true );
add_image_size( 'loop-mobile', 640, 426, true );
J'ai essayé différentes méthodes et aucune d'entre elles n'est proche de ce dont j'ai besoin:
the_post_thumbnail();Dans ce cas, l'image est trop petite sur les appareils mobiles
the_post_thumbnail('loop-mobile');Dans ce cas, la version la plus grande 640x426px sera toujours chargée, ce qui affectera le score PageSpeed.
the_post_thumbnail(array(640,426));Même problème avec le score PageSpeed.
Merci pour l'aide!
La solution consiste à utiliser les images réactives de WP, en personnalisant l'attribut tailles en fonction de votre cas d'utilisation.
En lisant entre les lignes, je suppose ici que vous utilisez une approche de conception réactive pour montrer les différentes dispositions de différentes largeurs.
Le plus simple est de commencer par créer une fonction de balise de modèle de remplacement pour the_post_thumbnail:
function wpse_221989_the_post_thumbnail( $size, $attr ) {
the_post_thumbnail( $size, $attr );
}
Si vous appelez the_post_thumbnail dans vos modèles, appelez plutôt wpse_221989_the_post_thumbnail. Pourquoi faisons-nous comme ça? WP ne vous donne aucun contexte sur les crochets de filtre pour modifier les attributs srcset et sizes des images réactives. Nous créons donc notre propre contexte avec la fonction d'encapsulage wpse_221989_the_post_thumbnail.
Jusqu'à présent, rien d'intelligent, mais nous pouvons maintenant utiliser cette fonction pour:
1 - dessiner sur un ensemble de tailles d'image
2 - demandez au navigateur de choisir une image appropriée en fonction de votre point d'arrêt réactif pour ce cas d'utilisation particulier
1 - Dans votre exemple, où les versions de vos images ont toutes le même rapport d'aspect, WP gère les choses pour nous. L'utilisation d'un appel d'image intégré tel que the_post_thumbnail permet de créer un attribut srcset à partir de chaque taille d'image que vous avez avec le même rapport de format que l'image spécifiée dans le paramètre $size. Vous pouvez utiliser add_image_size pour créer des versions supplémentaires suffisamment grandes pour les écrans haute densité. La correspondance du rapport d'aspect de WP autorise de petites erreurs d'arrondi. Par conséquent, les deux tailles de votre question doivent correspondre.
2 - Pour que le navigateur choisisse la bonne taille d'image pour l'espace, vous aurez besoin d'un attribut sizes personnalisé. L'attribut sizes par défaut de WP suppose que vous voulez qu'une image ait la largeur totale du navigateur, mais pas plus large que la largeur naturelle de l'image. Dans votre conception, les écrans plus étroits ont besoin d'une image plus grande, puis au-dessus d'un certain point d'arrêt, vous souhaitez choisir la largeur d'image la plus petite.
Donc, en supposant que, d'après la taille de votre image, votre point d'arrêt soit à 640px, nous voudrions un attribut sizes un peu comme ceci: (min-width: 640px) 33.333vw, 100vw
Ce que cela dit au navigateur, c'est pour les fenêtres de 640px largeur et plus, choisissez l'image dans la liste srcset qui correspond le mieux à un tiers de la largeur de la fenêtre. Pour les autres largeurs de fenêtre (<640px), choisissez une image dans la liste qui correspond le mieux à la largeur de la fenêtre.
Pour mettre cela dans le code, nous créons une nouvelle fonction pour renvoyer l'attribut et l'intégrons dans notre fonction wrapper:
function wpse_221989_sizes() {
return "(min-width: 640px) 33.333vw, 100vw";
}
function wpse_221989_the_post_thumbnail( $size, $attr ) {
add_filter( 'wp_calculate_image_sizes', 'wpse_221989_sizes', 10 , 2 );
the_post_thumbnail( $size, $attr );
remove_filter( 'wp_calculate_image_sizes', 'wpse_221989_sizes', 10 );
}
Désormais, lorsque votre modèle de thème appelle wpse_221989_the_post_thumbnail, notre attribut personnalisé sizes sera remplacé par défaut. En vous connectant au filtre avant d'appeler the_post_thumbnail et en décrochant immédiatement après, nous rendons notre fonction de balise de modèle personnalisée sensible au contexte de votre question sans perturber les attributs de taille générés sur les images d'autres parties de votre thème.
Vous pouvez vous en servir en mettant en place des vérifications conditionnelles sur $size pour choisir différentes règles pour les différentes versions d'image que vous avez créées pour votre thème.
Si Google Pagespeed est important pour vous, effectuez un test pour vérifier qu'il obéit à vos attributs srcset et sizes. Si ce n'est pas le cas, utilisez add_image_size pour créer une taille qui s'adapte à la fenêtre Pagespeed et utilisez cette taille dans vos appels à wpse_221989_the_post_thumbnail afin qu'elle soit placée dans l'attribut src. Sur mes sites, j’utilise par défaut une image de 1024 pixels, ce qui semble garder l’analyse des pagespeed sur les ordinateurs de bureau et sur mobile.
Votre problème vient de ne pas faire de design réactif. La conception réactive devrait laisser le soin de décider du côté client. Si vous tentez de servir quelque chose correspondant à toutes les tailles d'écran du code serveur, vous échouerez ou vous empêcherez d'utiliser la mise en cache.
La solution idéale est l'attribut srcset W3C HTML 5+ docs, malheureusement, son implémentation par défaut dans wordpress est nul et vous devrez utiliser une API appropriée pour que celle-ci corresponde aux images que vous souhaitez, où vous le souhaitez. qu'ils soient.
Remarque: srcset n'est qu'une recommandation à l'intention du navigateur, il ne doit pas nécessairement suivre. Si vous ne voulez pas le laisser à la merci des navigateurs, vous devrez trouver une bibliothèque JS qui fait des choses similaires.