Préparer ses images

Avant d’envoyer des images sur le site, il faut les préparer : les recadrer et les redimensionner. Mais ce n’est pas forcément compliqué ! Voici plusieurs solutions : à vous de choisir en fonction de vos connaissances informatiques.

Pourquoi préparer ses images ?

Recadrer

Sur Internet, la place est comptée ! Votre image ne peut pas s’afficher dans une grande largeur pour être bien visible, donc il faut la rendre la plus efficace possible. Cela passe par le recadrage de l’image originale : enlevez sur les côtés ce qui n’est pas complètement indispensable pour bien zoomer sur la partie la plus importante de l’image, enlevez en haut et en bas les zones plus ou moins vides (genre plafonds, sols, pieds…).

Redimensionner

Il est important de préparer ses images pour qu’elles aient une une taille adaptée à l’affichage du site. Il faut redimensionner pour éviter de surcharger le site avec des images trop grandes, qui mettent beaucoup de temps pour vous à charger, surchargent le serveur du site et mettent aussi du temps à charger pour l’internaute quand il affiche votre page.

Unités : en général on mesure en pixels (et non en cm) ! Il faut que votre logiciel vous permette de faire vos réglages de taille d’image en pixels.

Définition : cela indique la finesse de détail de l’image. Les images mises sur Internet font 72 ppp (= dpi) c’est à dire 72 points par pouce, car c’est la définition de la plupart des écrans. C’est en général le cas de vos images si elles viennent de votre appareil photo. Si ce sont des images réalisées par un scanner, régler (si c’est possible) le scanner sur cette définition de 72 ppp ou modifier la définition ensuite dans votre logiciel de retouche d’images. Par exemple, si vous chargez sur le site une image à 300 ppp de définition, en fait vous chargez beaucoup plus d’information d’image (5 x plus) qui ne seront pas affichées : c’est du temps perdu pour vous et surtout pour l’internaute.

Dimensions : la largeur de nos articles est en général de 620 pixels (avec une colonne à droite)… donc c’est la largeur de vos images si vous voulez qu’elles soient en pleine largeur. Si vous voulez que votre image ne fasse qu’une partie de la page… calculez ! En gros 300 pixels pour la moitié de la largeur d’article, environ 200 pixels pour un portrait…

Préparer avant ou après téléchargement ?

Avant : il est préférable de le faire avant, car la taille des images ayant été réduites, elles seront moins longues à envoyer sur le site. Pour faire cela, vous trouverez si-dessous plusieurs solutions avec des logiciels ou sur Internet.

Après : si l’image a déjà été chargée sur le site avec une trop grande taille, le site permet encore de recadrer et de redimensionner ! Voyez comment faire en partie B de cet article.

 

Format des images

Il ne faut pas utiliser n’importe quel formats d’images sur le site.

Utiliser :

  • JPG : pour les photos. Si votre logiciel permet de régler le taux de compression du format JPG, choisissez un réglage entre 75% et 90%. Plus le % est élevé, plus le poids de l’image sera élevé et l’image sera de meilleure qualité.
  • PNG : pour les logos, dessins, et éventuellement aussi pour les photos.

En bref : vous pouvez tout mettre en JPG et en PNG.

Ne pas utiliser :

  • BMP et TIFF : ces formats produisent des images trop lourdes pour le web
  • GIF : à éviter

 


 

A / Préparer AVANT le téléchargement

