Logo Khaganat

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
fr:optimiser_image_web [2014/08/10 21:16] – modification externe 127.0.0.1fr:optimiser_image_web [2021/12/03 18:19] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 1:
 ====== Optimiser une image pour le web ====== ====== Optimiser une image pour le web ======
-Même si la plupart des gens ont l'ADSL, cela continue d'être utile d'optimiser ses images pour le web afin qu'elles soient le moins lourd possible en octet. Cela permet aux gens accédant au site via la 3G ou le satellite de ne pas passer leur forfait là-dedans((À noter pour ceux qui ont un quota de donné par mois (3G et satellite), on peut [[https://addons.mozilla.org/en-US/firefox/addon/image-block/|désactiver l'affichage des images sur le web]].)) et rend l'affichage plus fluide y compris sur les grosses connexions. Quel est l'intérêt d'avoir l'ADSL si on voit les images se charger lentement ? Mais certains sites oublient cette règle simple. Essayons de faire mieux !+Même si la plupart des gens ont l'ADSL, cela continue d'être utile d'optimiser ses images pour le web afin qu'elles soient le moins lourd possible en octet. Cela permet aux gens accédant au site via la 3G ou le satellite de ne pas passer leur forfait là-dedans((À noter pour ceux qui ont un quota de données par mois (3G et satellite), on peut [[https://addons.mozilla.org/en-US/firefox/addon/image-block/|désactiver l'affichage des images sur le web]].)) et rend l'affichage plus fluide y compris sur les grosses connexions. Quel est l'intérêt d'avoir l'ADSL si on voit les images se charger lentement ? Mais certains sites oublient cette règle simple. Essayons de faire mieux !
  
 Quel est le "bon poids" pour une image ?  Quel est le "bon poids" pour une image ? 
Ligne 32: Ligne 32:
 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 158ko à la base, a été ainsi amené à 86ko (sans changer sa taille en pixel). 
  
-{{tag>Web Graphisme Gimp}}+===== 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}}
CC Attribution-Share Alike 4.0 International Driven by DokuWiki
fr/optimiser_image_web.1407705378.txt.gz · Dernière modification : (modification externe)

Licences Mentions légales Accueil du site Contact Inclusion