Dimensions d'image pour écrans haute densité

Une image affichée à 400 pixels de large paraît floue sur un écran haute densité si elle fait 400 pixels. Saisissez la taille d'affichage pour obtenir les dimensions à fournir.

Jimenez JulienPar , éditeur de Calepin Binaire · mis à jour le

Image à fournir (densité 2x)
800 × 600 pixels
Pixels
480 000
Poids brut relatif à la densité 1x
× 4
Attribut srcset
image-800.jpg 800w
DensitéDimensionsMégapixelsPoids brut
1x400 × 3000,12 Mpx× 1
2x800 × 6000,48 Mpx× 4
3x1200 × 9001,08 Mpx× 9

Comment ça se calcule

Un écran de densité d affiche d pixels physiques par pixel CSS dans chaque direction. L'image doit donc mesurer largeur × d par hauteur × d. Le nombre de pixels, et donc le poids brut, augmente comme d au carré : une image 2x contient quatre fois plus de pixels qu'une image 1x.

Questions fréquentes

Faut-il toujours fournir du 3x ?

Non. L'attribut srcset permet de proposer plusieurs tailles et laisse le navigateur choisir selon l'écran et la connexion.

Pourquoi le poids grimpe-t-il autant ?

Parce que doubler la largeur et la hauteur multiplie la surface par quatre. Une compression adaptée limite l'effet.

Cas fréquents

Des exemples déjà remplis, avec leur explication :

Intégrer cet outil sur votre site

Copiez ce code pour afficher l'outil sur votre site ou votre blog. L'outil s'exécute dans le navigateur du visiteur, sans cookie ni suivi, et affiche un lien « Propulsé par Calepin Binaire » vers cette page.

Aperçu de la version intégrable : https://mircode.org/embed/dimensions-image-pour-ecrans-haute-densite/

Les résultats sont fournis à titre indicatif. Pour aller plus loin, découvrez les sites de la catégorie Sandbox et casse-têtes de l'annuaire et lisez le guide de cette catégorie.

Autres outils

Voir les 35 outils