Comment augmenter la définition d’une image ?

Vous avez à coup sûr déjà été confronté au moins une fois à une image que vous vouliez utiliser mais dont la taille, trop petite, ne permettait pas de l’utiliser dans le format voulu sans avoir de pixelisation à outrance (l’image devient floue ou se pare du fameux effet « d’escalier » sur tous les contours).
Si vous n’avez pas la possibilité de changer pour des images mieux définie, voici deux solutions puissantes qui vous permettront peut-être de vous en sortir.

Doubler la définition de vos photos

Voici une astuce qui va ravir tous les photographes en herbes ou les plus pointus d’entre vous qui cherchent à avoir le maximum de détails dans leurs images : la superposition d’images.

Technique déjà utilisée en astrophotographie depuis belle lurette, la superposition d’images consiste à prendre plusieurs clichés de la même scène (avec le même cadrage) et à empiler les images les unes sur les autres juste avant de les fusionner. D’une image à une autre, tous les détails récurrents sont conservés et renforcés, tandis que tous les artefacts de compression, poussières et autre « bruit numérique » sont éliminés. Il en résulte une image unique, nettement améliorée par rapport à un équivalent « one shot ». Particulièrement utile lorsque l’on doit photographier des étoiles à des années lumières de la Terre !

Pour vous qui faites partie du commun des mortels, cela peut aussi avoir de l’intérêt si vous souhaitez imprimer vos photos ! Là où l’on ne prêtera pas attention à la définition d’une image vue sur le web, (parce que on aura de toute façon intérêt à la réduire pour alléger notre image) l’impression en 300 dpi sur du papier vous pardonnera moins des éventuels défauts de votre photo. Dans un cas comme celui-là, améliorer son image au préalable peut donc se justifier. Même si la différence n’est pas toujours flagrante entre une image normale et une image améliorée.

One shot simple à gauche, image améliorée à droite. La différence est ténue mais visible !

Les étapes à suivre (avec Photoshop) :

  • Au moment de la prise de vue : sélectionnez de préférence le format avec la meilleure qualité d’image possible parmi les choix possibles sur votre appareil photo (Sélectionnez le format RAW si proposé)
  • Prenez une bonne quinzaine de photos (rien que ça oui)
  • Importez vos images dans Photoshop (ou passez par Lightroom si vos photos sont en RAW, sélectionnez-les toutes et exportez-les en tant que calques vers Photoshop)
  • Sélectionnez toutes vos photos et pixélisez-les si nécessaire (clic droit sur une des images dans la fenêtre des calques puis « Pixéliser les calques)
  • Aller dans Edition > Alignement auto. des calques et sélectionnez le mode automatique par défaut. Validez.
  • Attention : cette opération peut prendre plusieurs minutes en fonction de la puissance de votre ordinateur. Photoshop doit en effet « comprendre » chacune de vos images pour les superposer au mieux. Un brin d’intelligence artificielle dans la machine on dirait… mais qui peut prendre un petit peu de temps.

De l’IA pour agrandir une image

Une interface simple et minimaliste.

En cherchant un outil qui me permettrait de pouvoir exploiter des photos transmises par des clients mais dont la résolution/définition laissait à désirer (c’est arrivé plus d’une fois… pour pas dire presque à chaque fois), je suis tombé sur une pépite : Let’s Enhance.

Cet outil petit-mais-costaud fait marcher son cerveau pour « comprendre » les images que vous lui donnerai à manger et vous en rendre de nouvelles, plus grandes et mieux définies. Je peux vous le dire; les résultats sont véritablement étonnants ! Meilleurs que des agrandissement faits sous Photoshop. J’ai été bluffé par l’efficacité de cet algorithme qui arrive à combler le manque d’informations d’une image et a recréer du pixel de manière, disons-le, intelligente.

Le mieux est encore de voir par vous-même ! Les 5 premières conversions sont gratuites, histoire de tester les rendus et la simplicité de l’outil. Il faudra ensuite s’acquitter de 9$ /mois pour augmenter 100 images ou bien 24$ pour passer à 300 images. Au-delà, vous pourrez demander une connexion sur mesure à leur API.

Bonus : le pixel Shifting

L’Olympus OM-D EM5 MarkII est doté d’un mode « Très haute résolution » qui sort des images de 40 Mpixels.

