Je viens d'expérimenter les Data-URL dans la CSS par défaut (ND) du site. En pratique, ce système permet de mettre du contenu directement en ligne dans votre code, ici dans mon cas dans la CSS.
Pour convertir vos images, vous pouvez utiliser cet outil : Convertisseur en Data URLs. Cette technique est adaptée pour des images très petites.
Pour l'exemple, j'ai choisi l'image de fond du skin ND, ce qui donne dans la CSS : (j'ai coupé le long bout de code histoire d'être lisible)background:#000 url(data:image/gif;base64,R0(...)w==) repeat;
au lieu de : background:#000 url(pattern_136.gif) repeat;
Ne cherchez pas une économie de poids avec cette technique, en général, le code généré est plus lourd que l'image : dans mon exemple, l'ancienne image pesait 232 octets, le code généré pèse lui 334 octets, avec la compression DEFLATE, il est réduit à 296 octets (évidemment, ces chiffres de compression sont à relativiser, c'est pour donner un ordre d'idée).
Par contre, cela économise une requête HTTP, donc c'est bien pour les performances web au final.
Là, vous me dites : "c'est génial, et pourquoi ne généralise-t-on pas cette formerveilleufantasmidable technique ?"
Très simple, Internet Explorer ! Les versions inférieures à la version 8 ne supportent pas cette technique. Je déconseille donc de l'utiliser si vous visez un rendu équivalent sous les différentes versions d'IE. A noter, IE8 supporte cette technique, mais les Data-URL ne doivent pas dépasser les 32 ko, sinon, point de salut.
Attention, ne croyez pas qu'Internet Explorer 7 les supporte... IE 8 en mode de "compatibilité IE 7" les affiche, mais IE 7 tout seul ne les affichera pas. D'autres images du skin auraient pu bénéficier de cette technique, mais je préfère me cantonner à l'image de fond, elle est moins importante pour le design, ainsi, les personnes navigant sous IE 6 et 7 n'auront pas de dégradation trop prononcée du graphisme.
Cela permet, en combinant cette technique avec celle des sprites CSS, de charger la totalité du graphisme ND via 5 images seulement (titres compris).
EDIT : afin de clarifier, car j'ai vu plusieurs bêtises sur le sujet : pour la mise en cache de ces images, comme le code de ces images va être mis soit dans vos CSS soit dans votre code, la mise en cache sera fonction de la mise en cache du fichier qui les contiendra.
Exemple, si votre CSS est mise en cache et que la Data-URL est insérée dedans, l'image générée sera mise en cache.
Par contre, si la Data-URL est insérée dans une page qui n'est pas mise en cache, effectivement, votre image générée ne sera pas mise en cache.