Préparer ses images au format web

par

Il faut préparer ses images pour diminuer leur poids, améliorer leur lisibilité à l’écran et les adapter à votre site.

Pour qu’une photo s’affiche rapidement sur Internet, son poids doit être inférieur à 100 kilo-octets.

6 étapes pour préparer ses images au format web

Quelque soit le service ou logiciel utilisé, suivez ces 6 étapes : 

  1. Redimensionnez l’image pour réduire son poids et l’adapter au modèle du site (voir les dimensions à respecter)
  2. Améliorez la qualité visuelle des couleurs de l’image
  3. Améliorez la saturation
  4. Améliorez la luminosité
  5. Enregistrez le fichier pour le web en JPEG, poids maximum : 100 Ko
  6. Renommez le fichier avec ces 3 règles afin d’éviter les bugs d’affichage :
    1. Pas d’accent, ni de caractères accentués, ni d’espaces ou de majuscules dans le nom du fichier
    2. Utilisez le tiret-court-pour-separer-les-mots-et-favoriser-le-référencement
    3. Indiquez les dimensions des images en fin de nom de fichier pour les retrouver facilement dans la bibliothèque
      • Exemple : enfants-kermesse-960×250.jpg

Attention

La capacité de stockage de votre site est limitée à 5 Go.
Pensez à régulièrement supprimer les fichiers en double ou inutilisés sur la médiathèque.
Plutôt que de recharger une nouvelle image ou un nouveau PDF, remplacez le fichier en écrasant sa version précédente (voir article Ajouter un média )

Outils pour préparer ses photos

Logiciels gratuits de retouche photos

  • XNViewMP    https://www.xnview.com/fr/      PC et Mac
  • Aperçu                                                                         Mac
  • Photos                                                                         PC, Windows 10
  • Paint                                                                            PC
  • Microsoft Office Picture Manager                     PC, Office version < 2010

Logiciels gratuits de retouche photos par lot (en nombre)

Services de retouche photo en ligne

Webresizer       webresizer.com   Gratuit

Picmonkey       https://www.picmonkey.com   Gratuit pendant 7 jours

Mode d’emploi pour mettre ses photos au format web avec Picmonkey

Activez Flash sur votre navigateur

  1. Edit
  2. Choose an image to edit > Computer

  3. Sélectionnez la photo sur votre disque dur
  4. 4e image du menu Exposure > Auto adjust > Apply : appliquez
  5. 5e image du menu Color > Auto adjust > Apply : appliquez
  6. 1ère image du menu Crop pour les images carrées : rognez > Déplacez la zone de sélection> augmentez sa hauteur avec la souris pour former un carré exact
  7. Choisissez une dimension pour la largeur ou la hauteur
  8. Apply : appliquez
  9. 6e image du menu Resize  > Choisissez une dimension pour la largeur ou la hauteur, par exemple 400 X 400 > Cochez toujours Keep proportions > Apply : appliquez
  10. En haut Save renommez l’image pour sauvegarder l’image sur votre disque dur
  11. Sign up > sign up with an email


Pour les images à retailler comme les images à la Une :

  1. Resize à la bonne largeur
  2.  Scrop à la bonne hauteur

Services de mise en page de visuels pour réseaux sociaux ou de création d’affiches et de tracts

Canva                     https://www.canva.com              Gratuit