Une image affichée à 400 pixels en 2x
Pour un affichage de 400 × 300 pixels sur un écran 2x, fournissez une image de 800 × 600 pixels.
Par Jimenez Julien, é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é | Dimensions | Mégapixels | Poids brut |
|---|---|---|---|
| 1x | 400 × 300 | 0,12 Mpx | × 1 |
| 2x | 800 × 600 | 0,48 Mpx | × 4 |
| 3x | 1200 × 900 | 1,08 Mpx | × 9 |
Le cas en détail
Sur un écran 2x, chaque pixel CSS correspond à 2 × 2 pixels physiques. Une image de 400 pixels de large est alors étirée et paraît floue. Il faut fournir 800 pixels de large pour garder la netteté.
À retenir : Avec srcset, proposez une version 1x et une 2x : les écrans standards ne téléchargent que la petite.
L'exemple chiffré
Valeurs utilisées dans ce cas (des exemples, pas des mesures) :
- Largeur d'affichage (pixels CSS) : 400
- Hauteur d'affichage (pixels CSS) : 300
- Densité de l'écran : 2x (écran haute densité)
- Image à fournir (densité 2x)
- 800 × 600 pixels
- Pixels
- 480 000
- Poids brut relatif à la densité 1x
- × 4
- Attribut srcset
- image-800.jpg 800w
| Densité | Dimensions | Mégapixels | Poids brut |
|---|---|---|---|
| 1x | 400 × 300 | 0,12 Mpx | × 1 |
| 2x | 800 × 600 | 0,48 Mpx | × 4 |
| 3x | 1200 × 900 | 1,08 Mpx | × 9 |
Modifiez les champs ci-dessus pour adapter le calcul à votre situation : le résultat se met à jour tout de suite.
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.
Les résultats sont fournis à titre indicatif, sans valeur de conseil juridique, fiscal ou financier.