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.

Une 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é).


Information sur les mises à jour

Dernière mise à jour :

22 Oct 2019
fonctionnement du code vérifié

17 496  vues
Compatibilité du code
PHP 5, PHP 7 et PHP 8
  code classé dans   Images - Graphisme
  code source classé dans   Images - Graphisme
 
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
                    
<?php
/*------------------------------*/
/*
Titre : concaténation d'images pour faire des sprites CSS

Auteur : forty
Website auteur : http://www.toplien.fr/
Date édition : 24 Avril 2010
Date mise a jour : 22 Oct 2019

Rapport de la maj:
- fonctionnement du code vérifié
*/
/*------------------------------*/

// 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);
}
}
?>
<?php
/*------------------------------*/
/*
Titre : concaténation d'images pour faire des sprites CSS

Auteur : forty
Website auteur : http://www.toplien.fr/
Date édition : 24 Avril 2010
Date mise a jour : 22 Oct 2019

Rapport de la maj:
- fonctionnement du code vérifié
*/
/*------------------------------*/

// 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);
}
}
?>

Exemple :

 
01
02
03
04
                    
<?php

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

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

      Fonctions du code - Doc officielle PHP

   php.net  
Description
Versions PHP
    array
Crée un tableau
PHP 4, 5, 7 et 8
    die
Alias de la fonction exit
PHP 4, 5, 7 et 8
    empty
Détermine si une variable est vide
PHP 4, 5, 7 et 8
    getimagesize
Retourne la taille d'une image
PHP 4, 5, 7 et 8
    glob
Recherche des chemins qui vérifient un masque
(PHP 4 >= 4.3.0, PHP 5, PHP 7, PHP 8)
    header
Envoie un en-tête HTTP brut
PHP 4, 5, 7 et 8
    imagealphablending
Modifie le mode de blending d'une image
PHP 4, 5, 7 et 8
    imagecolorallocatealpha
Alloue une couleur à une image
(PHP 4 >= 4.3.2, PHP 5, PHP 7, PHP 8)
    imagecopy
Copie une partie d'une image
PHP 4, 5, 7 et 8
    imagecreatefromgif
Crée une nouvelle image depuis un fichier ou une URL
PHP 4, 5, 7 et 8
    imagecreatefromjpeg
Crée une nouvelle image depuis un fichier ou une URL
PHP 4, 5, 7 et 8
    imagecreatefrompng
Crée une nouvelle image depuis un fichier ou une URL
PHP 4, 5, 7 et 8
    imagecreatetruecolor
Crée une nouvelle image en couleurs vraies
PHP 4, 5, 7 et 8
    imagedestroy
Détruit une image
PHP 4, 5, 7 et 8
    imagefill
Remplissage
PHP 4, 5, 7 et 8
    imagefilter
Applique un filtre à une image
PHP 5, 7 et 8
    imagejpeg
Affichage de l'image vers le navigateur ou dans un fichier
PHP 4, 5, 7 et 8
    imagesavealpha
Détermine si les informations complètes du canal alpha doivent être conservées lors de la sauvegardes d'images
(PHP 4 >= 4.3.2, PHP 5, PHP 7, PHP 8)
    list
Assigne des variables comme si elles étaient un tableau
PHP 4, 5, 7 et 8
Minimum 10 mots. Votre commentaire sera visible après validation.


 Autres snippets qui pourraient vous intéresser

Concaténer des fichiers issus d'un FTP - PHP Sources

Compatibilité : PHP 5, PHP 7, PHP 8

Concatène plusieurs fichiers FTP dans un fichier local.

Faire un Refresh avec la fonction header()

Compatibilité : PHP 5, PHP 7, PHP 8

Les META REFRESH sont à bannir en HTML car trop souvent utilisés par de nombreux webmasters. Utiliser la fonction header()

* Requêtes exécutées avec Recherche Contextuelle

  Les derniers scripts PHP / MySQL

PmWiki 2.5.9

logo PmWiki
Langue langue fr
Date  hier
Taille 0.68 Mo
Catégorie Wiki

CubeCart 6.6.2

logo CubeCart
Langue langue en
Date 16 Avril 2026
Taille 16 Mo
Catégorie Ecommerce

Magepattern 1.1

logo Magepattern
Langue langue fr
Date 15 Avril 2026
Taille 6 Mo
Catégorie CMS

PHP 8.5.5

logo PHP
Langue langue us
Date 12 Avril 2026
Taille 32 Mo
Catégorie PHP

PHP 8.4.20

logo PHP
Langue langue us
Date 12 Avril 2026
Taille 30 Mo
Catégorie PHP

Serendipity 2.6.0

logo Serendipity
Langue langue fr
Date 11 Avril 2026
Taille 15 Mo
Catégorie Blogs
avatar

Forty

  24 Avril 2010

  SOURCE   Télécharger

Information sur les mises à jour

Dernière mise à jour :

22 Oct 2019
fonctionnement du code vérifié

17 496 Vues
Compatibilité du code
PHP 5, PHP 7, PHP 8
54 codes

Catégorie :  Images - Graphisme

Ajoute à votre image un cadre noir 3D
Ajouter un logo en filigrane (watermark) sur ses images
Composantes d'une image
concaténation d'images pour faire des sprites CSS
Connaitre la taille d'une image et son format
Créer des images fractales
Créer une vignette avec GD en se basant sur le type d'image
Création d'images miniatures
Création d'images miniatures carrés
Crée des titres sympa
Creer un camembert 2D facilement
Crop d'une image JPEG
Dessine un polygone régulier
Dessine un polygone regulier plein
Donne la couleur opposée d'une couleur
Ecrire des nombres dans une images, sans police
Ecrire un texte dans une image avec retour à la ligne automatique
Ecrire un texte dans une image PNG
Ecrire un texte sur une image - Code de base
Effet miroir sur des images
Effet solarisation
Egalisation des couleurs d'une image
Explorer et visionner des images dans un répertoire
Extrait un canal de couleur d'une image
Fabrication d'une vignette et sauvegarde de la vignette
Fonction hexadécimal vers RVB (RGB)
Fonctions imagecreatefrombmp et imagebmp
Générer une image aléatoire
GD/Graphiques
Homothétie d'une image
Image aléatoire
Image en noir et blanc
Image transparente
Images Miniatures
Ligne diagonale
Modifications des composantes
Photo du jour choisi de manière aléatoire à partir d'un répertoire
Redimensionne des images JPG et PNG
Redimensionner image en gardant les proportions
Redimensionner une image
Redimensionner une image sans distorsion
Regarde si l'image est présente sur le serveur
Représentation graphique
Rotation de triangle
Rotation image
Sélectionne et affiche la dernière image mise à jour
Sépia aspect ancien
Symétrie horizontale
Taille image maximum en pixels
Texte multi-lignes sur une image avec une police PostScript Type1
Texte ombré en police TrueType
Transparence simple sur une image
Un masque sur une image
Une galerie de photos automatique depuis un répertoire