23/10/2024 7 Minutes read DesignTech 

Optimisation des images : Comment choisir, optimiser et transmettre les assets graphiques

Pourquoi cette série d’articles ?

Dans le monde numérique d’aujourd’hui, créer des produits web et mobiles de qualité repose sur une collaboration harmonieuse entre designer·euse·s et développeur·euse·s. Ces deux rôles, bien que distincts, sont complémentaires et essentiels pour garantir la qualité des produits numériques. Cependant, la collaboration peut parfois ressembler à un véritable défi, avec ses obstacles méthodologiques, ses divergences de langages techniques et ses priorités parfois conflictuelles.

Dans cette série d’articles, nous allons explorer les bases d’une collaboration réussie en listant les meilleures pratiques pour améliorer cette synergie.

Comment avons-nous fait ?

Pour mieux comprendre les dynamiques de collaboration entre designer·euse·s et développeur·euse·s, nous avons organisé des tables rondes où nous avons mis en commun nos expériences issues de divers projets. Ces échanges nous ont permis d’identifier les situations rencontrées fréquemment afin de déterminer ensemble les bonnes pratiques à adopter.

Nous avons également enrichi nos discussions en menant des recherches croisées entre différentes sources (livres, web etc) afin d’approfondir les meilleures pratiques de collaboration entre designer·euse·s et développeur·euse·s.

De quels sujets allons-nous parler ?

Cette série d’articles est principalement à l’attention des designer·euse·s. Nous y explorerons plusieurs aspects de cette collaboration :

  1. Optimisation des images : Comment choisir, optimiser et transmettre les assets graphiques aux développeur·euse·s.
  2. Gestion des polices de caractères : Les meilleures pratiques pour sélectionner, utiliser et partager les polices de caractères aux développeur·euse·s.
  3. Animations et interactions : Les cas, états et interactions à prévoir pour une expérience utilisateur sans faille.
  4. Documentation design : L’importance d’une documentation claire et détaillée pour faciliter la compréhension et l’implémentation des designs.
  5. Organisation des fichiers Figma : Comment structurer les fichiers Figma pour une collaboration optimale et une meilleure gestion des projets.

Sans plus attendre, place au premier article !

(1/5) — Optimisation des images : Comment choisir, optimiser et transmettre les assets graphiques aux développeur·euse·s.

Les images sont cruciales pour créer des interfaces attrayantes et communiquer efficacement. Le choix du bon format peut grandement impacter la performance et l’esthétique de vos projets web et mobiles.

Explorons deux grandes catégories d’images : les SVG (Scalable Vector Graphics) et les bitmaps (JPEG, PNG, WEBP). En comprenant leurs caractéristiques et en appliquant les meilleures pratiques, les designer·euse·s peuvent améliorer l’expérience visuelle et faciliter le travail des développeur·euse·s.

Les SVG

Essentiels au design web moderne, les SVG garantissent une qualité constante, quelle que soit la taille, tout en étant légers et flexibles pour les animations.

✅ Préférer des strokes (contours) aux formes pleines

Les strokes dans les SVG filaires offrent de nombreux avantages par rapport aux formes pleines :

  • Réduction du poids du fichier,
  • Flexibilité pour des modifications faciles via CSS ou JavaScript,
  • Meilleure lisibilité en petit format,
  • Adaptation optimale aux différentes tailles d’écran.
Captures d’écrans de l’outil Figma représentant d’un côté une icône réalisée en contour et de l’autre côté une icône réalisée en remplissage.
Icône réalisée en stroke (gauche) vs. en forme pleine (droite) sur Figma.

✅ Privilégier la viewbox

La viewBox dans un SVG définit ce qui sera visible et comment. Composée de quatre valeurs (x, y, width, height), elle permet de créer des graphiques vectoriels adaptables à différents contextes tout en maintenant leur qualité et leurs proportions.

Contrairement à la simple définition de width et height, la viewBox offre un contrôle plus fin sur la portion du SVG à afficher, rendant les images naturellement responsives.

Pour les développeur·euse·s, l’utilisation de la viewBox simplifie l’intégration des SVG et peut même contribuer à optimiser les performances en permettant de ne charger que la partie nécessaire du graphique.

✅ Nommer le SVG de manière sémantique

Optez pour des noms descriptifs comme “icon-menu.svg” plutôt que “image1.svg”. Si possible, conservez le nom d’origine ou l’identifiant provenant de la source. Adoptez des conventions cohérentes, comme l’utilisation de tirets et l’inclusion du contexte d’utilisation dans le nom.

