Choisissez des dimensions d'image utiles pour les écrans haute densité

Une carte affichée avec une largeur de 800 pixels CSS peut utiliser une image candidate d'une largeur de 1600 pixels d'image comme exemple de 2x. Le navigateur peut choisir une source appropriée en fonction de la mise en page, de la densité de l'appareil et d'autres conditions lorsque le site Web propose un balisage d'image réactif. Le fichier 1600-pixel ne signifie pas que la carte doit occuper 1600 pixels CSS sur la page.

Mesurez la mise en page réelle avant d'exporter. Une colonne d'article, une bannière pleine largeur et une petite fiche produit ont rarement besoin de la même taille de source. Vérifiez également la disposition du téléphone, où l'image peut occuper une largeur différente ou utiliser un recadrage différent. Rendre chaque fichier deux fois plus grand que la largeur de la fenêtre d'affichage du bureau peut gaspiller des octets. Considérez les exportations à plus haute densité comme des candidats à une véritable implémentation réactive plutôt que comme un seul fichier surdimensionné que chaque appareil doit télécharger.

Cette page commence par une boîte d'ajustement WebP de 1600 par 1600 pixels. Il s'agit d'une limite illustrative, alors remplacez-la par des valeurs basées sur la taille d'affichage que vous avez mesurée. L'ajustement conserve les proportions et n'agrandit pas une source plus petite. Par exemple, un original large peut atteindre 1600 pixels de diamètre alors qu'un portrait s'adapte plutôt à la hauteur. Vérifiez les dimensions de sortie réelles.

Si une source n'a qu'une largeur de 700 pixels, l'écriture d'une exportation de 1600 pixels ne crée pas les détails d'un original plus grand. Utilisez une meilleure source ou acceptez un candidat plus petit. Comparez la netteté légère avec Désactivé après le redimensionnement et inspectez les textures fines à la taille d’affichage prévue. Pour les graphiques transparents, utilisez plutôt PNG, car l'exportation WebP actuelle ici est opaque. Conservez le dessin ou la photographie originale afin de pouvoir créer différents candidats ultérieurement.

Le convertisseur produit un fichier ; votre site Web doit encore le sélectionner et le présenter correctement. Fournissez des candidats sources appropriés, des indications de taille précises et des dimensions d'image réservées dans la mise en œuvre. Un téléphone ne devrait pas recevoir la plus grande image simplement parce qu’elle existe. Vérifiez l'image téléchargée dans les outils de développement du navigateur lors de l'évaluation de la page finale, car un système de gestion de contenu peut la transformer à nouveau.

Affichez la page avec les paramètres d'écran ordinaires et haute densité et comparez les détails avec la taille du transfert. Une image de plus haute résolution n’est pas automatiquement le meilleur compromis pour une petite carte décorative. De même, une image trop petite peut paraître médiocre dans une vue plus grande du produit. Testez des contenus significatifs tels que des visages et des étiquettes au lieu de juger uniquement un arrière-plan flou. Gardez la priorité de chargement adaptée à la position de l'image et mesurez la page réelle avant de réclamer une amélioration de la vitesse ou des Core Web Vitals.

Supposons que votre carte la plus large mesure 400 pixels CSS et qu'une illustration reste claire à cette largeur. Un candidat 800-pixel est une exportation 2x possible lorsque la source le prend en charge. Vérifiez également la carte dans les mises en page plus étroites, car une image qui s'étend sur tout l'écran du téléphone peut avoir une largeur d'affichage différente de celle de la carte de bureau. Exportez à partir de l'original pour chaque candidat nécessaire plutôt que d'agrandir le plus petit. Confirmez quel fichier le navigateur sélectionne dans la page réelle. Cette vérification de sélection finale est ce qui relie un calcul de dimensions locales aux octets que les visiteurs reçoivent réellement pour l'image.