Votre site a mieux à faire que vous faire attendre. Découvrir PageSpeed.fr
Images et médias

Picture : recadrer sans sacrifier le message sur mobile

Adapter la composition d’une image lorsque le même cadrage ne convient pas partout.

Séparer taille et composition

Servir une image plus petite et choisir un autre cadrage répondent à deux besoins différents. Srcset suffit souvent pour la résolution. L’élément picture permet de sélectionner une source selon une condition, par exemple un cadrage vertical lorsque le sujet devient illisible dans un bandeau horizontal réduit.

Préserver le sens de l’image

Le recadrage doit conserver l’élément utile : visage, produit, détail d’un chantier ou information visuelle. Vérifiez la transition entre les sources autour des points de rupture. L’image interne reste le point d’ancrage du texte alternatif ; les différentes compositions doivent donc garder un sens compatible avec cette description.

Mesurer la stabilité

Si les sources ont des proportions différentes, réservez la place adéquate dans chaque mise en page. Un changement de ratio mal anticipé peut déplacer le texte lors du chargement. Comparez ensuite le poids des variantes choisies et leur apparence sur les pages réelles, y compris lorsque la navigation mobile est ouverte.

Pour aller à la source

Besoin d’aide pour votre site ? Retrouvez les conseils d’installation et de compatibilité dans notre centre d’aide.
Votre prochaine étape

Et si votre site
passait la seconde ?

Essayez, comparez, gardez la main. Vous pouvez désactiver ou supprimer l’extension à tout moment pour retrouver le fonctionnement habituel de votre site.

Accélérer mon siteMesurer mon site