Discussion :

[redah75]

Bonjour, j'espere poster dans la bonne rubrique!

j'ai une question toute simple, mais je n'arrive pas a prendre une decision.
je suis entrain de creer un site marchand (PHP5 & Mysql). dans la partie backoffice, j'aurais un formulaire qui me permettrai de rentrer des nouveaux produits avec les images.
en gros j'aurais 3 tailles differentes: petite (png 80x80px), moyenne (png 350/350px) et grande (jpg 1000/1000px)

me conseillez vous alors de redimensionner les images dans photoshop puis les uploader toutes les 3??
ou plutot uploader que la grande image, puis les redimensionner a l'aide de la librairie GB ou encore jQuery ??

Merci bien

[andry.aime]

Bonsoir,

GB ou GD?
Si tu recrées tous les images sous différents format en photoshop, tu perds de temps, en plus tu bouffes des ressources de stockage, mais si tu utilises GD tu perds un peu de performance mais perso je vote pour GD.En fait, avec GD tu peux tous automatiser les redimensionnements en utilisant seulement des flux à chaque besoin sans créer des formats moyens et petits à partir de la grande taille.

A+.

[redah75]

Merci andry pour ta reponse.

GB ou GD?

GD peut etre une envie d'aller en Grande Bretagne )

Si tu recrées tous les images sous différents format en photoshop, tu perds de temps, en plus tu bouffes des ressources de stockage, mais si tu utilises GD tu perds un peu de performance mais perso je vote pour GD.En fait, avec GD tu peux tous automatiser les redimensionnements en utilisant seulement des flux à chaque besoin sans créer des formats moyens et petits à partir de la grande taille.

au fait sous photoshop on a la possibilité de traiter les images par lot, redimensionner 40 ou 50 imags d'un seul coup. et puis c'est vrai que pour le stockage ca consomme un peu, mais bon, j'aurais pas des millions d'images...

je viens de trouver ce lien qui me rend un peu perplexe par rapport a la libraire GD: http://foliovision.com/2010/03/26/imagemagick-vs-gd

comment font les autres sites marchands??

si j'ai qu'une image de 1000/1000px, ca ne mettra pas un temps fou pour charger une image de seulement 80px??

[rikemSen]

Je ne connais pas tous les sites marchand mais pour prestashop: une image uploadée donne lieux à une "small", "medium", "large", "home".

Du gd donc.

[redah75]

merci,
je vais peut etre devoir faire des tests...
connais tu un bon tuto pour cela?

si j'ai bien compris le principe du GD, j'upload une seule image "grande", et puis a partir de cette image d'autres tailles seront regenerees, c'est ca?
si j'ai qu'une image de 1000/1000px, ca ne mettra pas un temps fou pour l'afficher en 80/80px??

[Benjamin Delespierre]

Sans influencer ton choix, je te rappelles que photoshop dispose d'un outil de traitement d'images en batch dans Fichier > Automatisation > Traitement Par lots.

Cependant, ça peut être rébarbatif alors utilise GD

Si ça peux t'aider, voici un script qui me permettait de redimentionner des images Avec GD (en tenant compte du ratio):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
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
 
