Partager

PrintFriendly

Print Friendly, PDF & Email

Réduire taille & poids des images

Créé le 20/10/2012
Dernière mise à jour : 27/07/2017

 

Ceci est très important pour économiser l’espace utilisé sur votre serveur et donc pour améliorer les performances de votre site.

C’est également valable pour les images à insérer dans des documents Word, PDF, etc.

 

En résumé, il y a 4 choses à faire :

  1. S’assurer que les noms de fichiers respectent les bonnes conventions
  2. Vérifier que le format (extension) et la résolution de vos images soient économiques. Au besoin, les modifier.
  3. Éviter que les dimensions de vos images soient beaucoup plus grandes que ce qui devra être affiché.
  4. Compresser en plus vos images, surtout si votre site est destiné à en contenir un certain nombre (plus de 100 ?).

 

 

 

 

0. Question préalable : faut-il conserver les originaux ?

Si votre disque dur (interne ou externe) est d’un capacité suffisante, il est préférable de conserver les originaux de vos images. Vous pourriez en avoir besoin pour des impressions sur papier, telles affiches, folders, etc.

Autre raison : un accident est vite arrivé. Si vous faites une erreur et, par exemple, réduisez trop certaines images, il vaut mieux avoir les originaux sous la main pour pouvoir recommencer.

 

1. Noms de fichiers

Ceci ne modifiera en rien le poids de vos images mais il est néanmoins important de respecter certaines règles, pour éviter des bugs d’affichage sur les sites.

Info :
Les informaticiens déplorent d’ailleurs que les systèmes d’exploitation et de nombreuses applications acceptent tous les caractères pour les noms de fichiers car cette absence de contrainte génère des problèmes fréquents.

Caractères acceptés :

a à z
A à Z
0 à 9
– _ ( )
espace

C’est tout ! Pas de lettres accentuées, cédilles, etc, ni points, apostrophes ou autres signes de ponctuation.

 

N.B.
Pour renommer et numéroter tout un groupe de fichiers, voir mon tutoriel Petits trucs basiques

 

Conseil :
Qu’il s’agisse d’images, de fichiers Word ou autres, prenez l’habitude d’appliquer ces règles à tous les fichiers que vous placez ou créez sur votre disque dur. C’est une bonne pratique !

 

 

2. Format de fichier (extension) et Résolution

Format : veillez à ce que les images soient au format
JPG (ou JPEG) (format le plus habituel)
éventuellement PNG (images avec parties transparentes)
et GIF (animations).
Ces formats sont les plus légers tout en préservant une bonne qualité.

Absolument éviter les formats BMP et TIFF (très lourds et réservés aux impressions de haute qualité sur papier).

 

Résolution : pour un site, la résolution idéale est de 96 PPP (ou DPI) (alors que pour une impression de qualité sur papier, 300 PPP (ou DPI) est conseillé)

Pour la vérifier la résolution d’une image JPG sur votre PC,

  • CLIQUEZ DROIT sur une image / Propriété / Détails
    Là, vous trouverez la résolution des images JPG.
    Pour les images PNG et GIF, il faut vérifier la résolution via un logiciel de dessin.

 

Pour modifier le format et la résolution de fichier d’un groupe d’images, tout logiciel d’infographie (PhotoShop, GIMP ou autre) fera l’affaire

N.B. Avec Paint (Windows), on ne peut travailler qu’une image à la fois ! (pas très pratique). Par contre, Paint sauvera toujours vos images en résolution 96 PPP (DPI), même si la résolution d’origine est différente. C’est automatique.

 

Sinon, logiciel de conversion suggéré pour Windows (gratuit, facile et efficace) : Best Free Image Converter

  • Cliquer Add source files pour ouvrir un groupe d’images
  • Cocher les images
  • Sous l’onglet General, spécifier un dossier de destination.  Si dossier source = dossier de destination, pour remplacer les images originales, cocher Remplace, sinon cocher « Auto Rename«
  • Choisissez le bon format (JPG en général)
  • Cochez le PPP (DPI) et corrigez-le au besoin (il doit être à 96)
  • Qualité : choisissez 90 si vous ne compressez pas vos images par après (voir point 4) ou éventuellement 100 si, après, vous compressez vos images.
  • Si en plus vous voulez modifier les dimensions, cliquez l’onglet Resize et là, voir point suivant (3. Dimensions des images)
  • Quand tout est fait, bouton Start convert (en haut)