Aperçu d’une icône avec un nom générique (icon3.svg) vs. aperçu d’une icône avec un nom descriptif (star.svg)
Nomenclature générique (gauche) vs. nomenclature descriptive (droite).

✅ Optimiser leurs poids

Pour optimiser vos SVG, deux options s’offrent à vous :

  1. Éditer manuellement le code dans un éditeur de texte
  2. Utiliser un logiciel/plugin dédié à l’optimisation SVG.

Nous recommandons cette seconde approche, plus rapide et pratique. Il suffit de sélectionner vos SVG dans votre outil de design, de les exporter via un plugin d’optimisation, et vous obtiendrez des fichiers épurés, débarrassés de toute information inutile.

Capture d’écran du plugin Figma Advanced SVG Export permettant de réduire la taille d’une icône de 60%
Réduction de 60% de la taille de l’icône grâce au plugin Figma Advanced SVG Export

✅ Exporter vos assets

Voici quelques bonnes pratiques pour exporter efficacement vos SVG :

  • Fournir un dossier complet et bien organisé, avec une structure claire par catégorie ou taille
  • Adoptez un système de nommage cohérent
  • Optimiser vos SVG avant l’export pour réduire leur taille sans compromettre la qualité.
  • Si nécessaire, incluez plusieurs versions d’un même SVG pour différents contextes d’utilisation.

Pour les projets à long terme, penser à la gestion des versions. Préciser le format d’export préféré (fichiers individuels ou sprite SVG) et ne pas oublier d’inclure les attributs d’accessibilité pertinents.

⚠️ Éviter les font icons

Utiliser des font icons, c’est un peu comme essayer de manger sa soupe avec une fourchette : ça peut marcher, mais ce n’est vraiment pas l’idéal. Voici pourquoi :

  • Problèmes d’accessibilité : Si elles ne sont pas correctement configurées avec des textes alternatifs, elles peuvent compromettre l’expérience des utilisateurs de lecteurs d’écran.
  • Risques de problèmes de chargement : Elles peuvent laisser le site dépourvu d’icônes essentielles.
  • Performances : Les font icons peuvent ralentir le chargement initial de la page en raison de la taille souvent importante des fichiers de polices.
  • Gestion complexe : Leur mise à jour est également plus complexes comparées aux SVG individuels.

Les bitmaps

Tournons-nous maintenant vers les images bitmap. Leur force réside dans leur richesse en pixels, offrant une qualité visuelle impressionnante. Cependant, cette qualité peut parfois se transformer en défi, notamment en termes de performance et de gestion.

✅ Les différents formats

Le format WEBP se distingue par ses nombreux avantages en termes de compression, de qualité de rendu et de gestion de la transparence. Cependant, son exportation n’est pas native sur tous les logiciels de design. Sketch l’intègre, contrairement à Figma. Pour pallier cette limitation sur Figma, des plugins d’exportation WEBP sont disponibles.

En l’absence de l’option WEBP, deux alternatives principales s’offrent à vous :

  • Le format PNG est recommandé pour les images nécessitant une transparence et des détails fins, telles que les captures d’écran, les illustrations détaillées et les images avec des zones transparentes. Ce format préserve la qualité mais peut générer des fichiers plus volumineux que le JPEG.
  • Le format JPEG est adapté aux photographies et aux images complexes riches en couleurs. Il est particulièrement efficace pour obtenir des fichiers de petite taille lorsque la transparence n’est pas nécessaire. Il est préférable d’éviter son utilisation pour les graphiques, les images contenant du texte ou celles présentant des bords nets.

Le choix du format dépend donc des spécificités de chaque image et des besoins du projet. Une réflexion sur ces aspects avant l’exportation permet d’optimiser la qualité et les performances des images sur votre site.

Comparaison des poids de différents formats d’images : WEBP (16 ko), JPG (74 ko), PNG (66 ko)
Exemples du poids des images pour différentes formats.

✅ Optimiser les dimensions des images et leur résolution

Voici quelques conseils :

  • Adapter les dimensions : Exportez vos images aux tailles appropriées selon leur utilisation. Tenez compte des résolutions d’écran courantes :
    320–480px pour les mobiles,
    768–1024px pour les tablettes,
    1920px et plus pour les ordinateurs de bureau.
  • Résolution web : Maintenez 72 dpi pour les images destinées au web, contrairement aux 300 dpi utilisés pour l’impression.
  • Réduire intelligemment : Passer d’une image de 2000px à 1000px de large peut réduire sa taille de fichier jusqu’à 75%.

