58 lines
2.7 KiB
Markdown
58 lines
2.7 KiB
Markdown
## Eviter d'utiliser des images matricielles
|
||
|
||
### Identifiants
|
||
|
||
|
||
| V1 |
|
||
|:--:|
|
||
| 12 |
|
||
|
||
### Catégories
|
||
|
||
| Cycle de vie | Tiers | Responsable |
|
||
|:---------:|:----:|:----:|
|
||
| 5. Utilisation | Utilisateur/Terminal | Utilisateur |
|
||
|
||
### Indications
|
||
|
||
| Degré de priorité | Mise en oeuvre | Impact écologique |
|
||
|:-------------------:|:-------------------------:|:---------------------:|
|
||
| 4 | 4 | 4 |
|
||
|
||
|Ressources Economisées |
|
||
|:----------------------------------------------------------:|
|
||
| Réseau |
|
||
|
||
### Description
|
||
|
||
Choisir le bon format d’image est crucial pour réduire la taille de l'application.
|
||
Par ailleurs, avec la multiplication des terminaux, des tailles d’écran et l’augmentation de leur résolution, une approche vectorielle
|
||
doit être privilégiée par rapport à des images matricielles.
|
||
Grâce à cette bonne pratique, l’interface est indépendante de la résolution de l’écran. On limite donc aussi la dette technique.
|
||
La première règle consiste à remplacer les images matricielles (GIF, PNG, JPEG, WebP, etc.) par des images vectoriels (SVG), ou des icônes inclues dans la police de caractères.
|
||
S’il n’est pas possible d’utiliser ce format, il convient de convertir au moins les images de type GIF, PNG et JPEG en image de type WebP. En effet, ce dernier offre une compression meilleure et supporte également la gestion de transparence depuis Android 4.3 (API Level 18).
|
||
|
||
Android Studio permet de transformer rapidement des images de type PNG ou JPEG en format WebP. Il suffit de faire clic droit sur le fichier de l'image ou un répertoire contenant plusieurs images, et sélectionner "Convert to WebP".
|
||
|
||
Note : Il est intéressant de noter qu'un fichier SVG n'est pas inclus tel quel au sein d'un projet Android, mais qu'il est transformé en un fichier XML interprétable par le SDK Android via l'outil d'import d'Android Studio. Ce dernier va optimiser le contenu de ce fichier XML en supprimant les attributs inutiles et les commentaires qui pouvaient être inclus dans le fichier SVG.
|
||
|
||
### Exemple
|
||
|
||
|
||
![Différentes formes géométriques qui se superposent.](demo-image-format.png)
|
||
|
||
Cette image de 198 × 198 pixels pèse :
|
||
- 118 Ko dans un format matriciel non compressé ;
|
||
- 6,5 Ko en JPEG (compression à 90 %) ;
|
||
- 3,8 Ko en PNG ;
|
||
- 0,7 Ko en WebP (qualité d'encodage à 75%);
|
||
- 0,7 Ko en SVG.
|
||
|
||
Le format vectoriel est, dans ce cas précis, 5 à 10 fois moins lourd qu’un format matriciel tout en pouvant être redimensionné à l’infini.
|
||
|
||
### Principe de validation
|
||
|
||
| Le nombre ... | est inférieur ou égal à |
|
||
|-------------------|:-----------------------:|
|
||
| d'images matricielles | 5 |
|