Quelle largeur choisir pour une image web ? Mesurez sa taille d’affichage
Spécifiez individuellement la taille de l'image, le recadrage et le poids du fichier pour une couverture pleine largeur avec une carte mobile.
Si la photo du produit figure sur une carte de 480 pixels de large sur la page d'accueil, il n'est pas nécessaire d'envoyer la photo de 5000 pixels à chaque téléphone. Si la même photo peut être ouverte en plein écran, la version grande a également une fonction. La première mesure est effectuée dans la zone occupée par l'image dans le navigateur, et non dans le dossier du fichier.
Évaluez la petite carte en zoomant
Par exemple, pour une carte d'une largeur de 480 pixels CSS, préparez deux sorties de 480 et 960 pixels de large. Le navigateur peut sélectionner en fonction de la densité et de la disposition de l'écran avec des valeurs de srcset et de tailles correctement définies. Si la carte est recadrée différemment sur le téléphone, encadrez la plus petite taille séparément. Le simple fait de réduire la taille ne ramènera pas le produit qui se trouve hors du cadre.
Ouvrir les deux sorties avec le vrai téléphone. Si une fine ligne d’emballage se brise, réduisez progressivement la compression. Si l'image reste nette, utilisez le fichier plus clair. L'enregistrement de la taille utilisée pour la couverture, la fiche d'inscription et le gros plan permet de conserver plus facilement la même qualité dans les futures mises à jour du site.