Tant qu’à parler d’augmentation de définition d’image, autant en profiter pour parler de certains appareils photo comme le Olympus OM-D MarkII ou le Pentax K-1 qui proposent une fonctionnalité très intéressante, dite de « pixel shifting ».

Cette fonctionnalité agit au moment de la prise de vue en déplaçant le capteur de l’appareil photo d’1 pixel ou plus à chaque shoot. L’appareil compilent ensuite les images capturées pour produire une image bien plus grande que la résolution native du capteur. C’est le même principe d’assemblage et de fusion d’images qui est ensuite appliqué pour « nettoyer » et renforcer les détails.

Avec une définition accrue, les images peuvent ainsi se permettre d’êtres agrandies, dépassant parfois les 50 Mpixels. Attention alors à la charge de travail qui demandera de disposer d’un ordinateur suffisamment puissant pour traiter autant d’informations, et au poids des fichiers en sortie qui vont devenir… conséquents.

NOTA BENE : c’est une fonctionnalité intéressante pour de la photographie de paysage ou du pack shot en studio mais pas pour de la photo d’action car cette technologie ne marche qu’avec un appareil posé sur trépied et des scènes figées !

Synthèse

A mesure que les nouvelles technologies s’ouvrent au grand public, il est de plus en plus possible d’obtenir des images de qualité professionnelle, ou du moins de « rattraper » des images dégradées. Jusqu’à un certain point, bien sûr, il n’y a pas de miracle.

Comment protéger ses images ?

Avec le partage à-tout-va des images sur le net, la question de la protection des images et de leur traçabilité passe souvent à la trappe. Si tant est que vous soyez préoccupé par ces questions, je fais le point ici sur les moyens de garantir la propriété, l'authenticité et la provenance d'une image.

Le Watermark : un tatouage numérique sur vos images

La bonne vieille signature en filigrane est toujours aussi efficace. Vous savez, ce sont ces inscriptions que l'on voit appliquées en transparence dans un coin de l'image ou sur toute la surface d'un visuel. Une méthode efficace largement utilisée par les banques d'images en ligne pour éviter toute utilisation d'image qui n'aurait pas été "achetée".

La plupart des logiciels d'édition photo vous propose cette option avant tout partage sur internet. Vous avez également des plateformes en ligne qui peuvent faire le job comme Watermark.ws ou Watermarquee.com, ou encore sous forme d'application à installer comme visualwatermark.com. Soit vous appliquez le marquage sur toute la surface de votre image (bourrin mais efficace), soit vous l'inscrivez dans un coin de celle-ci, une manière plus élégante mais peut-être plus risquée car vous n'empêcherez pas un recadrage de l'image qui puisse faire la nique au marquage.

Empêcher le clic droit "Enregistrer sous..."

Si vous disposez d'un site internet il est possible de rendre un peu plus ardu l'enregistrement de vos images. Avec un éditeur de site web comme Wix, vous pouvez cochez la case "empêcher le clic droit sur les images". Sur Wordpress il existe des plugins qui vous permettront de vous doter d'un telle fonction.

C'est moins évident avec les plateformes de partage telle que Dribbble ou autres réseaux sociaux, où ils n'existent pas forcément de telles options . Si vous avez votre galerie sur Flickr, le clic droit n'est pas autorisé par défaut. Mais si vous exposez publiquement vos images et travaux sur le web, vous vous exposez forcément à ce que d'une manière ou d'une autre (avec une simple capture d'écran par exemple) les internautes puissent utiliser votre image.

 

Les Métadonnées : la carte d'identité de vos images

Les métadonnées, que l'on identifiera aussi par les données "Exif" d'une photo, contiennent tout un tas d'informations sur vos images. Véritable "passeport" de vos images, elles peuvent recenser (lorsqu'elles sont renseignées bien-sûr) la provenance géographique de celles-ci mais aussi le nom de l'auteur, le modèle d'appareil photo qui a été utilisé, l'adresse d'un site internet, des commentaires de l'auteur ou encore le copyright !

Attention à ne pas les supprimer (si vous voulez les garder) en exportant vos images dans un format web ou en les passant dans la moulinette d'un ImageOptim qui peut potentiellement supprimer les métadonnées en allégeant vos images ! (Dans le cas d'ImageOptim, vous pouvez décocher cette option).