// ------------------------------------------------------------------------------------------------------------------------------------------------------ //
// - Fonction create thumbnail                                                                                                                            //
// ------------------------------------------------------------------------------------------------------------------------------------------------------ //
function create_thumb ($source, $dest, $mime, $max_width, $max_height)
{
  /*
   * Créer une miniature de l'image source vers
   * l'image dest.
   * L'image conserve son ratio
   *
   */
 
  // Obtenir la taille originale de l'image
  list($width,$height)=getimagesize($source);
 
  // Calculer la taille de la thumbnail
  if ($width > $height)
  {
    $th_width = $max_width;
    $th_height = $height * ($max_width / $width);
  }
  else
  {
    $th_width = $width * ($max_height / $height);
    $th_height = $max_height;
  }
 
  // Déterminer le type de l'image source
  if ($mime != 'inconnu')
  {
    switch ($mime)
    {
      case 'image/png' : $src   = imagecreatefrompng($source); break;
      case 'image/gif' : $src   = imagecreatefromgif($source); break;
      case 'image/jpeg': $src   = imagecreatefromjpeg($source); break;
      default          : return '<font color=#FF0000>Failure : Bad type argument 1</font>'; break;
    }
  }
  else
  {
    // Impossible de créer la thumbnail
    return '<font color=#FF0000>Failure : Bad type argument 2</font>';
  }
 
  // Créer l'image cible
  $thumb = imagecreatetruecolor($th_width, $th_height);
 
  imagecopyresized($thumb, $src, 0, 0, 0, 0, $th_width, $th_height, $width, $height);
 
  // Créer une thumbnail du type de l'image source
  switch ($mime)
  {
    case 'image/png' : imagepng($thumb,$dest, 0); break;
    case 'image/gif' : imagegif($thumb,$dest); break;
    case 'image/jpeg': imagejpeg($thumb,$dest, 100); break;
    default          : return '<font color=#FF0000>Failure : Bad type argument 3</font>'; break;
  }
  return '<font color=#00FF00>Success</font>';
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
<?php
 
require_once("gallery_config.php");
require_once("gallery_utils.php");
 
/*
 * Code pour envoyer une image
 *

// Ecouteur permettant d'envoyer une image
if (isset($_POST['upload']) && isset($_POST['gallery_path']) && isset($_FILES['fichier']))
{
  // Envoyer l'image
  echo gallery_upload_image($_FILES['fichier'], $_POST['gallery_path']);
}

 *
 */
 
// ------------------------------------------------------------------------------------------------------------------------------------------------------ //
// - Fonction Upload Image                                                                                                                                //
// ------------------------------------------------------------------------------------------------------------------------------------------------------ //
function gallery_upload_image($file, $path)
{
  global $largeThumbSize, $smallThumbSize;
  $ret = "";
 
  /*
   * Fonction d'upload
   *
   */
 
  $ret .= "<div class=\"content\">\n";
 
  // Contrôler les erreurs sur fichier
  if ($file['error'])
     return $ret .= "\t- Erreur : " . $file['error'] . " -\n</div>\n";
 
  // Si la gallerie de destination existe
  if (!file_exists($path))
     return $ret .= "\t- Dossier de destination invalide -\n</div>\n";
 
  $tmp_file = $file['tmp_name'];
 
  // Vérifier que le fichier à été correctement uploadé
  if (!is_uploaded_file($tmp_file))
     return $ret .= "\t- Fichier introuvable -\n</div>\n";
 
  // Vérifier que le fichier n'est pas déja présent
  if (file_exists($path . $file['name']))
     return $ret .= "\t- Le fichier " . $file['name'] . " existe d&eacute;ja -\n</div>\n";
 
  // Contrôler le nom du fichier
  if (preg_match('#[\x00-\x1F\x7F-\x9F/\\\\]#', $file['name']) || (substr_count($file['name'],'.') > 1))
     return $ret .= "\t- Ce nom de fichier est interdit pour des raisons de s&eacute;curit&eacute; -\n</div>\n";
 
  // Contrôler l'extention du fichier
  $mimes = array("image/jpeg","image/gif","image/png");
  $type  = mime_type_file (strtolower($file['name']));
  if (!in_array($type,$mimes))
     return $ret .= "\t- Les fichiers " . $file['type'] . " ne sont pas support&eacute;s -\n</div>\n";
 
  // Déplacer le fichier
  if (!move_uploaded_file($tmp_file, $path . $file['name']))
     return $ret .= "- Impossible de d&eacute;placer le fichier vers le r&eacute;pertoire de destination -\n</div>\n";
 
  $ret .= "Le fichier " . $file['name'] . " a bien &eacute;t&eacute; upload&eacute;<br />\n";
 
  // Si les dossiers pour les thumbnails n'existent pas, ils sont crées
  if (!file_exists($path . "thumbSmall/"))
  {
     if (!mkdir($path."thumbSmall", 0755))
        return $ret .= "\t- Impossible de cr&eacute;er le r&eacute;pertoire " . $path . "thumbSmall -\n</div>\n";
  }
 
  if (!file_exists($path . "thumbLarge/"))
  {
     if (!mkdir($path."thumbLarge", 0755))
        return $ret .= "\t- Impossible de cr&eacute;er le r&eacute;pertoire " . $path . "thumbLarge -\n</div>\n";
  }
 
  // Créer les thumbnails
  $ret .= "Cr&eacute;ation de vignette " . $smallThumbSize . "x" . $smallThumbSize . " : " . create_thumb($path . $file['name'], $path."thumbSmall/".$file['name'], $type, $smallThumbSize, $smallThumbSize) . "<br />\n";
  $ret .= "Cr&eacute;ation de vignette " . $largeThumbSize . "x" . $largeThumbSize . " : " . create_thumb($path . $file['name'], $path."thumbLarge/".$file['name'], $type, $largeThumbSize, $largeThumbSize) . "<br />\n";
  $ret .= "</div>\n";
 
  return $ret;
}
 
// ------------------------------------------------------------------------------------------------------------------------------------------------------ //
// - Fonction Upload Image form                                                                                                                           //
// ------------------------------------------------------------------------------------------------------------------------------------------------------ //
function gallery_upload_image_form($option, $dest)
{
  global $galleryPath;
  $ret = "";
 
  /*
   * Affiche et formatte un formulaire
   * destiné à envoyer des
   * fichiers image sur le serveur
   *
   */
 
  $ret .= "<div class=\"content\">\n";
 
  $ret .= "\t<form method=\"post\" enctype=\"multipart/form-data\" action=\"". $dest ."\">\n";
  $ret .= "\t\t<select name=\"gallery_path\">\n";
  $ret .= "\t\t\t<option value=\"\">Choisir une gallerie</option>\n";
  $ret .= "\t\t\t<option value=\"\">--</option>\n";
 
  // Pour chaque option
  foreach ($option as $op)
    $ret .= "\t\t\t<option value=\"" . $galleryPath .$op . "/\">" . $op . "</option>\n";
 
  $ret .= "\t\t</select>\n";
  $ret .= "\t\t<input type=\"file\" name=\"fichier\" size=\"30\"><input type=\"submit\" name=\"upload\" value=\"Envoyer\">\n";
  $ret .= "\t</form>\n";
 
  $ret .= "</div>\n";
 
  return $ret;
}
 
?>

Avant que vous ne me descendiez, je tiens à préciser que ce script fait partie d'un site qui était mon tout premier essai avec PHP, donc il est pas parfait...

[rikemSen]

sinon, utilise la class php5:

http://www.verot.net/php_class_upload.htm

UN MUST HAVE.

[andry.aime]

Pourquoi pas ce tuto Conception d'une galerie d'images générée à la volée

A+.

[redah75]

Sans influencer ton choix, je te rappelles que photoshop dispose d'un outil de traitement d'images en batch dans Fichier > Automatisation > Traitement Par lots.

Cependant, ça peut être rébarbatif alors utilise GD

oui je sais que photoshop offre cette possibilité, mais je me demande s'il vaut mieux avoir 3 ou 4 fichiers pour la meme photo (XS, S, M, L) ou plutot utiliser GD pour avoir QU'UNE SEULE image ce qui facilite la gestion...
je ne sais pas si la qualité sera degradée avec GD

mais j'ai une question a laquelle je n'ai pas encore eu de reponse

si j'ai qu'une image de 1000/1000px, ca ne mettra pas un temps fou pour l'afficher en 80/80px en utilisant GD ??

sinon, utilise la class php5:

http://www.verot.net/php_class_upload.htm

UN MUST HAVE.

Wow, elle est vraiment genial cette class, merci beaucoup, je vais regarder cela de plus pret!!

est ce qu'elle utilise la librairie GD? pour redimensionner des images, j'imagine qu'elle crée des images separement, c'est ca??

Pourquoi pas ce tuto Conception d'une galerie d'images générée à la volée

A+.

oui je suis tombé dessus hier

[Benjamin Delespierre]

ça tombe bien, Yvan vient de créer une librairie de manipulation d'images qui m'a l'air pas mal du tout: http://www.developpez.net/forums/d10...gnage-dimages/

[redah75]

Bonjour Benjamin et merci pour le lien interessant qui m'a permis de decouvrir http://arlindnushi.dervina.com/imagetools/ qui est pas mal du tout...

je suis bien tenté aussi par le http://www.scopicproject.org mais il n'y a ni doc ni demo pour voir a quoi ca ressemble aurais tu un lien pour voir une demo??

au fait j'arrive toujours pas a bien comprendre le mecanisme de la librairie GD et je n'ai toujours pas eu de reponse a une question que j'ai posée )

si j'ai qu'une image de 1000/1000px, ca ne mettra pas un temps fou pour l'afficher en 80/80px en utilisant GD ??

Merci infiniment de votre aide

[rikemSen]

redah75, oui. La classe que je t'ai montré fonctionne uniquement avec GD. Tu peux explorer la classe si tu veux pour voir comment ça fonctionne.

Mais vu que tu uploads une image, utilises la, c'est simple à comprendre et à utiliser. Tu peux redimensionner suivant une taille, respecter les ratios, rajouter des copyrights. Faire des rotations etc...

si j'ai qu'une image de 1000/1000px, ca ne mettra pas un temps fou pour l'afficher en 80/80px en utilisant GD ??

L'upload sera long, le traitement non. Le plus simple comme je te dis avant: Tu uploads ton image en 1000x1000 puis tu créés une miniature avec la class verot.net sur le serveur. (tu auras donc deux images: image.jpg, image_petite.jpg)

Et ensuite tu affiches image_petite.jpg

[RunCodePhp]

Salut

si j'ai qu'une image de 1000/1000px, ca ne mettra pas un temps fou pour l'afficher en 80/80px en utilisant GD ??

A mon sens oui.

A titre personnel j'ai fais le choix des 2, c'est à dire que je crée 3 images de 3 tailles différente (grande, moyenne et petite).
Cependant, j'utilise GD pour faire automatiquement les redimensionnements, mais cette opération se fait uniquement coté admin (backend/backoffice).

A l'usage, on fait référence à des images qui existent.

En tout cas, rien que le dimensionnement avec GD, c'est long, voir même hyper long.

Le gros avantage à mon sens d'exploiter des photos existantes (en toute tailles) dans un répertoire, c'est qu'on exploite le cache du navigateur.
En faisant des essai avec FireBug, et selon le nombre d'images et leur poids, on divise par 2, 3 même 4 fois le temps d'affichage de la page Web.
Sans compter que c'est autant de requête HTTP qui ne sont pas envoyées sur le serveur (+ les traitements s'il y en a) vu que c'est un cache coté client qui est exploité.

