Comment exporter des images nettes et précises depuis Figma et Photoshop

Le problème : Design net, export flou

Vous avez passé des heures à créer un design parfait dans Figma ou Photoshop. Sur votre canevas, tout semble pixel parfait. Mais lorsque vous exportez en JPG ou PNG et l’affichez dans un navigateur, l’image paraît douce, floue ou simplement… décalée.

C’est un problème courant chez les designers. Ce flou est généralement dû à l’une de ces deux causes : une résolution incorrecte lors de l’exportation ou des paramètres d’exportation inadaptés. Ce guide vous offre une méthode infaillible dans Figma et Photoshop pour garantir des résultats nets à chaque fois.

La règle d’or : Exporter en 2x, afficher en 1x

La clé pour obtenir des images nettes sur les écrans haute résolution modernes (comme les écrans Retina d’Apple) est d’exporter vos images à deux fois la taille de leur dimension d’affichage prévue.

Exemple : Si une bannière hero doit s’afficher à 1200px de largeur sur votre site, exportez-la depuis votre outil de design à 2400px de largeur. Ensuite, dans votre HTML ou CSS, limitez son affichage à 1200px.

<!-- Le fichier image fait 2400px de large, mais on demande au navigateur de l'afficher à 1200px -->  
<img src="my-banner-2400px.jpg" alt="Texte alternatif descriptif" width="1200">  

Cette technique fournit au navigateur une densité de pixels double, ce qui produit des images plus nettes sur les écrans haute résolution.

Exportation depuis Figma

Figma étant un outil vectoriel, exporter des ressources nettes est simple.

Guide étape par étape :

1. Sélectionnez le cadre ou la ressource : Cliquez sur l’élément à exporter (icône, composant, cadre complet, etc.).
2. Ouvrez le panneau d’exportation : Dans la barre latérale droite, trouvez la section “Export” et cliquez sur l’icône +.
3. Choisissez la taille d’exportation : C’est l’étape cruciale. Dans les paramètres “Export”, remplacez 1x par 2x. Cela indique à Figma de rendre la ressource à deux fois sa taille sur le canevas. Pour des éléments critiques comme un logo, choisissez même 3x.
4. Sélectionnez le format :
   • JPG : Idéal pour les photos et images complexes. Régler la qualité à 80-90%.
   • PNG : Idéal pour les graphiques avec contours nets, texte ou transparence (logo, icônes).
   • SVG : Meilleur choix pour les logos et icônes simples. Format vectoriel, il reste parfaitement net à toute taille.
5. Cliquez sur “Export” : Enregistrez le fichier. N’oubliez pas de le compresser via un outil comme notre compresseur d’images avant de le téléverser sur votre site.

Exportation depuis Photoshop

Photoshop étant raster, il est crucial de travailler dès le départ dans un document haute résolution.

Méthode moderne : “Exporter en”

Recommandée pour les graphiques web : Fichier > Exporter > Exporter en....

1. Définissez les dimensions : Dans la section “Taille de l’image” à droite, vérifiez la largeur et la hauteur. Si vous suivez la règle du 2x, votre document devrait déjà être deux fois plus grand que la taille d’affichage prévue.
2. Choisissez le format :
   • JPG : Utilisez le curseur “Qualité”. Une valeur entre 70 et 85 offre un bon équilibre qualité/taille.
   • PNG : Pour les images nécessitant de la transparence. Si votre palette est limitée (logo simple), cochez “Fichier plus petit (8 bits)” pour réduire considérablement la taille.
3. Espace colorimétrique sRGB : En bas de la boîte de dialogue, sous “Espace colorimétrique”, assurez-vous que “Convertir en sRGB” est coché. C’est le profil colorimétrique standard pour le web, évitant des couleurs ternes dans les navigateurs.
4. Cliquez sur “Exporter tout” : Enregistrez votre image.

Méthode classique : “Enregistrer pour le Web”

Pour les anciennes versions de Photoshop : Fichier > Exporter > Enregistrer pour le Web (hérité).

1. Sélectionnez un préréglage : En haut à droite, choisissez un préréglage comme “JPEG Élevé” ou “PNG-24”.
2. Ajustez la qualité : Pour le JPEG, utilisez le curseur “Qualité” (valeur idéale : 70-80). Pour le PNG, choisissez entre PNG-8 (petit fichier, couleurs limitées) et PNG-24 (haute qualité, couleurs complètes).
3. Vérifiez la taille : En bas à droite, confirmez les dimensions finales.
4. Validez sRGB : Assurez-vous que “Convertir en sRGB” est coché.
5. Cliquez sur “Enregistrer”.

En exportant systématiquement en 2x et en compressant correctement vos ressources dans l’espace colorimétrique sRGB, vous direz adieu aux images floues et garantirez que vos designs restent aussi nets en ligne qu’ils l’étaient sur votre canevas.