concaténation d'images pour faire des sprites CSS

  Information

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

  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    
 85    
 86    
                               
<?php
/*---------------------------------------------------------------*/
/*
    Titre : concaténation d'images pour faire des sprites CSS                                                            
                                                                                                                          
    URL   : https://phpsources.net/code_s.php?id=587
    Auteur           : forty                                                                                              
    Website auteur   : http://www.toplien.fr/                                                                             
    Date édition     : 24 Avril 2010                                                                                      
    Date mise à 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($img255255255127);
  imagefill($img00$background);
  imagealphablending($imgfalse);
  imagesavealpha($imgtrue);

  // 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$pos000$imgwidth$imgheight);
    if ($addgreyscale) {
      imagefilter($tmpIMG_FILTER_GRAYSCALE);
      imagecopy($img$tmp$pos$imgheight $spacing00$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    
 05    
 06    
                                
<?php

    spriter(glob('*.jpg'), 'sprite.jpg'120905true);
?>

          Fonctions du code - Doc officielle PHP

   php.net   Description Versions PHP OUTIL
   array Crée un tableau PHP 4, PHP 5, PHP 7, PHP 8
   die Alias de la fonction exit() PHP 4, PHP 5, PHP 7, PHP 8
   empty Détermine si une variable contient une valeur non nulle PHP 4, PHP 5, PHP 7, PHP 8
   getimagesize Retourne la taille d'une image PHP 4, PHP 5, PHP 7, PHP 8
   glob Recherche des chemins qui vérifient un masque - (PHP 4 >= 4.3.0, PHP 5, PHP 7) PHP 4, PHP 5, PHP 7, PHP 8
   header Envoie un en-tête HTTP PHP 4, PHP 5, PHP 7, PHP 8
   imagealphablending Modifie le mode de blending d'une image - (PHP 4 >= 4.0.6, PHP 5, PHP 7) PHP 4, PHP 5, PHP 7, PHP 8
   imagecolorallocatealpha Alloue une couleur à une image - (PHP 4 >= 4.3.2, PHP 5, PHP 7) PHP 4, PHP 5, PHP 7, PHP 8
   imagecopy Copie une partie d'une image PHP 4, PHP 5, PHP 7, PHP 8
   imagecreatefromgif Crée une nouvelle image à partir d'un fichier ou d'une URL PHP 4, PHP 5, PHP 7, PHP 8
   imagecreatefromjpeg Crée une nouvelle image à partir d'un fichier ou d'une URL PHP 4, PHP 5, PHP 7, PHP 8
   imagecreatefrompng Crée une nouvelle image à partir d'un fichier ou d'une URL PHP 4, PHP 5, PHP 7, PHP 8
   imagecreatetruecolor Crée une nouvelle image en couleurs vraies - (PHP 4 >= 4.0.6, PHP 5, PHP 7) PHP 4, PHP 5, PHP 7, PHP 8
   imagedestroy Détruit une image PHP 4, PHP 5, PHP 7, PHP 8
   imagefill Remplissage PHP 4, PHP 5, PHP 7, PHP 8
   imagefilter Applique un filtre à une image - (PHP 5) PHP 5, PHP 7, PHP 8
   imagejpeg Envoie une image JPEG vers un navigateur ou un fichier PHP 4, PHP 5, PHP 7, PHP 8
   imagesavealpha Configure l'enregistrement des informations complètes du canal alpha - (PHP 4 >= 4.3.2, PHP 5, PHP 7) PHP 4, PHP 5, PHP 7, PHP 8
   list Transforme une liste de variables en tableau PHP 4, PHP 5, PHP 7, PHP 8

   Dites merci aux auteurs pour leurs travail, ça ne coûte rien et ça fait toujours plaisir wink

Présentation de PHP

PHP débutant et initié 50 Tutoriel

Présentation de MySQL

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é

15 488 Vues
Compatibilité
PHP 5, 7 et 8+
avatar
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éation d'images miniatures
Création d'images miniatures carrés
Créer des images fractales
Crée des titres sympa
Creer un camembert 2D facilement
Créer une vignette avec GD en se basant sur le type d'image
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