Bonjour très chère Makeuse,

Grâce au podcast de la semaine dernière, tu sais quel genre d’images tu peux utiliser, c’est-à-dire :

• des images dont l’auteur a accepté de te céder les droits (gratuitement ou non d’ailleurs),
• et celles dont la qualité est suffisante pour représenter ton entreprise en toute cohérence.

Maintenant que tu as ces images il va bien falloir en faire quelque chose. Tu peux les poster telles quelles, c’est ce qu’il y a de plus simple. Sur les réseaux sociaux, ça ne risque pas de poser trop de problèmes. En revanche, si tu souhaites ajouter une image haute définition à ton site web, c’est un peu plus problématique. Une image trop lourde, c’est une page web trop lourde et donc un site qui mettra du temps à charger ; ce qui n’est apprécié, ni de tes visiteurs, ni de l’algorithme de Google.

Aujourd’hui nous allons donc reprendre la base de la base en termes d’images (poids, couleurs, taille) puis nous verrons comment les modifier (recadrer, ajouter du texte, ajouter des éléments graphiques).

Quelques notions essentielles à connaître quand on parle des images en ligne.

Le poids

Le poids des images s’exprime en octet. C’est une donnée très importante lorsque l’on communique visuellement sur le web car des images trop lourdes – comme je viens d’en parler en introduction – utilisent trop de bande passante et alourdissent la navigation.

Je ne vais pas faire un cours sur les équivalences (octet, kilo-octet, …), je vais simplement partager avec toi mon expérience personnelle :

• Une image qui sera utilisée sur la largeur d’une page web devra peser au maximum 150 ko
• Une image utilisée à l’intérieur d’une page en guise d’illustration devra peser au maximum 80ko.

Oui, mais comment faire pour alléger mes images ?

Réflexe n°1 : les redimensionner à la taille adaptée. En règle générale, la largeur du contenu d’une page web avoisine les 1080 px. Or, il y a de fortes chances qu’une image tout droit sortie de ton appareil photo ou d’une banque d’images soit – au moins – 4 fois plus grande ! Et, plus une image est grande, plus elle pèse. Élémentaire mon cher Watson.

Réflexe n°2 : choisir le bon format, .jpg, .png, nous allons en parler un tout petit plus loin.

Réflexe n°3 : la passer à la moulinette. J’exagère un peu, mais sache qu’il existe des sites supers pour optimiser le poids de tes images.

 Voici mon top 2 (oui je fais ma radine)

Format

Quand on parle de poids des images, on ne peut pas échapper à la notion de format.

Jpeg, Png, Svg, Tiff, Bmp, il existe de nombreux formats d’images, mais nous allons nous concentrer sur ceux que l’on utilise le plus sur le web et même surtout à ceux qui, là maintenant, peuvent t’être utile. Si par la suite tu développes un attrait irrésistible pour cette thématique, libre à toi de creuser 😊

Le format .JPG

Ce format est basé sur un algorithme (une méthode de calcul quoi) optimisé pour compresser une image, c’est-à-dire réduire son poids. Avec certains outils, on peut choisir le niveau de compression mais attention, plus une image est compressée, plus elle est abîmée : elle pixelise.

Autre information importante concernant le Jpg : il ne gère pas la transparence. Cela veut tout simplement dire qu’il ne sera pas possible de superposer deux images au format Jpg.

Le format PNG

Ce format a été créé comme une alternative non-propriétaire au format GIF. Ces 2 formats possèdent en commun la gestion de la transparence toutefois, le grand plus du .png réside dans le fait qu’il s’agit d’un format non destructif. Grâce à ses 9 niveaux de compression, il permet d’obtenir des images légères sans pour autant les abîmer.

Le PNG a un très bon rendu poids qualité pour les images possédant peu de couleurs.

Il existe 2 familles : le png8 qui permet d’utiliser 256 couleurs comme le .gif et le .png 24 qui permet d’utiliser 16,7 millions de couleurs comme le format .jpg

Le format GIF

Ce format, contrairement au JPG gère la transparence et il permet aussi de faire des animations, mais ça, il y a de fortes chances que tu dois déjà au courant tant on les utilise (que ce soit sur Facebook ou dans les stories Instagram). Et toujours contrairement au JPG , il ne dispose que de 256 couleurs au lieu de 16,7 millions ! La qualité des images dans ce format est donc toute relative.

Le format Webm

J’en parle surtout pour être à la page. C’est LE futur format d’image du web, cependant, tous les navigateurs ne le supportent pas encore, donc on va rester sur nos basiques (JPG PNG et GIF).

La taille

On l’a évoqué en filigrane dans les précédents points abordés : la taille des images est essentielle. Celle-ci s’exprime en pixel (ou px).

Si tu utilises une grande image (plus de 2000px) sur les réseaux sociaux, ces derniers la redimensionneront et probablement la compresseront automatiquement. Sur ton site web, c’est différent, l’idéal est de savoir la taille de l’emplacement souhaité et de redimensionner l’image à la taille souhaitée.

Et là, normalement, tu te demandes : comment savoir la taille de l’emplacement et comment redimensionner une image ? Concernant la première question, le voile va être vite levé. Il te suffit de regarder la petite vidéo ci-dessous.

Et puisque la question de savoir comment redimensionner une image se pose à nous, en avant pour la seconde partie : modifier facilement des images. Et nous allons commencer par utiliser un outil sous-estimé, un outil qui ne fera pas de toi une graphiste mais qui pourra te rendre de fiers services : Paint, oui oui, Paint.

Modifier facilement des images avec Paint

Redimensionner / Rogner sur Paint

Paint est disponible dans le dossier « Accessoires Windows » situé dans le menu démarrer dans la liste des programmes.

Je t’invite maintenant à regarder cette vidéo pour voir comment redimensionner une image.

Bluffant de simplicité n’est-ce pas ?

Nous allons rester sur Paint pour voir comment faire des petits ajouts de texte très simples.

Ajouter du texte sur Paint

Faire de jolis montages avec Canva

Et pout terminer ce tout petit tour d’horizon des possibilités de modification d’une images, nous allons monter d’un cran avec cet outil génial qu’est Canva.

Souvent vu comme un concurrent déloyal des graphistes, Canva est un outil en ligne très simple d’utilisation qui permet de personnaliser des compositions graphiques préexistantes très facilement. Je te montre ça dans la vidéo suivante.

Et c’est ainsi que s’achève cette petite synthèse des informations importantes pour commencer à modifier des images et illustrer ta communication sur le web. 

Dernier petit conseil pour la route, quand on débute, quand on tatonne, quand on hésite, le mieux c’est de jouer la carte de la sobriété.

J’espère que cet article aura su te renseigner et aura répondu à tes attentes. Si tu as des conseils à apporter aux autres Makeuses, n’hésite pas à laisser un petit commentaire.

A très vite,

Ceuline