Travailler avec des fichiersOù il va et dans quel format · 9 min de lecture

Quelle extension pour quoi

Le tableau qui règle 95 % des décisions.

Si tu as… Utilise Pourquoi
Une photo .jpg Il compresse très bien les photos et personne ne remarque la perte. Un .png de la même photo pèse plusieurs fois plus sans mieux rendre.
Une capture d'écran .png Là, ça compte : le .jpg salit les bords des lettres et la capture se retrouve avec de la saleté autour du texte.
Un logo, une icône, un dessin plat .svg Il monte à n'importe quelle taille, pèse presque rien, et c'est du texte — donc modifiable.
Quelque chose qui a besoin d'un fond transparent .png Le .jpg ne sait pas enregistrer la transparence : il te la remplit de blanc.
Quelque chose pour l'imprimeur .pdf Il garde les vecteurs et le texte sans dégrader. S'il y a des photos dedans, qu'elles soient à 300 dpi à la taille finale.
Quelque chose à mettre en ligne .webp Il pèse nettement moins que le .jpg à qualité égale. Si le site ne l'accepte pas, .jpg.
Quelque chose que tu voudras modifier dans un mois la source Garde toujours le fichier avec lequel tu l'as construit — le .html, le .svg — en plus de l'export. Sans lui, modifier c'est refaire.
Vert, texte. Magenta, binaire.

Pixels et dpi, en deux paragraphes. Pour le jour où l'imprimeur te dit « envoie-le-moi en haute résolution ».

Pixels, c'est le nombre de cases que l'image a en tout : 1748 × 2480, par exemple. C'est un nombre fixe, enregistré dans le fichier. Dpi (points par pouce) n'est pas une propriété de l'image mais de la façon dont tu vas la montrer : combien de ces cases tu vas faire tenir dans chaque pouce de papier.

La même image à plus de dpi sort plus petite et plus nette ; à moins de dpi, plus grande et plus floue.

La règle pratique : pour l'écran, n'importe quoi de raisonnable suffit ; pour l'imprimeur, tu veux 300 dpi à la taille finale. Un dépliant A5 imprimé a besoin d'environ 1748 × 2480 pixels.

L'erreur classique, mais avec de l'argent en jeu : le logo téléchargé sur le web vit à 200 pixels parce que c'est tout ce qu'il faut à l'écran, et sur une affiche de deux mètres ça se voit.

Demande toujours l'original vectoriel du logo — un .svg, un .pdf ou un .ai. Avec ça, la taille cesse d'être un problème pour toujours, et c'est la raison pour laquelle les agences te l'envoient comme ça.

Comment on fait un dépliant, alors. La tentation, c'est d'ouvrir Canva ou Photoshop et de commencer à dessiner. Le problème apparaît au changement numéro sept, quand le client demande de déplacer le prix, de changer le vert et d'enlever une ligne au texte : sur une image, chaque changement se refait à la main, et le septième coûte autant que le premier.

Le chemin qui tire parti de tout ce qui précède : construire le dépliant en texte — un .html avec son .css — et ne l'exporter en image qu'à la fin.

Itérer sur du texte ne coûte rien. Exporter se fait une seule fois. L'original, c'est le .html, pas le .png : si tu perds le PNG, tu le réexportes en dix secondes ; si tu perds le .html, tu as perdu le dépliant.

  1. Pour exporter en PDF Tu ouvres le .html dans le navigateur, Ctrl+P, et tu choisis « Enregistrer au format PDF ». Rien de plus.
  2. Pour les mesures d'imprimerie Demande à l'IA de lui mettre la taille exacte en millimètres et des marges de fond perdu. C'est une ligne de CSS.
  3. Pour les réseaux Demande-lui les mesures du format dont tu as besoin et tu exportes une image pour chacun — depuis le même fichier texte.
Exporter est la dernière étape, et ça ne demande rien d'exotique.

Tu vas faire un dépliant que le client va corriger plusieurs fois. Par où tu commences ?

Garde toujours le fichier avec lequel tu as construit la chose, pas seulement la chose exportée.

snack 6 sur 6

Powered by KlugerByte