De nombreux logiciels de retouche d’images permettent de faire ces opérations.

  • Photoshop est la référence professionnelle, mais est cher et réservé aux personnes ayant de l’expérience dans la notion de traitement de l’image. Si ce n’est pas votre cas, nous vous conseillons ci-dessous des solutions gratuites. D’autres logiciels intermédiaires et payant existent. Si vous en êtes équipé, c’est parfait ! Gimp est une sorte de Photoshop gratuit… mais compliqué pour un utilisateur lambda : à réserver aux passionnés !
  • XnView : pour ceux qui souhaitent pas mal de fonctions (gratuit).
  • Paint : pour ceux qui veulent quelque chose de très simple (VOIR CI-DESSOUS). Il est installé par défaut sur tous les ordinateurs PC équipés de Windows (‘Tous les programmes’, ‘Accessoires’).
  • Des logiciels gratuits sont parfois aussi fournis avec un appareil photo numérique ou une imprimante. Vérifiez qu’ils comportent les bonnes fonctions et non des fonctions trop simplifiées du genre : réduire en taille « moyenne » ou « grande » (pas en pixels) !
  • Un traitement tout automatique avec Picture Resizer ! Ce tout petit logiciel est entièrement automatique et vous permet en un clic de redimensionner toutes vos photos à la même largeur (VOIR CI-DESSOUS).
  • Une autre alternative est fournie par Internet : des sites proposent de faire ces opérations en ligne et gratuitement. Nous vous suggérons plus bas http://webresizer.com (VOIR CI-DESSOUS).

Avec Paint

Si vous êtes sur un PC avec Windows, le logiciel est gratuitement fourni dans les accessoires de Windows. Ouvrez le logiciel.

Faites un clic droit sur l’image que vous souhaitez redimensionner, et sélectionnez ‘Paint’. Le programme s’ouvre et il suffit alors de cliquer sur le bouton ‘Redimensionner’ pour donner à l’image la taille que l’on souhaite. Veillez a toujours cocher ‘Conserver les proportions que l’image’ afin qu’elle ne soit pas déformée après cette manipulation.

paint fini

Inscrivez 620 dans la case « Horizontal ». La valeur inscrite dans la case « Vertical » ne sera pas 349, mais il faut laisser la valeur qui s’inscrit par défaut, sinon votre image sera déformée. Il n’est pas nécessaire d’avoir une valeur supérieure à 620 en Horizontal car le site ne s’élargit pas à l’infini. Au contraire il est possible d’avoir une valeur supérieur à 349 en vertical pour l’affichage d’affiche dans un article par exemple.

Il est également possible de faire pivoter l’image si elle n’est pas dans le bon sens par défaut, en utilisant le bouton ‘Faire pivoter’.

Avec Picture Resizer

Téléchargez ce minuscule logiciel dans votre ordinateur : cliquez ici ! Placez-le dans un dossier ou sur le bureau de votre ordinateur. Il n’a pas besoin d’être installé : il ne comporte qu’un fichier.

Il suffit ensuite de déplacer des images et de les poser sur l’icône du logiciel pour lancer le travail ! Vous pouvez le faire dans l’Explorateur Windows, ou à partir d’un logiciel d’images. Sélectionner l’image ou le groupe d’images à traiter, cliquez-glissez vers l’icône du logiciel et lâchez votre clic quand votre curseur est bien au-dessus.

Les images sont dupliquées et automatiquement redimensionnées à 620 pixels de large (ce qui correspond à la largeur des articles sur le site quand il y a une colonne à côté), en gardant la proportion de leur hauteur, et la netteté est accentuée afin de compenser ce redimensionnement. Les images sont en Jpeg à 75% de compression.

Les images sont placées au même endroit que l’image ou les images d’origines, qui ne sont pas supprimées, et sont renommées avec le même nom de fichier que l’original suivi de « -W620 ».

Avec WebResizer

Rendez-vous sur http://webresizer.com.

Cliquez sur ‘Parcourir’ pour désigner l’image dans votre ordinateur, puis sur ‘upload image’ pour télécharger l’image sur le site.

160518_Aide We Resizer_1

Redimensionner

L’image est redimensionnée par défaut à 400 pixels de large. Mais nous préférons régler nos images à 620 pixels en largeur – largeur de nos articles –, donc il faut saisir ‘620’ sous l’image dans le champs ‘New size’ en laissant coché la case ronde ‘width’.

