Pourquoi Wordpress sert-il la version 1024 pixels de mon image et non l'original sur un écran 1920x1080?
J'ai téléchargé une image de 2100 pixels de large dans un message et inséré cette image dans le corps du message. Je construis un thème personnalisé basé sur Wordpress 'Twenty Sixteen.
Le HTML a l'air OK:
<img class="alignnone wp-image-2669 size-full"
src="http://.../wp-content/uploads/2017/07/GrillSommer1.jpg"
alt="" width="2100" height="904" />
dans le frontal, Wordpress fait ce que je suppose est sa magie "responsive image" (je ne pense pas avoir ajouté de plug-ins qui le ferait :)
<img class="alignnone wp-image-2669 size-full"
src="http://.../wp-content/uploads/2017/07/GrillSommer1.jpg"
alt="" width="2100" height="904"
srcset="http://.../wp-content/uploads/2017/07/GrillSommer1.jpg 2100w,
http://.../wp-content/uploads/2017/07/GrillSommer1-300x129.jpg 300w,
http://.../wp-content/uploads/2017/07/GrillSommer1-768x331.jpg 768w,
http://.../wp-content/uploads/2017/07/GrillSommer1-1024x441.jpg 1024w,
http://.../wp-content/uploads/2017/07/GrillSommer1-340x146.jpg 340w,
http://.../wp-content/uploads/2017/07/GrillSommer1-500x215.jpg 500w,
http://.../wp-content/uploads/2017/07/GrillSommer1-1200x517.jpg 1200w"
sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw,
(max-width: 1362px) 62vw, 840px" />
Si je lis les informations srcset à droite, il devrait servir
En principe, cela ne me pose pas de problème - mais sur un écran 1920x1080, on me sert la version 1024 pixels, qui est bien sûr incroyablement floue!
Y a-t-il une raison évidente pour laquelle cela se produit?
Le src de votre image pointe vers l'image en taille réelle, ce n'est donc pas un problème de permalien. Le problème se produit en raison des valeurs sizes. Il existe une variable qui détermine la largeur de votre contenu, que WordPress utilisera ensuite pour générer les tailles réactives de vos images.
Cette variable globale peut être définie manuellement dans le fichier functions.php de votre thème:
if( !isset($content_width) ) {
$content_width = 1920;
}
Vous pouvez modifier cette variable pour obtenir le résultat souhaité.
Le problème semble être spécifique au thème Twenty Sixteen, dont la zone de contenu, je suppose, est limitée à une largeur maximale de 840 pixels. Le thème ajoute des règles pour les images sensibles dans son functions.php, dans la fonction twentysixteen_content_image_sizes_attr().
function twentysixteen_content_image_sizes_attr( $sizes, $size ) {
$width = $size[0];
1200 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 1200px';
if ( 'page' === get_post_type() ) {
1200 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
} else {
1200 > $width && 600 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px';
600 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
}
return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'twentysixteen_content_image_sizes_attr', 10 , 2 );
Honnêtement, je ne sais pas trop comment ajuster cela pour prendre en charge une largeur de contenu plus grande, ou plutôt, dans mon cas, une image toujours 100% large.
Pour la production, il est probablement judicieux d’examiner cette question plus en détail, mais il est certainement judicieux de servir des images plus petites à des appareils plus petits.
Vous pouvez vérifier le réglage du média de l'onglet dans wordpress 