N.B. Avec cet outil, vous pouvez faire en même temps cette opération et celle qui suit : modifier les dimensions

Procédure ou logiciel pour Mac : je ne sais pas…

 

 

3. Dimensions des images

La plupart des outils de publication (Word, PDF, blogs, WordPress, etc) permettent de réduire l’affichage de grandes images, après leur importation dans l’application. Sauf si la réduction est peu importante, ce n’est pas une bonne idée car seul l’affichage sera réduit, pas l’image stockée. Cela surchargera inutilement vos documents et/ou votre serveur. De plus, réduire ainsi les images à l’affichage abîmera leur apparence.

Il est donc vivement conseillé de réduire les dimensions des grandes images avant de les télécharger dans votre application.

Dimensions maximum conseillées pour les images destinées à des sites web :

Largeur max : 900 pixels

Hauteur max : 600 pixels

N.B. Si vous avez absolument besoin que vos visiteurs puissent télécharger certaines de vos images originales en grande dimension, tâchez néanmoins de ne pas dépasser 2000 X 2000 pixels. Mais le mieux est que, pour obtenir de grandes images, la personne vous contacte.

 

Pour modifier les dimensions, tout logiciel de dessin ou d’infographie (Paint, PhotoShop, Gimp ou autre) fera l’affaire.

N.B. Avec Paint (Windows), on ne peut travailler qu’une image à la foi ! (pas très pratique)

 

Sinon, logiciel suggéré pour Windows (gratuit, facile et efficace) : toujours Best Free Image Converter

  • Pour ouvrir les images dans le logiciel, le configurer et vous occuper de l’onglet “General” : voir la procédure décrite au point précédant (2. Formats de fichiers et Résolution).
  • Sous l’onglet Resize, cocher Resize et choisir Input Value
  • Cocher Fit et entrer comme valeurs (en pixels) les largeur et hauteur maximum
    Conseil pour des images destinées à un site web : largeur max 900 px, hauteur max 600px
    Exception éventuelle : image à afficher en plain écran (page d’accueil d’un multisite par exemple). Là, largeur max 2000px, hauteur max 1200 px
  • Bouton Start convert (en haut)

Procédure pour Mac : voir ICI (lien possiblement obsolète en 2017)

 

4. Compression

Surtout si vos documents ou votre site contiennent beaucoup d’images, notamment des galeries bien fournies, il est plus qu’utile d’en diminuer encore le poids en les compressant . Gain de poids : environ 50% par image !!!

EXCEPTION : ne compressez pas un image qui est un graphisme en lignes claires et en à-plat, telle un logo, ni une image contenant du texte car là, la compression nuira à la qualité de l’image. Par contre, sur des photos ou des graphismes complexes contenant des dégradés, etc, il est pratiquement impossible de discerner la compression.

 

Logiciel conseillé pour Windows (gratuit, efficace, facile et peu de perte de qualité de l’image) : FILEminimizer Pictures

Des conseils pour bien configurer et utiliser FILEminimizer Pictures ? Voir  ci-dessous (Annexe)

 

N.B.
Pour des fichiers au format PNG, mieux vaut utiliser le logiciel PNGGauntlet. Beaucoup plus performant que FILEminimizer pour les PNG.

Logiciel conseillé pour Mac : JPEGmin Lite

 

 

ANNEXE

Configurer et utiliser FILEminimizer Pictures

(C’est super simple !)
Pour télécharger FILEminimizer Pictures, cliquer ICI

 

1) Configurer

  • Cliquez sur Configuration

FILEminimizer-config

 

  • Voici la configuration conseillée sous l’onglet Paramètres pour les images
  • Les autres onglets (dont le dossier de destination) sont à configurer à votre convenance

FILEminimizer-config-images

 

2) Utiliser

  • Cliquer sur un des boutons Ouvrir des fichiers et sélectionner des images à partir de votre ordinateur
  • Cliquer sur un des boutons Optimiser les fichiers

Et voilà, c’est fait ! :thumbsup: