Print vs Web Images: Resolution, Color, and Format Guide — pic0.ai

Je me souviens encore du jour où un client m'a appelé dans un état de panique. Ils venaient de recevoir 5 000 brochures imprimées de leur fournisseur, et chaque image semblait pixelisée et délavée. Les mêmes images avaient l'air magnifiques sur leur site web. Cette erreur de 12 000 $ leur a appris—et m'a renforcé—une leçon que j'enseigne depuis 18 ans en tant que designer de production : ce qui fonctionne à l'écran fonctionne rarement en impression sans préparation appropriée.

Je suis Marcus Chen, et j'ai passé près de deux décennies à combler le fossé entre les supports numériques et imprimés en tant que designer de production pour des agences allant de petites boutiques à des équipes internes de Fortune 500. J'ai préparé des fichiers pour tout, des cartes de visite aux panneaux d'affichage de 40 pieds, et j'ai vu toutes les façons possibles dont les images peuvent mal tourner lors du passage entre les médias. Aujourd'hui, je vais partager tout ce que vous devez savoir sur la préparation des images pour l'impression et pour le web, afin que vous n'ayez jamais à passer cet appel coûteux.

Comprendre la résolution : la base de la qualité d'image

La résolution est là où la plupart des gens se trompent, et c'est parce que nous utilisons le même terme—DPI ou PPI—pour signifier des choses différentes dans différents contextes. Laissez-moi décomposer cela d'une manière qui a réellement du sens.

Pour les images web, nous mesurons la résolution en pixels. Une image de 1920x1080 contient exactement 2 073 600 pixels, et c'est tout ce qui compte pour l'affichage numérique. Votre moniteur ne se soucie pas des paramètres DPI intégrés dans les métadonnées du fichier—il affiche simplement un pixel image par pixel écran (au zoom de 100 %). C'est pourquoi une image de 72 PPI et une image de 300 PPI ayant les mêmes dimensions de pixels semblent identiques à l'écran. La valeur PPI est essentiellement ignorée par les navigateurs et les affichages.

L'impression est totalement différente. Ici, le DPI (points par pouce) ou le PPI (pixels par pouce) détermine combien de pixels sont comprimés dans chaque pouce physique de papier. Une image de 300 PPI signifie que 300 pixels sont imprimés dans chaque pouce linéaire, créant ainsi 90 000 pixels par pouce carré. Cette densité est ce qui crée des impressions nettes et professionnelles. Si vous descendez à 72 PPI—le vieux standard du web—vous imprimer uniquement 5 184 pixels par pouce carré. La différence est immédiatement visible à l'œil nu.

Voici le calcul qui compte : si vous voulez imprimer une photo de 4x6 pouces à la qualité professionnelle (300 PPI), vous avez besoin d'une image de 1200x1800 pixels. Cette même image affichée sur une page web à pleine taille serait énorme—occupant probablement tout votre écran et plus. À l'inverse, une image web optimisée à 800 pixels de large imprimerait seulement 2,67 pouces de large à 300 PPI, ou paraîtrait pixelisée si elle était étirée à une taille d'impression plus grande.

Je dis toujours aux clients de penser à la résolution comme à un budget fixe de pixels. Vous pouvez dépenser ces pixels sur une grande surface (résolution inférieure, impression plus grande) ou les concentrer dans un plus petit espace (résolution supérieure, impression plus petite ou détail plus net). Mais vous ne pouvez pas créer des pixels qui n'existent pas. Redimensionner une image web de 72 PPI à 300 PPI n'ajoute pas de détails—cela interpole simplement les pixels existants, créant un flou.

La norme de l'industrie pour l'impression professionnelle est de 300 PPI pour les photographies et les graphiques détaillés. Vous pouvez parfois vous en sortir avec 250 PPI pour des impressions grand format vues de loin, et les panneaux d'affichage peuvent utiliser aussi peu que 30-50 PPI parce qu'ils sont vus à des centaines de pieds de distance. Mais pour tout ce que quelqu'un tiendra dans ses mains—brochures, magazines, cartes de visite—300 PPI est non négociable.

Espaces colorimétriques : RGB contre CMJN expliqué

Le problème des espaces colorimétriques est là où je vois même des designers expérimentés faire des erreurs. Il ne s'agit pas seulement de convertir d'un à l'autre—il s'agit de comprendre pourquoi ces systèmes existent et comment ils diffèrent fondamentalement.

"Le paramètre DPI dans votre fichier image est une métadonnée que les navigateurs ignorent complètement—ce qui compte pour l'affichage web, ce sont les dimensions en pixels, point final."

RGB (Rouge, Vert, Bleu) est un modèle de couleur additive. Les écrans émettent de la lumière, et lorsque vous combinez la lumière rouge, verte et bleue à pleine intensité, vous obtenez du blanc. Pas de lumière équivaut à du noir. C'est ainsi que fonctionne chaque affichage numérique, de votre smartphone à votre moniteur 4K. Le RGB peut représenter environ 16,7 millions de couleurs (256 nuances chacune de rouge, vert et bleu), et il inclut certaines couleurs extrêmement vives, en particulier dans les gammes cyan et vert vif.

