Web

Conversion d’images en CSS

pas mal le lien retwitté par @Adngold du site de Korben : http://t.co/poH5nbW !

Il s’agit du site web http://www.imgtocss.com qui permet de transformer n’importe quelle image en code CSS.

« Mouais… et ça sert à quoi en fait ? »

Et bien c’est tout bête : lorsque vous envoyez un email avec une image, la plupart des boîtes aux lettres les bloquent en vous proposant de les afficher :

Car seul le code pur html est affiché (ou pur texte…) : mises en gras, polices, etc… bref : le style de votre texte, sans les images.

Avec imgtocss, vous téléversez une image et, après moulinette, il vous sort un code CSS (plus ou moins lourd selon votre image).

J’ai par exemple soumis le logo de whaller :

Avouez que ce n’est pas mal ! l’image du logo n’est pas une image mais… un tableau !! Et oui c’est ça l’astuce de imgtocss.

Le logo fait 135px x 135px : la moulinette l’a donc transformé en tableau de 135 cases sur 135, où chaque case mesure 1px et est colorée d’une couleur.

L’algorithme de transformation est même un peu plus intelligent, puisqu’il détecte les grandes zones monochromes et en fait des cellules fusionnées, pour économiser de la mémoire.

Pour faire simple : une grosse image avec peu de dégradés, et surtout rectangulaire (dans son motif) sera très peu volumineuse ; alors qu’une image dégradée et avec des formes rondes sera très volumineuse.

Zone blanche dans le logo css de whaller (vue avec Firebug)

Related Posts with Thumbnails

Laisser une réponse

Connect with Facebook