Cette technique est utilisée dans l'affichage du back office de TYPO3. Elle consiste à n'utiliser qu'une image à la place de plusieurs images séparées. Ensuite, l'affichage de chaque image en ilage de fond, de type background-image, est calculé par la feuille de style en transformant un élément en type block et en lui affectant des dimensions. On peut ainsi prévoir dans la même image les éléments survolés avec la propriétés hover.

Les sprites CSS permettent de charger plus rapidement une page car le nombre de requêtes pour télécharger les différentes images d'une page allongent le chargement de cette dernière.

De plus, une image unique, plus grande, n'est pas forcément plus lourde que des images séparées. En général, une image à une taille minimale en fonction de son format, gif ou autre.

Dans TYPO3, on retrouve ces sprites CSS dans l'extension système t3skin. Les images sont contenues dans le dossier "images/sprites" et certaines ont une hauteur de 2248 pixels.

Il existe un site internet pour créer facilement des sprites CSS, une démo est d'ailleurs en ligne : http://spriteme.org/

La compression des JS et des CSS a été ajoutée pour la première fois dans la beta 1 de TYPO3 4.4.
L'intérêt est de réduire le nombre de requêtes (70 requêtes estimées avant cette optimisation) pour télécharger depuis le serveur les fichiers CSS et JS. Cette optimisation est une étape logique dans l'optimisation du back office de TYPO3.

Techniquement, c'est la classe t3lib_Compressor (t3lib/class.t3lib_compressor.php) qui s'occupe de cette tâche. Les fichiers générés sont stockés dans le dossier temporaire typo3temp/compressor/.

Les fichiers sont créés au format gzip si l'on a modifié l'option 'compressionLevel' dans l'install tool.
Cette valeur est un entier allant de 0 à 9 ($TYPO3_CONF_VARS[TYPO3_MODE]['compressionLevel'] dans le localconf.php). Plus le chiffre augmente et plus la compression est élevée. La contrepartie, c'est que la génération des éléments du back office est plus ou moins ralentie en fonction du niveau de compression. C'est le principe des archives me direz-vous.

L'autre contrepartie de l'utilisation de ce mode de compression, consiste à indiquer à Apache comment traiter ces fichier sous format gzip.

Ainsi, il faudra ajouter les lignes suivantes dans votre fichier .htaccess :

<FilesMatch "\.js\.gzip$">
    AddType "text/javascript" .gzip
</FilesMatch>
<FilesMatch "\.css\.gzip$">
    AddType "text/css" .gzip
</FilesMatch>
AddEncoding gzip .gzip