3.4.1. Formats et nomenclature
🔤 Formats
- Formats attendus :
.webp, .jpg, .svg, .png - Images : Libre de droits
- Documentée dans le projet avec lien vers la source
- Selon les normes de crédits.
Nommage de fichiers et dossiers de design : Convention de nommage générale
Contenu à venir…
3.4.2. Image numérique (écran)
- Résolution : 72 dpi
- Mode colorimétrique : RGB
- Outil de création : Adobe Photoshop / Figma
- Poids : Trouver le bon ratio qualité/poids selon le besoin.
3.4.3. Image pour le web
- Résolution : Adaptée à l’affichage (dimensions en pixels, DPI non pertinent).
- Format : Images fournies en versions adaptées (1x / 2x si pertinent).
- Poids : Priorité à la performance / poids optimisé.
Images pleine largeur (hero, arrière-plan) :
- Idéal : 150 à 250 KB
- Maximum raisonnable : ~300–400 KB
- À éviter : > 500 KB
Images « standards »
Dans une page (cartes, contenu, 50 % de largeur) :
- Idéal : 80 à 150 KB
- Acceptable : jusqu’à ~200 KB
- À éviter : > 250 KB
Petites images (UI, icônes) :
- Idéal : < 30–50 KB
3.4.4. Impression (affiches, supports physiques)
- DPI requis : 300 dpi (standard) / 150 dpi (acceptable pour très grands formats vus de loin).
- Dimensions physiques : cm / pouces.
- Mode colorimétrique : RGB ou CMJN (selon les exigences du flux d’impression).
3.4.5. Compression d’images selon le type de contenu
Les valeurs ci-dessus sont des repères recommandés.
Tout dépassement doit être justifié par le contexte d’usage.
| Type de contenu | Format | Raisons |
|---|---|---|
| Images décoratives / UI | WebP | Léger, moderne, bonne qualité. |
| Photos | WebP ou JPEG | JPEG reste OK pour compatibilité, WebP idéal. |
| Logos | SVG | Vectoriel, léger, scalable sans perte. |
| Icônes | SVG | Manipulable en CSS, parfait pour interface. |
| Images nécessitant de la transparence | PNG, WebP | Si WebP transparent n’est pas utilisé. |
| Animations légères | WebP animé | Beaucoup plus performant que GIF. |
| GIF | ❌ À éviter | Très lourd. |