🎯 Intention

L’objectif de ce standard est de spécifier quel type d’image appliquer sur un projet et quel taille faut il prendre.

Le développeur a la responsabilité d’intégrer une image au bon format/poids sur un projet.

Intégrer une image trop grosse peut ralentir le téléchargement de la page (et donc réduire l’expérience utilisateur).

<aside> ✅ Pré-requis

Point de connaissance : .jpeg = .jpg </aside>

<aside> ⚠️

Aujourd’hui, on accepte webp / avif / png et webp / jpg : Le .webp et .avif étant plus léger que le .png et .jpg, il reste la meilleur solution, néanmoins le geste de transformation d’un fichier en webp/avif étant flou pour tout le monde (quels outils utiliser pour transformer l’image ? qu’elles sont les bons paramètres à passer à la transformation ?), le passage en webp/avif n’est pas obligatoire

</aside>

✅ Points clés

<aside> ⌛ Temps indicatif : 1h

</aside>

Etape

Visuel / Exemple

La taille de l’image doit être en x2

Il ne faut pas placer des images de trop grande taille
Identifier la taille de l’image rendu dans l’application Sur l’image d’exemple à droite, c’est 630x630
Récupérer l’image x2 depuis Figma/Sketch

Raison

En réduisant la taille d’une image, cela réduit le poids de l’image. Ce qui a un impact positif sur la vitesse de téléchargement de l’app

Mettre une image en x2 permet d’avoir un bien meilleur rendu sur les écrans Retina : https://buzut.net/webdesign-pour-ecrans-retina/

Pour déterminer la taille d’une image, il faut voir la taille rendu sur la page. Ici on voudra donc une image de 1260x1260

Avec Figma/Sketch, il est possible d’exporter l’image en x2 directement

Si l’image est une icône : `.svg` > `.webp` > `.png`

Ne pas utiliser de .jpg
Il existe une extension Visual Studio Code pour modifier/prévisualiser les .svg : https://marketplace.visualstudio.com/items?itemName=jock.svg
Les icônes en svg permet de customiser cette icône (couleur, click, …)

Raison : Le svg aura toujours le meilleur rendu qu’il soit affiché en 10x10 ou 1000x1000

Le .svg permet de rendre une image avec uniquement des formes géométriques. Il s’agit d’un fichier texte écris en XML, il peut donc être lu, modifier dans un éditeur de code.

<aside> ✅ OK

Exemple d’icone en .svg