Différences

Ci-dessous, les différences entre deux révisions de la page.

--- fr:optimiser_image_web [14 September 2016 à 06:50:08] – modification externe 127.0.0.1
+++ fr:optimiser_image_web [04 June 2026 à 09:06:45] (Version actuelle) – [Réduire encore plus avec le jpg] Francois A.
@@ Ligne 7: / Ligne 7: @@
   * Pour les petites images (vignettes, boutons, barres de décoration) il faut rester en dessous de 10ko. En général ces images font 1 ou 2 ko.
-On considère que pour un affichage toujours fluide, la somme des images d'une page devrait rester en dessous de 100ko (en fait, la page complète ne doit peser que 100 ko au max à charger). C'est une règle difficile à suivre quand on teste avec une connexion adsl de bonne qualité, on ne se rend pas compte que ça rame déjà pour certains.
+On considère que pour un affichage toujours fluide, la somme des images d'une page devrait rester en dessous de 100 ko (en fait, la page complète ne doit peser que 100 ko au max à charger). C'est une règle difficile à suivre quand on teste avec une connexion adsl de bonne qualité, on ne se rend pas compte que ça rame déjà pour certains.
 Mais comment y arriver ?
 ===== Jouer sur la taille en pixel =====
-Une image de 1200*700 pixels pèse plus lourd qu'une image de 800*600. Faire une image plus petite en hauteur et largeur est la façon la plus simple de réduire son poids.
+Une image de 1 200*700 pixels pèse plus lourd qu'une image de 800*600. Faire une image plus petite en hauteur et largeur est la façon la plus simple de réduire son poids.
 Sous [[http://www.framasoft.net/article1054.html|Gimp]], allez dans ''Image''/''Echelle et taille de l'image'', faites varier la largeur ou la hauteur, en laissant la chaîne sur le côté des valeurs (afin de garder le ratio).
@@ Ligne 30: / Ligne 30: @@
 ===== Réduire encore plus avec le jpg =====
-Sous Gimp, exportez en jpg, compressez à 55, puis dans les options avancées, cochez ''optimiser'', et faire varier le curseur de l'adoucissement. Toutes les autres options doivent être décochées. L'image perdra légèrement en netteté mais restera très lisible. Une [[kh>accueil/img/spad5.jpg|image de 1 299px*675px]], faisant 158ko à la base, a été ainsi amené à 86ko (sans changer sa taille en pixel).
+Sous Gimp, exportez en jpg, compressez à 55, puis dans les options avancées, cochez ''optimiser'', et faire varier le curseur de l'adoucissement. Toutes les autres options doivent être décochées. L'image perdra légèrement en netteté mais restera très lisible. Une [[kh>accueil/img/spad5.jpg|image de 1 299px*675px]], faisant 158 ko à la base, a été ainsi amené à 86 ko (sans changer sa taille en pixel).
+===== Utiliser des logiciels pour ça =====
+Il existe des logiciels avec des algorithmes de compressions assez efficaces. Une fois que vous avez accompli les actions au dessus, vous pouvez ajouter un coup de moulinette.
+  * [[https://imagify.io/]] n'est malheureusement pas libre et demande un enregistrement pour bénéficier de leurs services, avec une limitation dans le nombre d'images uploadés tant qu'on ne paie pas, mais... ils sont extrêmement efficaces.
+  * [[https://imageoptim.com/]] est open source... Mais uniquement sous Mac.
+  * Le script [[https://github.com/sapegin/picturebeaver]] fonctionne sous Windows.
+  * Sous Linux, nous manquons actuellement de solutions libres et d'une qualité finale équivalente à Imagify ; cependant, Imagemagick arrive à de bons résultats, parfois équivalent à Imagify (suivant les images).
+Voici une commande en console qui transforme tout un lot d'image en une version compressée :
+  for i in *.jpg ; do a="${i%%.*}" ; echo $a ; convert ./$i -resize 800x600  -strip -quality 50 $a"min.jpg" ; done
+Plus d'explications pour ceux qui n'ont pas l'habitude :
+  * ''for i in *.jpg'' : "pour tout ce qui se finit par .jpg" : changer le nom de l'extension si besoin.
+  * ''do a="${i%%.*}"'' : créé une variable du nom de l'image sans son extension.
+  * ''echo $a'' : affiche le nom de l'image, ce qui permet de suivre la progression du script.
+  * ''convert ./$i'' : va convertir chaque image suivant les paramètres qui suivent :
+    * ''-resize 800x600'' : redimensionner en 800x600 pixels, ce qui suffit la plupat du temps pour le web,
+    * ''-strip -quality 50'' : diminue la qualité de 50%. Si vous voyez trop d'artefact, restez à 70. Plus le nombre est petit, plus l'image sera compressée, au détriment de la qualité.
+    * ''$a"min.jpg"'' : le nom de l'image finale composé de son nom d'origine (variable ''$a'') suivi de ''min.jpg''. Cela indique aussi de convertir l'image en jpg.
 {{tag>Web Graphisme}}