wimm – web image manager

wimm est une application Tcl que j'ai écrite pour me faciliter la vie avec les images destinées au Web. Pour l'instant elle fait trois choses correspondant à ces trois commandes:

• optimize: dans une arborescence, trouver toutes les images aux formats png, jpeg, gif, svg, et les compresser avec des librairies comme pngquant, jpegtran, gifsicle, svgo, etc.
• resize: redimensionner des images selon des valeurs donnés en arguments dans une liste Tcl.
• sprite: convertir des fichers SVG en symboles, puis les exporter en un sprite SVG.

Les nom des images doivent être transmis par stdin:

echo monimage.png | wimm optimize

find images/ | wimm optimize

Pour chaque image, le traitement sera affiché dans le terminal:

find . | wimm optimize
pngquant OK
¤ -------------------------------------------------- ¤
¤ my-panda.png (pngquant) :
¤ -> [Before] 85.4677734375 | [After] 44.248046875 = -50%
¤ -------------------------------------------------- ¤
...

Une version de l'image compressée est créé avec le suffixe -wimm (ex.: my-panda-wimm.png). L'originale demeure intacte.

En option, un suffixe personnalisé peut-être appliqué:

find assets/images/ | wimm optimize --suffix "-optim"

Pour la commande resize, il suffit de mettre les valeurs de la redimension entre guillemets double et séparé par un espace:

find test/last-litre-of-petrol.jpeg | wimm resize "520 760"

¤ ----------------------------------------------------------------------------- ¤
¤ -> /home/hs0ucy/.hs0ucy/Code/wimm/test/last-litre-of-petrol-520w-wimm.jpeg
¤ ----------------------------------------------------------------------------- ¤

¤ ----------------------------------------------------------------------------- ¤
¤ -> /home/hs0ucy/.hs0ucy/Code/wimm/test/last-litre-of-petrol-760w-wimm.jpeg
¤ ----------------------------------------------------------------------------- ¤

Usage: <img srcset="last-litre-of-petrol-520w-wimm.jpeg 520w, last-litre-of-petrol-760w-wimm.jpeg 760w" ... />

wimm sprite va trouver tous les SVG, les convertir en element <symbol/>, et les combinés dans un seul fichier.

Le résultat s'affichera dans le terminal et une copie sera créé (/tmp/svg-sprite-wimm.svg).

find test/ | wimm sprite

<svg height="0" width="0" id="spriteSVG" aria-hidden="true" style="position:absolute" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="symbol-arrows-horizontal" width="24" height="24" fill="none">
        <path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M15 9V7H17V9H15ZM17 15V13H13V11H17V9H19V11L21 11V13L19 13V15H17ZM17 15V17H15V15H17ZM11 11V13H7V15H5V13L3 13V11L5 11V9L7 9V11H11ZM7 15H9V17H7V15ZM9 7V9H7V7H9Z" fill="black"/>
    </symbol>
    <symbol id="symbol-arrows-vertical" width="24" height="24" fill="none">
        <path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M11 11H13V7H15V9H17V7H15V5H13V3H11V5H9V7H7V9H9V7H11V11ZM11 13H13V17H15V19H13V21H11V19H9V17H11V13ZM9 17V15H7V17H9ZM15 17V15H17V17H15Z" fill="black"/>
    </symbol>
</svg>