HTML : Réduction du poids d’une image.

Base de connaissances

htmlpaint HTML – Retouche d’images.

punaize  Problème :

Comment réduire le poids des images utilisées pour les pages HTML de manière à réduire le temps de chargement.

punaize  Solution :

Le processus ci-après concerne Paint Shop Pro, mais il peut être transposé pour tout autre logiciel de retouche d’images. Il faut considérer au départ une image scannée type tirage papier, format 13 x 8.5 cm.

  • Réduire la résolution à 72 ppp qui est celle de l’écran du moniteur : Menu “Images” / “Redimensionner”.
  • Cocher ensuite la case “Taille réelle d’impression”.
  • “Résolution” mettre 72 à la place de la valeur existante et valider par OK.
  • Sauvegarder au format Jpeg par menu “Fichier” / “Enregistrer sous …” mais cliquer sur “Options”.
  • Mettre le taux de compression à “1” et valider par OK.
  • Enregistrer l’image par “OK”.

Cette première manipulation a sensiblement réduit le nombre d’octets sans dégrader la qualité de l’image.

  • Menu “Image”, sélectionner “Redimensionner”.
  • Cocher “Taille en pixels”.
  • “Largeur” mettre la valeur 1024 (ou autre correspondant à la définition du moniteur). La hauteur devrait se situer à 683 (si le rapport “largeur /hauteur” est coché). Valider par OK.
  • Enregistrer.
  • Ramener le taux de compression à 20 % pour réduire encore le poids : Menu “Image” / “Redimensionner”, cocher “Pourcentage de l’original”, mettre 20 % et valider par OK.
  • Enregistrer.

L’image devrait avoir 819 x 546 pixels pour environ 50 Ko. Elle conserve une bonne lisibilité sans trop de dégradations de teintes ou de netteté.

Pour l’incorporer dans une page HTML, ne pas contraindre l’image dans un cadre plus petit mais réduire sa taille au nombre de pixels voulus. Ceci aura pour effet de réduire encore son poids en Ko.

 

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Une souris et des hommes…partageons une même passion !