Limiter la résolution des images

Partant du principe que vous ne pourrez jamais complètement protéger vos images à moins de les couvrir de watermark (au détriment de la lisibilité nous l'avons vu), vous pouvez tout de même contenir les fuites d'images en limitant leurs tailles au strict nécessaire.

C'est une pratique de bon sens à laquelle il faut de toute façon se plier lorsque vous cherchez à optimiser un site web; alléger les images permet non seulement de gagner en vitesse de chargement (c'est même le paramètre N°1 qui "pèse" dans le temps de chargement d'une page), mais cela peut aussi être un moyen de limiter les dégâts en cas de "vol" d'image. En effet, abaisser la résolution (dimensions) et la définition (densité de pixels) d'une image limitera d'autant l'utilisation que l'on pourra en faire. Impossible d'obtenir une affiche 2m x 1m de qualité correcte avec une image de départ de 300 x 100 px. Le rendu serait plus que dégueulasse. Même d'un point de vue artistique. Une astuce toute bête, évidente même, mais qu'il convient de rappeler ici dans le thème.

De l’écologie dans le web ?

Et oui, l'écologie est partout et même dans le web on peut faire des efforts pour diminuer notre impact négatif sur notre environnement. Voici quelques pistes que j'ai recensé pour développer mieux.

Un site léger et optimisé pour moins de consommation

Outre de favoriser le référencement de votre site sur les moteurs de recherche, un temps de chargement rapide de celui-ci participe aussi à diminuer son empreinte énergétique. Car qui dit site léger qui se charge vite dit aussi moins de ressources mobilisées ! Au final ce sont des serveurs qui travaillent (et consomment) moins, et des batteries de smartphone qui vous disent merci !

Aussi, si vous ne le faites pas pour Google, faites-le pour la planète !

Un Dark mode pour les écrans (et les yeux)

En quoi un mode sombre peut-il participer à l'économie des ressources ? Grande tendance qui tend à se généraliser pour les sites web et les interfaces logicielles, le "mode sombre" a d'abord été pensé pour soulager les rétines de nos petits yeux fragiles accros aux écrans, surtout quand vient la nuit. C'est pour cela que l'on entend aussi parler de "night mode" pour désigner cette correspondance assombrie d'un affichage.

Mais l'autre intérêt que l'on peut relever d'une telle option et de permettre d'abaisser la consommation de certains écrans ; ceux basés sur une technologie AMOLED ou OLED.

Pourquoi ? Parce qu'avec ces types d'écrans c'est le rétro-éclairage qui est mis à contribution pour restituer des pixels sombres. Reconnus pour leur taux de contraste élevé et la profondeur du noir qu'ils affichent, les écrans Amoled (fabriqués par Samsung) et Oled (par LG) "éteignent" les pixels lorsque ceux-ci doivent afficher du noir. On comprend alors comment un mode sombre, qui joue de nuances de gris foncé et de noir, peut contribuer à prolonger la durée de vie des batteries et ainsi retarder le prochain rechargement de celles-ci.

Bémol : ceci ne concerne pas forcément tous les écrans mais uniquement ceux qui régulent dynamiquement leur rétro-éclairage. Cela représente tout de même la majorité des écrans de smartphones, tablettes et moniteurs PC d'aujourd'hui.

C'est une petite contribution, mais une contribution quand même !

Des typos "trouées"

Des typographies avec des trous dedans ? C'est quoi cette bizarrerie ? Ça ne parait pas commun et pourtant cela fait déjà pas mal de temps que ça existe dans le milieu de l'imprimerie. Invisibles à l’œil nu, de minuscules trous sont faits dans chaque lettre d'une phrase. Pourquoi ? Pour économiser des gouttelettes d'encre au tirage ! Ca parait bénin, mais les lettres ainsi "évidées" en partie peuvent faire économiser 5 à 10% d'encre à chaque impression. Quand il s'agit de tirer en grande quantité des magazines ou des journaux, on comprend bien l'intérêt d'utiliser des typos "trouées".

Dans le domaine du web il n'y a à priori aucun intérêt à faire appel à une telle pratique... sauf lorsque l'on prévoit un mode spécial pour l'impression d'une page web sur papier ! Eh oui, il est possible de créer littéralement une version spéciale de sa page web prévue pour l'impression, et comprenant alors l'utilisation de typos "gruyères".

Cependant, observer une telle optimisation de page web pour le mode impression est rarissime. Je pense personnellement qu'il doit y avoir moins de 0,5% des sites web du monde entier qui ont été développés à ce niveau de finition. Et encore, je suis généreux...

Mais c'est possible ! Et quand on est animé de velléités écologistes, tout est bon à prendre pour servir la cause.

Guide de style – l’identité de votre entreprise et de ses produits.

Petite définition : il s'agit d'un recueil contenant tous les éléments constituants de la personnalité d'une marque. Il permet de définir une charte graphique et des directives quant à l'utilisation de tel ou tel élément graphique. Il est en somme la notice technique et le gardien de tout ce qui touche à l'identité visuelle d'une entreprise et de ses produits.

Pourquoi créer un tel guide ?

Les intérêts sont multiples: aider tous les membres d'une équipe (et les partenaires) à identifier et utiliser les divers éléments graphiques qui composent l'esthétique d'une marque, mais aussi aider les clients à bien identifier celle-ci. Un guide de style permet de gagner du temps dans l'élaboration d'un projet et permet de faire respecter une identité graphique précise lors d'une communication.

Un guide de style porte bien son nom; il permet de faire respecter l'identité visuelle d'une marque et de ses produits. Et c'est une vraie base de données en interne (Design System) !

Composer son guide de style

Que va-t-on trouver à l'intérieur de ce fameux "guide" ? L'essentiel d'abord : le nom de votre marque (ou de vos marques si vous voulez les regrouper dans un seul guide), les logos relatifs à celle-ci et leur utilisation (on ne peut pas se permettre de faire n'importe quoi avec le logo d'une marque, il faut la respecter !), mais aussi les typographies utilisées et le référencement des couleurs employées.

 

Vous pouvez enrichir votre guide avec des exemples de mises en pages typiques et récurrentes (comme des en-têtes de documents ou des signatures mails), ou encore un listing des divers éléments graphiques que l'on retrouve ça et là dans vos supports de communication (design de boutons, icônes, personnage(s)-mascotte(s), illustrations diverses,...)

 

Ce n'est pas tout ! Un guide de style est aussi l'occasion de parler de l'historique d'une marque et de son "état d'esprit" général. Par exemple, chez Process Management Technology nous faisons une petite introduction en parlant de la vision "positive" que nous avons du développement des technologies et du parti-pris graphique qui en découle et qui affecte tous les produits de la société.

Pensez au support papier comme au web !

 

Synthèse

Pour résumer, on trouve dans un guide de style :

  • Le nom complet de la marque
  • Le(s) logo(s) et déclinaisons (version minimale, monochrome, etc...)
  • Les couleurs utilisées (avec leur code hex et/ou RGBA)
  • Les typographies employées (avec les variations de tailles et de graisses)
  • Les éléments graphiques récurrents (symboles, mascotte,...)
  • Les autres éléments graphiques (illustrations, icônes, boutons, ponctuations,...)
  • Des exemples de mise en page à suivre
  • Des détails sur le "mood" d'une marque et éventuellement son histoire

Pour chacune de ces sections vous pouvez apporter plus ou moins de détails, mais sachez que plus vous êtes précis et plus votre guide de style peut s'imposer comme un référent qui peut faire jurisprudence si vous constatez une mauvaise utilisation de votre logo, par exemple, sur le support visuel d'un partenaire ou lors d'un partage sur les réseaux sociaux.

L'autre intérêt du guide de style, nous l'avons vu, est d'attester à tout un chacun du sérieux d'une marque et de son projet en en cernant tous les aspects visuels (voire même spirituel).

Enfin, le guide de style est surtout utile en interne comme base commune de référence pour tout ce qui touche au visuel. On s'en servira alors comme d'une véritable base de données !

Si ce n'était pas déjà le cas, vous êtes maintenant convaincu de l'utilité de créer votre guide de style. Je vous donne en exemple celui que j'ai réalisé pour les solutions Optimiser comme, à mon humble avis, bonne base de travail ! 🙂

 

Vous êtes unique, votre marque aussi ! Dites-le avec un guide !

Les outils (gratuits) pour trouver les bonnes couleurs

Que vous soyez un(e) Chef(fe) de projet qui souhaite indiquer à son Designer une couleur de laquelle partir pour la création d'un logo ou d'une charte graphique par exemple, ou bien que vous soyez vous-même Designer comme moi, vous apprécierez d'avoir un moyen rapide de trouver LA couleur que vous recherchez. Bonne nouvelle : internet regorge d'outils variés dédiés à cela. Voici une sélection d'outils que j'utilise personnellement :

Picular - le Google de la couleur

capture d'écran picular

 

Un moteur de recherche qui vous propose pêle-mêle tout un tas de variantes de la couleur recherchée (tapez simplement "bleu" ou "rouge" par exemple dans le champ de recherche). Efficace lorsque vous n'avez pas une idée précise de la teinte de couleur que vous recherchez ! On ne peut qu'apprécier la simplicité de l'outil. Essayez ici => https://picular.co

Random Color - pour choisir une couleur au hasard

image rosace random color

 

Joliment présenté sous forme d'une fleur, cet outil vous permet de générer de manière aléatoire une couleur et ses déclinaisons. Intéressant si vous voulez trouver une couleur à laquelle vous n'auriez peut-être pas pensé ! Petite astuce : si vous connaissez déjà le code Hex de votre couleur, vous pouvez l'inscrire dans l'url du site (vous voyez ? Après "colors"), taper sur Entrée et ainsi visualiser les 14 nuances de votre couleur. A tester ici => https://hexcolor.co/random-colors#e9a8b0

Eva Design System - pour les déclinaisons en nuances

capture d'écran eva design

 

Un outil en ligne très pratique qui me permet d'avoir rapidement les déclinaisons plus foncées et plus claires de ma couleur de départ. J'apprécie le mode "nuit" (en haut à droite) qui me permet de voir comment la couleur "réagit" sur un fond sombre ainsi que la fonction d'exportation qui me génère une image jpeg de ma palette (comme une capture d'écran en somme). Le site => https://colors.eva.design