Puis ma logique est simple : A quoi ça sert de manipuler une grande image genre 1000 x 1000 si au bout une dimension plus petite est affichée.
Tout traitement qui sera fait dessus, même coté client sera du temps perdu.
Autant quelle existe, non ?

Enfin, c'est ce que j'ai remarqué, après ça, il y a peut être mieux de nos jours.

[redah75]

Bonjour radicaldreamer et RunCodePhp, comment ca va? ca fait longtemps )

OK, je comprends bien alors qu'il faudrait bien avoir differente tailles d'images... ma question du coup devient:
est il conseillé de redimensioner les photos avec GD ou Photoshop sachant que Photoshop est un logiciel assez avancé qui conserve une cetaine qualite et qu'il permet de faire des traitement par lot!!
comme j'ai dit dans mon 2e poste, ce lien me rend un peux perplexe:
http://foliovision.com/2010/03/26/imagemagick-vs-gd

si je ne me trompe pas, prestashop par ex propose d'uploader qu'une seule image puis elle sera redimensionee en utilisant GD, mais c'est fait pour les gens qui n'ont pas de licence photoshop ou qui ne s'y connaissent pas, n'est ce pas??

[rikemSen]

Non, prestashop propose d'uploader une image et de redimensionner simplement pour le confort d'utilisation et pour formater les images à une dimension bien précise car chaque emplacement sa propre taille.

