[Logiciel] PNG Gauntlet
-
<p>Bonjour à tous,</p>
<p> </p>
<p>Après une longue errance en tant qu'infographiste web, j'ai enfin trouvé un logiciel qui permet de facilement optimiser les PNG : <a href="http://pnggauntlet.com/" rel="external nofollow">http://pnggauntlet.com/</a>.</p>
<p> </p>
<p>Petit rappel du problème avec les PNG.</p>
<p>Beaucoup de site utilisent les images au format PNG car il permet d'encoder des images sans perte de données (au contraire du JPEG) et avec des informations de transparence.</p>
<p>Le problème c'est que ce format peut vite s'avérer lourd si on ne fait pas attention. De plus les grands logiciel de dessins, Photoshop en tête, n'optimise pas correctement le PNG (une honte vu le prix, mais bon... un autre débat).</p>
<p>Donc quant on bosse sur plein de projets, on se retrouve facilement avec plusieurs dizaines voire centaines d'images sur les bras. Ce qui représente un véritable labeur si toutes les images sont à réencoder.</p>
<p>Un exemple concret auquel j'ai été confronté : sur un ensemble de sites j'utilise un sprite d'icône contenant 150 icônes. Ce sprite est décliner en 4 versions (normal noir, normal blanc, couleur de survol et état désactive), puis chacun de ces sprite est décliner en différentes taille : (16x16, 24x24, 32x32, 48x48, 64x64). Chaque site à ses propres couleurs et donc ses propres sprites, ca nous fait donc 40 sites x 20 déclinaisons soit 800 images à réenregistrer dès qu'on touche à une icône
.</p>
<p> </p>
<p>Et c'est la qu'intervient PNG Gauntlet pour la partie optimisation : on glisse tout les fichiers dans le logiciel, on clique sur optimize et... c'est tout !</p>
<p>Simple, léger, efficace et fait gagné du temps de production.</p>
<p> </p>
<p>Une remarque quant même, l'optimisation peut être assez longue malgré une bonne utilisation des ressources machines. Pour mes 800 images, il aura fallut 2 heures avec le CPU entre 80% et 100% sur mon poste (Core-i7 3770K avec 18Go de RAM et un bon SSD).</p>
<p> </p> -
<blockquote class="ipsQuote" data-cite="Soulalex" data-ipsquote="" data-ipsquote-contentclass="forums_Topic" data-ipsquote-contentcommentid="10529" data-ipsquote-contentid="1002" data-ipsquote-contenttype="forums" data-ipsquote-timestamp="1408469106" data-ipsquote-username="Soulalex"><div><p>Sympa comme logiciel, mais après avoir optimiser une image la qualité n'est plus la même ?</p></div></blockquote>
<p>
La qualité reste la même. C'est du a la manière d'encoder le PNG.</p><p>
Un peu comme pour le ZIP, on peut améliorer la compression sans perdre de données.</p> -
<blockquote class="ipsQuote" data-cite="Soulalex" data-ipsquote="" data-ipsquote-contentclass="forums_Topic" data-ipsquote-contentcommentid="10544" data-ipsquote-contentid="1002" data-ipsquote-contenttype="forums" data-ipsquote-timestamp="1408554925" data-ipsquote-username="Soulalex"><div>
<div>
<p>D'accord même si le mot "encoder" me pose problème (enfin je sais ce qu'il veut dire mais comment on encode une image ? :huh: )</p>
</div>
</div></blockquote>
<p> </p>
<p>C'est à la fois simple et compliqué </p>
<p> </p>
<p>Une image, c'est une matrice de points auquel on a affecté une couleur. Exemple : [10,15] : [128,128,128,255], le point situer en x = 10 et y = 15 à la couleur RVBA(128,128,128,255).</p>
<p>Donné de manière brut, le format sera celui d'une image brut (BMP, TIFF, RAW, ...), à l'instar du son non compressé (WAV, AIFF, ...).</p>
<p> </p>
<p>Pour compresser une image on a deux solutions, soit encoder la matrice de points (ce que fait le PNG) soit "simplifier" l'image pour pouvoir la recrée après décompression (le cas du JPEG, du MP3 pour le son, du MPEG pour la vidéo).</p>
<p> </p>
<p>Si on compresse une matrice de points, l'image est entièrement conservée. Ce qui change c'est la manière d'optimiser cette matrice de points.</p>
<p>Un exemple :</p>
<p>On a une image de 32x32 blanche avec un carré noir de 16x16 au milieu.</p>
<p>On peut se dire qu'on va découper l'image en 5 zones</p>
<ul><li>[0,0,31,7] : [255,255,255,255] ( du point 0,0 au point 31,7, on applique la couleur rvba (255,255,255,255) : blanc</li>
<li>[0,7,8,23] : [255,255,255,255]</li>
<li>[8,8,16,16] : [0,0,0,255] : le carré noir</li>
<li>[24,7,31,23] : [255,255,255,255]</li>
<li>[0,24,31,31] : [255,255,255,255]</li>
</ul><p>Dans une image complexe, les solutions pour optimiser les zones de la matrice sont multiples les algos pour déterminé la meilleur solution sont vite gourmands.</p>
<br/>
</p>Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.
With your input, this post could be even better 💗
Register Login