Image Color Code Picker - trouver les couleurs à partir d'une image

capture d'écran color picker

 

Très utile car bien souvent il est demandé de retrouver la référence d'une couleur en partant d'un logo ou d'une image, ou encore d'harmoniser une charte graphique avec des visuels. Image Color Picker est un outil 2-en-1 qui va vous permettre de télécharger votre image et d'en extraire toutes les couleurs, soit au clic en pointant sur la zone de l'image qui vous intéresse, soit en laissant faire l'analyse de votre image par le moteur du site qui va vous sortir alors la palette de couleurs dominantes. Top ! https://www.colorcodepicker.com

Design Seed - pour des palettes de couleurs

capture d'écran design feed

 

Ce que je reproche souvent aux sites qui proposent des presets (palettes) de couleurs déjà faits c'est de ne pas donner la bonne proportion de chaque couleur, car toutes les couleurs d'une palette ne s'utilisent pas à quantité égale ! L' avantage de Design Seed est de donner à voir des nuanciers accompagnés d'une image à chaque fois. Mieux qu'à Leroy Merlin ! Cela permet de se rendre compte des bons accords de couleurs et du dosage de celles-ci "en situation". On apprécie le mode de recherche par couleur, par "saison" ou encore par "collection". https://www.design-seeds.com

Adobe Color CC - pour plus de finesse

capture d'écran adobe color cc

 

Plus pointu et plus précis que les autres références citées ici, l'Adobe Color offre différentes approches pour sélectionner THE couleur et permet d'agir sur différents canaux (teinte, luminance, saturation). Comme la majorité des graphistes (je dirais 99,9%) utilise la suite Adobe, c'est certainement le premier outil à utiliser en tant que professionnel, d'autant plus que vous pouvez enregistrer vos couleurs dans votre compte et les retrouver dans chaque logiciel de la marque. https://color.adobe.com/fr/create/color-wheel/

Hexcolor - La boite à outil ultime du coloriste

capture d'écran hexcolor

 

Il fallait bien que je parle de cette plateforme aux multiples outils qui regroupe (entre autre) : un générateur de palette, un Color Picker, le référencement des couleurs Material Design (comprenez les couleurs de Google), et un générateur de dégradé. Toujours utile à avoir sous la main. C'est par ici => https://hexcolor.co