Une vignette de 120 pixels en 3x
Pour une vignette affichée à 120 × 120 pixels sur un écran 3x, fournissez 360 × 360 pixels.
Par Jimenez Julien, éditeur de Calepin Binaire · mis à jour le
- Image à fournir (densité 3x)
- 360 × 360 pixels
- Pixels
- 129 600
- Poids brut relatif à la densité 1x
- × 9
- Attribut srcset
- image-360.jpg 360w
| Densité | Dimensions | Mégapixels | Poids brut |
|---|---|---|---|
| 1x | 120 × 120 | 0,01 Mpx | × 1 |
| 2x | 240 × 240 | 0,06 Mpx | × 4 |
| 3x | 360 × 360 | 0,13 Mpx | × 9 |
Le cas en détail
Sur les téléphones récents, la densité atteint 3x. Une petite vignette reste légère même multipliée : 360 × 360 pixels, soit 130 000 pixels environ. Le poids brut est neuf fois celui de la version 1x.
À retenir : Pour des petites vignettes, fournir directement du 3x coûte peu et convient à tous les écrans.
L'exemple chiffré
Valeurs utilisées dans ce cas (des exemples, pas des mesures) :
- Largeur d'affichage (pixels CSS) : 120
- Hauteur d'affichage (pixels CSS) : 120
- Densité de l'écran : 3x (téléphones récents)
- Image à fournir (densité 3x)
- 360 × 360 pixels
- Pixels
- 129 600
- Poids brut relatif à la densité 1x
- × 9
- Attribut srcset
- image-360.jpg 360w
| Densité | Dimensions | Mégapixels | Poids brut |
|---|---|---|---|
| 1x | 120 × 120 | 0,01 Mpx | × 1 |
| 2x | 240 × 240 | 0,06 Mpx | × 4 |
| 3x | 360 × 360 | 0,13 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.