concaténation d'images pour faire des sprites CSS

Les sprites CSS permettent de diminuer le temps de chargement d'une page internet en ne faisant qu'une image en contenant plusieurs. En effet, cela réduit le nombre de requête (une seule au lieu de plusieurs) et la taille totale (une seule grosse image est plus petite que plusieurs petites).
Ce petit script utilise la librairie GD pour concaténer plusieurs images (de type thumbshot dans l'exemple) dans une seule image pour utiliser le CSS sprite. Un option permet même de générer l'image en couleur et en niveau de gris. Il est possible d'afficher l'image directement ou de la sauvegarder dans un fichier (recommandé).

Tous les codes

forty

Site de l'auteur voir

[23] sources en PHP voir

Code vu 2118 fois

Enregistré le 24 Avril 2010

téléchargement du zip

impression de la fiche

Code Source

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.

<?php
/******************************************************************************/
/*                                                                            */
/*                       __        ____                                       */
/*                 ___  / /  ___  / __/__  __ _____________ ___               */
/*                / _ \/ _ \/ _ \_\ \/ _ \/ // / __/ __/ -_|_-<               */
/*               / .__/_//_/ .__/___/\___/\_,_/_/  \__/\__/___/               */
/*              /_/       /_/                                                 */
/*                                                                            */
/*                                                                            */
/******************************************************************************/
/*                                                                            */
/* Titre          : concaténation d'images pour faire des sprites CSS         */
/*                                                                            */
/* URL            : http://www.phpsources.org/scripts587-PHP.htm              */
/* Auteur         : forty                                                     */
/* Date édition   : 24 Avril 2010                                             */
/* Website auteur : http://www.toplien.fr/                                    */
/*                                                                            */
/******************************************************************************/

// création d'une image sprite CSS
// paramètres :
// 1- tableau de chemin de fichiers
// 2- chemin du fichier pour sauvegarder l'image généré (ou vide pour afficher
// directement l'image)
// 3- largeur des images
// 4- hauteur des images
// 5- espaces entre les images
// 6- ajoute une copie de l'image en niveau de gris en dessous des versions
// originales
function spriter($files = array(), $dest = '', $imgwidth = 120, $imgheight = 90,
 $spacing = 0, $addgreyscale = false) {
    // calcule la taille de l'image
    if ($addgreyscale) {
        $height = $imgheight + $spacing + $imgheight;
    } else {
        $height = $imgheight;
    }
    $files_tmp = array();
    $width = 0;
    foreach ($files as $file) {
        list($w, $h, $t) = getimagesize($file);
        // vérifie que l'image est de la bonne taille
        if (($w == $imgwidth) && ($h == $imgheight)) {
            $width += ($spacing + $imgwidth);
            $files_tmp[] = array('file' => $file, 'type' => $t);
        }
    }

    // créé l'image vide
    $img = imagecreatetruecolor($width, $height);
    $background = imagecolorallocatealpha($img, 255, 255, 255, 127);
    imagefill($img, 0, 0, $background);
    imagealphablending($img, false);
    imagesavealpha($img, true);

    
// ajoute les images de la gauche vers la droite (avec l'image en dégradé de
// gris en dessous si demandé)
    $pos = 0;
    foreach ($files_tmp as $file) {
        if ($file['type'] == IMAGETYPE_GIF) {
            $tmp = imagecreatefromgif($file['file']);
        }elseif ($file['type'] == IMAGETYPE_JPEG) {
            $tmp = imagecreatefromjpeg($file['file']);
        }elseif ($file['type'] == IMAGETYPE_PNG) {
            $tmp = imagecreatefrompng($file['file']);
        } else {
            die('Erreur : type d\'image incorrect');
        }
        imagecopy($img, $tmp, $pos, 0, 0, 0, $imgwidth, $imgheight);
        if ($addgreyscale) {
            imagefilter($tmp, IMG_FILTER_GRAYSCALE);
            imagecopy($img, $tmp, $pos, $imgheight + $spacing, 0, 0, $imgwidth, 
$imgheight);
        }
        $pos += ($spacing + $imgwidth);
        imagedestroy($tmp);
    }

    // affiche l'image ou sauvegarde
    if (empty($dest)) {
        header('Content-Type: image/jpeg');
        imagejpeg($img);
    } else {
        imagejpeg($img, $dest);
    }
}

spriter(glob('*.jpg'), 'sprite.jpg', 120, 90, 5, true);
?>