Une image pleine largeur de 1200 pixels en 2x
Pour un affichage de 1200 × 630 pixels en 2x, il faudrait 2400 × 1260 pixels : un poids multiplié par quatre.
Par Jimenez Julien, éditeur de Calepin Binaire · mis à jour le
- Image à fournir (densité 2x)
- 2400 × 1260 pixels
- Pixels
- 3 024 000
- Poids brut relatif à la densité 1x
- × 4
- Attribut srcset
- image-2400.jpg 2400w
| Densité | Dimensions | Mégapixels | Poids brut |
|---|---|---|---|
| 1x | 1200 × 630 | 0,76 Mpx | × 1 |
| 2x | 2400 × 1260 | 3,02 Mpx | × 4 |
| 3x | 3600 × 1890 | 6,8 Mpx | × 9 |
Le cas en détail
Une grande image multipliée par deux dans chaque direction devient très lourde. Il faut compenser par une compression plus forte ou une meilleure technique de format. Parfois, on accepte une image moins nette pour le confort de chargement.
À retenir : Les grandes images sont les plus coûteuses : mesurez l'effet réel avant de choisir de tout fournir en 2x.
L'exemple chiffré
Valeurs utilisées dans ce cas (des exemples, pas des mesures) :
- Largeur d'affichage (pixels CSS) : 1200
- Hauteur d'affichage (pixels CSS) : 630
- Densité de l'écran : 2x (écran haute densité)
- Image à fournir (densité 2x)
- 2400 × 1260 pixels
- Pixels
- 3 024 000
- Poids brut relatif à la densité 1x
- × 4
- Attribut srcset
- image-2400.jpg 2400w
| Densité | Dimensions | Mégapixels | Poids brut |
|---|---|---|---|
| 1x | 1200 × 630 | 0,76 Mpx | × 1 |
| 2x | 2400 × 1260 | 3,02 Mpx | × 4 |
| 3x | 3600 × 1890 | 6,8 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.