mobile-best-practice/chapters/MBP_012_fr.md

2.7 KiB
Raw Blame History

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.

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