Personnellement, j'utiliserais GD pour redimensionner les images. Attention, je parle bien de redimensionner dans le sens ou ça créé une miniature sur le serveur pas simplement à l'affichage!
Après, oui. Tu peux le faire avec photoshop mais il va falloir créer une macro de traitement par lot.

Précision: j'utiliserais GD si les images sont à uploader via un formulaire d'envoi. Sinon, si c'est juste pour les foutre dans un dossier et les afficher (donc sans passer par un formulaire d'envoi mais par ton logiciel FTP), j'utiliserais photoshop.

Voilà.

[redah75]

Personnellement, j'utiliserais GD pour redimensionner les images. Attention, je parle bien de redimensionner dans le sens ou ça créé une miniature sur le serveur pas simplement à l'affichage!

et comment est la qualité par rapport a si ca été fait par photoshop???

Précision: j'utiliserais GD si les images sont à uploader via un formulaire d'envoi. Sinon, si c'est juste pour les foutre dans un dossier et les afficher (donc sans passer par un formulaire d'envoi mais par ton logiciel FTP), j'utiliserais photoshop.

toutes mes images seront uploadées depuis un formulaire que je crée. ce qui me motive avec la GD c'est que j'aurai qu'UNE image a uploader. dans mon cas, j'aurais a peu pres 3 voire meme 4 images pour un seul produit, si je redimensione le tout avec photoshop, ca me feras quand meme 9 ou 12 images a uploader...