CMJN (Cyan, Magenta, Jaune, Noir) est un modèle de couleur soustractive. Les imprimantes partent d'un papier blanc et ajoutent des encres qui absorbent (soustraient) certaines longueurs d'onde de lumière. L'encre cyan absorbe la lumière rouge, le magenta absorbe le vert, et le jaune absorbe le bleu. En théorie, la combinaison des trois devrait créer du noir, mais en pratique, vous obtenez un marron boueux, c'est pourquoi nous ajoutons un vrai noir (le "K") comme quatrième encre.

Voici le problème critique : le CMJN a une gamme de couleurs plus petite que le RGB. Ces magnifiques bleus électriques et verts vibrants que vous voyez à l'écran ? Beaucoup d'entre eux ne peuvent tout simplement pas être reproduits avec des encres CMJN. Lorsque vous convertissez une image RGB en CMJN, les couleurs changent—parfois de manière spectaculaire. Ce vert lime vif pourrait devenir un ton plus terne et plus olive. Ce bleu électrique pourrait devenir légèrement violet.

J'ai appris cette leçon tôt dans ma carrière en concevant un logo pour une startup technologique. Le client adorait le cyan-bleu vibrant que j'avais choisi—il avait l'air parfait à l'écran. Lorsque les cartes de visite sont arrivées, la couleur était visiblement plus terne et légèrement grise. L'imprimeur n'avait rien fait de mal ; cette couleur RGB n'existait tout simplement pas dans l'espace CMJN. Maintenant, je conçois toujours en CMJN dès le départ pour tout projet d'impression, ou au minimum, je convertis tôt et montre aux clients une épreuve douce pour éviter les surprises.

Pour un travail web, utilisez toujours le RGB. C'est l'espace colorimétrique natif pour les écrans, les tailles de fichiers sont plus petites, et vous avez accès à l'ensemble de la gamme de couleurs affichables. Pour l'impression, convertissez en CMJN avant d'envoyer les fichiers à votre imprimeur, et utilisez un moniteur calibré ou demandez une épreuve physique pour voir comment les couleurs apparaîtront réellement. Certains imprimeurs préfèrent faire la conversion eux-mêmes, mais je demande toujours d'abord et fournis des fichiers RGB avec des profils de couleur intégrés si c'est leur flux de travail.

Une chose de plus : ne convertissez jamais plusieurs fois entre RGB et CMJN. Chaque conversion entraîne une perte d'information et un changement de couleur. Apportez vos modifications en RGB, puis faites une unique conversion finale en CMJN pour l'impression. Et gardez toujours vos fichiers RGB d'origine comme maîtres.

Formats de fichiers : choisir le bon conteneur

Le choix du format de fichier ne concerne pas seulement le logiciel que vous utilisez—il s'agit de comprendre la compression, le support des couleurs et le cas d'utilisation. J'ai vu des projets échouer parce que quelqu'un a utilisé un JPEG pour un logo ou un TIFF pour un site web, alors assurons-nous de bien faire cela.

Pour les images web, vos formats principaux sont JPEG, PNG, WebP et SVG. Le JPEG utilise une compression avec perte, ce qui signifie qu'il supprime des données pour réduire la taille de fichier. Il est parfait pour les photographies où une légère perte de qualité est imperceptible, et vous pouvez généralement compresser une photo de 60 à 80 % sans dégradation visible. J'exporte habituellement des JPEG web à 60-75 % de qualité, ce qui équilibre magnifiquement taille de fichier et qualité visuelle. Une photo de caméra de 5 Mo pourrait devenir 200-400 Ko—parfait pour des chargements de page rapides.

Le PNG utilise une compression sans perte et prend en charge la transparence, ce qui le rend idéal pour les logos, les graphiques avec texte, et toute image où vous avez besoin de bords nets ou de fonds transparents. Le PNG-8 prend en charge 256 couleurs et est excellent pour des graphiques simples, tandis que le PNG-24 prend en charge des millions de couleurs. Le compromis est la taille de fichier—les PNG sont généralement de 3 à 5 fois plus grands que des JPEG équivalents. J'utilise le PNG pour tout ce qui a besoin de transparence ou lorsque j'ai besoin d'une netteté pixel parfaite, comme des éléments d'interface ou des infographies avec texte.

Le WebP est un format moderne qui offre une compression avec et sans perte, une prise en charge de la transparence, et des tailles de fichiers 25-35 % plus petites que les JPEG à qualité équivalente. Le support des navigateurs est maintenant excellent (plus de 95 % des utilisateurs), et j'ai commencé à utiliser le WebP comme mon format par défaut pour de nouveaux projets, avec des solutions de rechange JPEG pour les anciens.