Jump to content

Recommended Posts

Bonjour à tous,

 

Après une longue errance en tant qu'infographiste web, j'ai enfin trouvé un logiciel qui permet de facilement optimiser les PNG : http://pnggauntlet.com/.

 

Petit rappel du problème avec les PNG.

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.

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).

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.

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 :D.

 

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 !

Simple, léger, efficace et fait gagné du temps de production.

 

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).

 

  • Upvote 3

Share this post


Link to post
Share on other sites

J'utilise également ce logiciel, et je le recommande, il est vraiment super et permet une optimisation assez utile (sur l'ensemble d'un site). :)
+1 rep, merci pour l'astuce.

Share this post


Link to post
Share on other sites

Sympa comme logiciel, mais après avoir optimiser une image la qualité n'est plus la même ?

La qualité reste la même. C'est du a la manière d'encoder le PNG.

Un peu comme pour le ZIP, on peut améliorer la compression sans perdre de données.

Share this post


Link to post
Share on other sites

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:)

 

C'est à la fois simple et compliqué :D

 

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).

Donné de manière brut, le format sera celui d'une image brut (BMP, TIFF, RAW, ...), à l'instar du son non compressé (WAV, AIFF, ...).

 

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).

 

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.

Un exemple :

On a une image de 32x32 blanche avec un carré noir de 16x16 au milieu.

On peut se dire qu'on va découper l'image en 5 zones

  • [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
  • [0,7,8,23] : [255,255,255,255]
  • [8,8,16,16] : [0,0,0,255] : le carré noir
  • [24,7,31,23] : [255,255,255,255]
  • [0,24,31,31] : [255,255,255,255]

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.

  • Upvote 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...