[rikemSen]

la qualité est la même. Invisible à l'œil nu. Du moins, à mes yeux.

[redah75]

ok, as tu jeté un coup d'oeil sur http://foliovision.com/2010/03/26/imagemagick-vs-gd ??

qu'en penses tu??

et puis 2 dernieres question SVP:

1- est il conseillé d'utiliser le watermark sur les photos? (insertion du logo)
2- j'aurais besoin de 4 tailles d'images sur mon site: 50/50px, 90/90px, 350/350px et 1000/1000px, me conseillez vous d'avoir les 4 tailles ou juste 3 tailles: 80/80px, 350/350 et 1000/1000 ??

Merchi beaucoup

[rikemSen]

Pour les tailles, à toi de voir.
Pour le logo, à toi de voir.

Pour le benchmark (lien que tu m'as donné)... Bah ouais et? Bon ok y a une petite différence. Penses-tu que la petite différence justifie de tout se taper à la main? Si oui, utilises photoshop. Si non, utilises GD.

[redah75]

Pour le benchmark (lien que tu m'as donné)... Bah ouais et? Bon ok y a une petite différence. Penses-tu que la petite différence justifie de tout se taper à la main? Si oui, utilises photoshop. Si non, utilises GD

hehe, ta reponse me laisse sans voix t'as bien raison, j'opte pour la GD, ca me fait du travaille en moins et ca sera plus rapide a gerer!!

Pour les tailles, à toi de voir.

A ton avis, si j'ai une image de 80/80px et que je l'affiche en 50/50 et 90/90, la qualités ne sera t-elle pas degradée?? je vais faire des tests pour voir comment differents navigateurs gerent le redimensionnement des images...