Mise à jour du CSS du site

Précédemment il y avair des images réalisées avec Gimp + un appareil photo pour une des 2. On me reprochait d’avoir dessiné un champignon un peu trop évocateur, je n’en suis pas convaincu. Les 2 images étaient de plus un peu lourdes (dans les 50 Ko environ chacune). Je me suis donc décidé à les refaire sous Inkscape, sur une base de 4 couleurs à chaque fois.

La banière du nouveau titre est partiellement dessinée à la tablette partiellement retravaillée avec les outils vectorielles, 4 couleurs : bleu très foncé, bleu foncé, bleu clair et orange, Le tout à été exporté en bitmap (png), et passé, sous Gimp, en mode 8 couleurs indexées (Menu Image=>Mode=>Couleur indexées), sans Floyd Steinberg pour éviter le bruit hasardeux gourmand en compression. J’ai choisi 8 couleurs pour représenter les 4 couleurs tout en gardant quelque couleurs de marges utilisées pour l’anti-crénelage. Si les teintes choisies sont dans les mêmes coloris, l’anticrénelage nécessitera moins de couleurs pour être efficace.

Tout cela me permet d’obtenir au final un fichier de 1800×150 pixels de 5412 octets, 5Ko, environ 1/10e de l’image précédente.

Pour le fond du menu de droite, pareil 4 couleurs, ou plutôt niveaux de gris, export PNG, import dans Gimp, j’ai teint en bleu, réduit le contraste entre les couleurs et augmentée leur luminosité, avoir d’avoir quelque chose qui ne réduirait pas trop la lisibilité du texte, j’ai ensuite teinté en bleu, pour accorder avec les tons orange/bleu du site. Après tout cela, j’ai encore passé l’image en mode indexé 8 couleurs.

Ce n’est pas le cas lorsque l’on récupère un export PNG d’Inkscape, mais il est bon de fusionner les calques avant passage en mode indexé pour avoir de bon résultats.. Plus généralement, il est toujours mieux de ne passer en mode indexer qu’avant la sauvegarde pour utilisation finale. La compression PNG, est toujours faite en niveau maximum, celle ci n’impliquant pas de perte.

Cette seconde image de 200 x 1000 pixels pèse 12 Ko.

J’ai utilisé la même technique pour l’illustration du texte précédent, dessinée à main levée à la tablette les formes en bleu ayant été légèrement corrigées en modifiant les nœuds d’édition.

J’aurais bien aimé mettre également les SVG, mais ca n’est malheureusement pas possible pour le moment en CSS, et pour ces images ci, même en SVGZ j’aurais eu une taille légèrement supérieure.