mobile-best-practice/chapters/MBP_012_fr.md

55 lines
2.7 KiB
Markdown
Raw Normal View History

2024-02-05 15:08:18 +00:00
## Eviter d'utiliser des images matricielles
### Identifiants
// TODO
### 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 dimage est crucial pour réduire la taille de l'application.
Par ailleurs, avec la multiplication des terminaux, des tailles décran et laugmentation de leur résolution, une approche vectorielle
doit être privilégiée par rapport à des images matricielles.
Grâce à cette bonne pratique, linterface 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.
Sil nest pas possible dutiliser ce format, il convient de convertir a minima 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 quun format matriciel tout en pouvant être redimensionné à linfini.
### Principe de validation
| Le nombre ... | est inférieur ou égal à |
|-------------------|:-----------------------:|
| d'images matricielles | 5 |