Pour ceux que le veulent, d’autres réglages de l’image sont possible :

  • rotate = rotation : pour tourner la photo d’un quart ou d’un demi tour..
  • sharpen = netteté : réglages par défaut correct
  • image quality = qualité d’image : réglages par défaut correct
  • tint = teinte : changer la couleur dominante de l’image.
  • exposure = exposition : pour éclaircir (de 0 à 1000) ou assombrir (de 0 à – 100). Mettre 10 ou 20 par exemple pour éclaircir une photo un peu sombre.
  • contrast = contraste : accentue les zones claires et les sombres (de 0 à 100). Mettre 10 ou 20 pour accentuer le contraste et rendre plus percutant une photo.
  • colour saturation = saturation des couleurs : permet de colorer un peu plus une photo un peu grise (de -100 à 1000). Mettre 10 par exemple pour accentuer un peu les couleurs.

160518_Aide We Resizer_2

Une fois vos réglages faits, cliquez sur le bouton ‘apply changes’ et regardez ce que cela donne. Vous pouvez modifier vos réglages plusieurs fois. Le bouton ‘Start over’ permet d’annuler vos réglages.

Si vous voulez récupérer votre image telle quelle, cliquez sur le lien sous l’image ‘download this image’

Recadrer

Aide We Resizer

Si vous souhaitez aussi recadrer l’image, cliquez sur ‘Crop image’ au dessus de votre image.

Une zone de sélection apparait sur l’image. Utilisez les poignées des côtés et des coins pour la redimensionner.

Pour une image qui sert d’image à la une d’article, régler sur 349 pixels de haut (sur 620 de large).

160518_Aide We Resizer_4

Validez votre recadrage avec ‘apply changes’, sous l’image, puis récupérez là avec le lien sous l’image ‘download this image’.


 

B / Préparer APRÈS le téléchargement

Votre image est déjà chargée dans la Bibliothèque des médias du site, mais elle est inutilement trop grande par rapport à l’utilisation que vous en faites sur le site ? Vous pouvez encore la recadrer (enlever des parties inutiles) et/ou la redimensionner (réduire sa taille).

Vous pouvez le faire à partir de la Bibliothèque des médias en cliquant dans le menu noir de gauche sur : Médias / Bibliothèque. Cliquez sur l’image voulue pour l’afficher avec ses informations. Puis cliquez sur le bouton « Modifier » sous l’image elle-même.

170207_Préparer ses images_1

Vous pouvez aussi le faire à partir de l’article où se trouve l’image. Cliquez sur l’image, puis sur l’icône crayon dans la petite barre grise qui apparait.

170207_Préparer ses images_2

Puis cliquez sur le bouton « Modifier l’original » qui se situe sous l’image.

170207_Préparer ses images_3

Suite à ces deux façon de faire, vous accédez au module permettant de rectifier votre image.

Recadrer

1/ Avec la souris, cliquez et glissez pour dessiner sur l’image la zone rectangle que vous souhaitez conserver : ce qui sera en dehors de cette zone sera coupé. Vous pouvez recommencer plusieurs fois pour trouver le bon cadrage.

2/ Vous pouvez consulter sur la droite les dimensions de votre sélection, en pixels. Attention de ne pas réduire trop votre image et de descendre en dessous de la taille que vous souhaitiez. Exemple : vous vouliez une image qui fait la pleine largeur de votre article, donc 620 pixels. Ne recadrez donc pas l’image plus petit que 620 px.

Vous pouvez aussi utiliser cette zone pour imposer une dimension à votre image, par exemple en tapant 620 pour la largeur (1er chiffre de « Sélection »). Ou choisir une proportion de taille d’image spéciale.

Vous pouvez déplacer à volonté avec la souris votre rectangle de sélection sur l’image jusqu’à trouver la bon cadrage.

3/ Une fois la sélection faite, cliquez sur le 1er bouton au dessus de l’image : « Recadrer ». Puis cliquez sur le bouton bleu sous l’image « Enregistrer » pour valider… ou annulez.

170207_Préparer ses images_4

Redimensionner

 

Enregistrer

Enregistrer

Enregistrer