✅ Utiliser des images responsives

L’idée ? Préparer plusieurs versions d’une même image pour différentes résolutions d’écran.

Voici comment procéder :

  • Créer des versions multiples : Préparez des versions @1x, @2x, ou spécifiques pour mobile, tablette, etc.
  • Recadrage intelligent : Ajustez la composition pour chaque format. Un portrait en pied sur desktop pourrait devenir un gros plan sur mobile.
  • Garder l’essentiel : Assurez-vous que chaque version conserve le message et l’impact visuel de l’original.

✅ Nommer les images de manière descriptive

Une nomenclature claire et descriptive des images est essentielle pour une gestion efficace des fichiers.

Quelques astuces :

  • Adopter une convention de nommage cohérente, par exemple : “catégorie_description_taille.format” (comme “profil_utilisateur_john_100x100.png”).
  • Utiliser des tirets ou des underscores pour séparer les mots, plutôt que des espaces, afin d’assurer une meilleure compatibilité entre les systèmes et d’éviter les problèmes d’URL.
  • Se limiter aux caractères alphanumériques pour prévenir tout conflit potentiel avec différents systèmes d’exploitation ou serveurs web.

La cohérence est cruciale : appliquer systématiquement votre convention de nommage à travers l’ensemble du projet ou de l’organisation. Cette approche facilite non seulement la compréhension et la recherche des images au sein de l’équipe, mais contribue également à l’optimisation pour les moteurs de recherche (SEO). En effet, des noms de fichiers descriptifs et pertinents peuvent améliorer le référencement de vos images, augmentant ainsi leur visibilité dans les résultats de recherche.

✅ Aplatir les images avec filtres/effets

L’aplatissement des images dans Figma est un processus qui consiste à fusionner tous les calques, filtres et effets en une seule couche.

Cette technique présente plusieurs avantages significatifs.

  1. Premièrement, elle assure que l’image exportée conserve exactement l’apparence souhaitée, éliminant tout risque de perte ou de modification des effets lors de l’exportation.
  2. Deuxièmement, elle peut améliorer les performances en réduisant la complexité de l’image et potentiellement sa taille de fichier.

Cependant, il est important de noter que l’aplatissement rend l’image non modifiable par la suite. Une fois aplatie, il n’est plus possible d’ajuster individuellement les calques ou les effets. Il est donc crucial de conserver une copie non aplatie de l’image pour d’éventuelles modifications futures.

Capture d’écran de l’option “Rasterize Selection” sur Figma permettant d’aplartir les effets appliqués sur une image
Aplatir les effets sur une image à l’aide de l’option “Rasterize Selection” sur Figma.

TL;DR

Optimiser les images, c’est essentiel pour améliorer la performance et l’expérience utilisateur. Voici comment :

  • SVG : Préférez les SVG pour leur flexibilité et leur poids réduit. Utilisez des strokes au lieu de formes pleines, configurez une viewBox pour une meilleure adaptabilité et nommez les fichiers de manière sémantique. N’oubliez pas d’optimiser les SVG avant de les exporter.
  • Bitmaps : Choisissez le bon format selon vos besoins : WEBP de préférence, sinon PNG pour la transparence et JPEG pour les photos. Pensez à ajuster les dimensions pour chaque type d’écran et optez pour des noms de fichiers descriptifs. Optimisez la résolution et aplanissez les images pour éviter les surprises lors de l’export.

En bref, une bonne préparation des assets visuels simplifie la vie des devs et booste les performances des projets.

Explorez toute la série d’articles :

Qui sommes-nous ?

Nous sommes Chloé, UX/UI Designer et Julien, UI Designer, travaillant au sein de l’agence web ekino. Cette série d’articles a été réalisée dans le cadre d’un chantier interne visant à améliorer la qualité de nos livrables et nos méthodes de travail entre designer·euse·s et développeur·euse·s.

Nous tenons à remercier celles et ceux ayant participé et contribué à nos tables rondes : Martin, Lucie, Marie, Joana, Jonathan, Yohann.


Créer une synergie durable entre Designers et Développeurs (1/5) was originally published in ekino-france on Medium, where people are continuing the conversation by highlighting and responding to this story.