La boîte à outils essentielle du designer freelance
Optimisation d'images, conversion de codes couleur, création de favicons et nettoyage SVG — tous les outils pour le travail client, sans installation.
Mardi dernier, 21h, un client m'envoie un message : "Tu peux m'envoyer le logo en favicon 32x32, en icône Apple Touch 180x180, et aussi c'est quoi le code hex du bleu qu'on a utilisé ?"
J'étais sur mon portable. Pas de Photoshop. Pas d'Illustrator. Juste un navigateur.
Quinze minutes plus tard, tout était livré. Voici comment.
Le problème "le client veut des tailles précises"
Ça arrive tout le temps. Un client a besoin de son image hero en exactement 1200x630 pour Open Graph, des photos produit en 800x800 pour sa boutique, et des miniatures en 150x150 pour une grille. Trois tailles différentes à partir d'une seule image.
Ouvrir une application de design complète pour un simple redimensionnement, c'est comme prendre un camion pour aller au supermarché. On a juste besoin de quelque chose de rapide et précis.
On dépose l'image, on règle les dimensions, on télécharge. Fait en quelques secondes. J'ai un onglet épinglé pour ça parce que ça revient au moins deux fois par semaine.
Le chaos des codes couleur
Les développeurs demandent du hex. Les imprimeurs veulent du CMJN. Les chartes graphiques listent des valeurs RVB. Un client envoie un numéro Pantone et demande "la version CSS".
La conversion de couleurs semble triviale jusqu'à ce qu'on le fasse pour la cinquième fois dans la journée. Avoir un seul endroit pour coller n'importe quel format de couleur et récupérer tous les autres formats, c'est un vrai gain de temps.
Astuce pro : enregistrer ses couleurs de marque les plus utilisées après conversion. Ça évite de chercher la prochaine fois.
Les favicons sont étonnamment compliqués
Un favicon semble simple — c'est une petite icône. Mais les navigateurs et appareils modernes ont besoin de plusieurs tailles : 16x16 pour les onglets, 32x32 pour les favoris, 180x180 pour l'écran d'accueil iOS, 192x192 pour Android.
Générer tout ça à partir d'une seule image source signifiait ouvrir Photoshop, exporter chaque taille manuellement, puis convertir en format .ico. 20 minutes de travail pénible.
Avec un générateur de favicons, on téléverse une fois et on obtient chaque taille nécessaire. Je l'inclus maintenant dans chaque livraison de site web.
Nettoyage SVG avant livraison
Illustrator et Figma exportent les SVG avec beaucoup de superflu — métadonnées de l'éditeur, groupes inutiles, styles inline qui devraient être des attributs, précision décimale bien trop élevée.
Un SVG de 50Ko qui devrait faire 8Ko, c'est courant. Pour une seule icône, ça ne change pas grand-chose. Pour un ensemble de 40 icônes sur une page, c'est la différence entre fluide et lent.
Passer les SVG dans un optimiseur SVG avant de les envoyer aux développeurs. Ils apprécieront le markup propre, et les fichiers plus petits améliorent les performances de la page.
Compresser les livrables client
Les clients ne s'intéressent pas à la compression. Ils s'intéressent au fait que leur site charge vite et que leurs pièces jointes ne soient pas refusées pour cause de taille.
Avant d'envoyer un lot d'images, je les fais passer par la compression. Un portfolio de 20 photos produit peut passer de 80Mo à 12Mo sans perte de qualité visible. C'est la différence entre "ça met une éternité à télécharger" et "reçu, merci !"
Le vrai workflow
Mon processus réel pour une livraison d'assets client typique :
- Redimensionner aux dimensions exactes demandées par le client
- Compresser pour réduire la taille sans perdre en qualité
- Convertir les couleurs si des codes de format spécifiques sont nécessaires
- Générer les favicons si c'est un projet web
- Optimiser les SVG avant de transmettre aux développeurs
Le tout prend peut-être 10 minutes pour un set complet d'assets. Pas de logiciel à installer. Pas d'abonnements. Juste des onglets et c'est fait.
Pourquoi les outils navigateur gagnent pour les freelances
En freelance, chaque minute de configuration est du temps non payé. On peut être sur la machine d'un client, sur un portable au café, ou sur sa tablette. Avoir des outils qui fonctionnent dans n'importe quel navigateur, sur n'importe quel appareil, sans écran de connexion ni limitation d'essai — c'est ce qui rend le freelancing vraiment durable.
Les meilleurs outils sont ceux auxquels on n'a pas besoin de penser. Ils marchent quand on en a besoin, ne gênent pas, et laissent se concentrer sur le travail créatif pour lequel le client paie vraiment.