Dans le magazine GNU/Linux Pratique n°67 de septembre-octobre 2011, un article intitulé « Sprites CSS : découpe d’images en CSS » et écrit par Tristan Colombo, permet de découvrir le principe de la mosaïque d’images pour le déploiement des divers éléments graphiques d’une page Web. Le principe et les avantages évoqués (les performances réseau notamment) sont très intéressants.

Cette mosaïque d’images consiste en une juxtaposition de l’ensemble des « icônes » ou « sprites » qui seront utilisés pour habiller le site, au sein d’une seule et unique image. Depuis que le navigateur Internet Explorer supporte les images PNG (ça ne fait pas si longtemps :???:), c’est d’autant intéressant que l’on peut profiter de la transparence (le fameux canal alpha), chose impossible avec les formats JPG et GIF.

Beaucoup de « webdesigners » (je n’aime pas ce terme…) créent leurs images sources en vectoriel, par exemple en SVG. De cette façon, en plus de modifier très aisément les divers composants d’un dessin, il est très simple de le convertir en PNG, tout en adaptant ses dimensions en fonction des besoins :

• si 14px de haut c’est trop petit, hop! on teste avec 16px
• utilisation commune d’une version 30×200 et d’une version 90×600
• etc…

Lorsqu’on est amené à produire, et des fichiers SVG « sources », et des images PNG, cela revient à gérer deux fichiers par image, là où le SVG seul compte réellement. En outre, en déployant l’ensemble de ses images PNG sur divers sites Web, on n’est pas à l’abri d’une incohérence (une icône n’a plus les mêmes dimensions que les autres, pourquoi ?) ou d’un oubli.

Le principe de la mosaïque d’images a donc bien des avantages. Toutefois on se rend bien compte qu’il n’est pas évident de convertir un fichier SVG en PNG, de faire cela quinze fois, avant d’assembler toutes les images en une seule à la main dans Gimp… Puis devoir tout recommencer pour ajouter trois nouvelles images fraîchement créées, et ainsi de suite… Il va falloir un peu automatiser tout ça !

Le script Bash ci-dessous permet de se concentrer sur la réalisation des images vectorielles et leur déploiement. Il requiert essentiellement Inkscape pour la conversion des dessins vectoriels (grâce à son utilisation en ligne de commande), ainsi qu’ImageMagick pour la juxtaposition des images PNG. Une fois enregistré dans un fichier exécutable comme ~/bin/mosaique.sh, son utilisation est très simple :

1. Depuis le terminal, on se place dans le répertoire contenant les fichiers SVG
2. On passe en paramètre la hauteur souhaitée (en pixels) pour toutes les images
3. En sortie on obtient une seule et unique image PNG.

#! /bin/bash

source ~/bin/common.sh

# Permet de convertir le chemin d'un fichier accessible pour Inkscape depuis ouin-ouin
function windows ()
{
	echo "$1" | sed "s/\\/.\\//\\//g" | tr '/' '\\'
}

Hpx=$1
p=`pwd`

if test "$Hpx" = ""
then
	printcolor $RED "Veuillez specifier la hauteur (en pixels) que devront avoir les icones" >&2
	echo "" >&2
	
	exit 1
fi

# Retrait de la precedente mosaique d'images
rm -f ./mosaique.png 2>> /dev/null

# Conversion des images vectorielles du repertoire courant, en images PNG
for f in `ls ./*svg`
do
	test "`uname -o`" = "Cygwin" && f2=`windows "c:/cygwin${p}/${f}"` || f2=$f
	
	h=`inkscape -f ${f2} -H 2>> /dev/null`
	w=`inkscape -f ${f2} -W 2>> /dev/null`
	Wpx=`echo "$Hpx * $w / $h" | bc`
	
	inkscape \
		-f ${f2} \
		-e ${f2%svg}png \
		-C \
		-w $Wpx \
		-h $Hpx 2>> /dev/null
done

# Calcul du nombre de lignes et de colonnes constituant la mosaique
n=`ls -1 ./*png | wc -l`
# Nb d'images par ligne
L=`echo "sqrt($n)" | bc`
# On s'arrange pour avoir un nombre impair
test $((L % 2)) -gt 0 && L=$((L + 1))
# Nb de lignes d'images
H=$((n / $L))
# En cas reste sur la division, on ajoute une ligne
test $((n % $L)) -gt 0 && H=$((H + 1))

printcolor $GREEN "$n images : la mosaique va etre organisee sur une grille de ${L} colonnes et ${H} lignes"
echo ""

# Assemblage des images PNG a l'aide d'ImageMagick
montage \
	./*.png \
	-mode Concatenate \
	-tile ${L}x${H} \
	-background none \
	./mosaique.PNG

# Retrait des fichiers PNG temporaires
rm -f ./*.png 2>> /dev/null

mv ./mosaique.PNG ./mosaique.png

Voici plusieurs exemples réalisés avec un jeu d’images SVG issu du thème hicolor de Gnome, disponible notamment dans l’arborescence d’Ubuntu.

L’automatisation de cette mosaïque s’avère finalement redoutable d’efficacité. Il est ainsi possible de multiplier les essais ou d’ajouter de nouvelles images sans trop d’effort. Toutefois, cette première ébauche d’automatisation ne répond pas encore à tous les besoins et souffre de quelques failles, tels que :

• l’organisation des images est basé uniquement sur le nom des fichiers, il est peut-être judicieux de leur adjoindre un indice
• la mosaïque produite comprend des images de même hauteur uniquement, or il serait intéressant de pouvoir mixer plusieurs tailles d’images

Pour les personnes étant sous Windows, Cygwin permet d’installer le paquet ImageMagick sans problème. Pour exécuter Inkscape comme s’il s’agissait d’un programme GNU/Linux, le plus pratique consiste à ajouter un lien symbolique dans son répertoire ~/bin/ de cette façon :

ln -s /cygdrive/c/Program Files/Inkscape/inkscape.exe ~/bin/inkscape
chmod +x ~/bin/inkscape