poid, taille d'une image

Mammouth du PHP | 620 Messages

06 mai 2008, 22:33

Bonjour,
J’affiche des images dont le nom est stocké dans ma base de données.
Mes images sont en fait des fonds d'écran qui sont stocké dans leur format d'origine dans un répertoire "wallpapers"

Pour faire afficher ces images je fais de la sorte :
<img src="../images/wallpapers/', $resultat['logo'] ,'" alt="', $resultat['alt'] ,'" width="250" height="188" border="1px" solid black/>
Comme vous pouvez le constater je donne moi-même la dimension de l'image en la réduisant afin de ne pas l'afficher dans son format d'origine. (Le format d'origine s'affiche en cliquant dessus).
On a donc effectivement une image qui est petite sur la page du site mais qui a un poids important (celui d'origine).

J’aimerais savoir s’il existe une solution pour réduire le poids de l'image qui est affiché en mini

ViPHP
AB
ViPHP | 5818 Messages

06 mai 2008, 22:45

Une solution est de créer automatiquement tes vignettes dans le plus petit format lors du téléchargement des plus grandes et tu les stokes avec le même nom dans un répertoire "vignette" par exemple.

Une autre solution est de faire tes vignettes avec le traitement par lot d'un logiciel graphique et ensuite de les télécharger pour avoir au final toujours deux répertoires, l'un avec l'image en grand, l'autre au petit format.

Malheureusement y'a pas d'autre façon de faire à ma connaissance. Il faut deux formats dont un petit si tu veux accélérer le chargement de tes pages.

Eléphant du PHP | 224 Messages

06 mai 2008, 23:20

Bonsoir :)

Comme AB, je pense qu'il n'y a pas d'autre solution que d'avoir les images en deux dimensions, l'originale pour affichage en taille réelle, et des vignettes pour un affichage en liste ou tableau...

La solution de deux répertoires séparés, un pour les images originales et l'autre pour les vignettes, est une des solutions les plus utilisées, mais on peut aussi placer les vignettes dans le même répertoire que les images originales, il suffit juste de leur ajouter un préfixe ou suffixe explicite, du genre : "mini", "vignette", "icone", "logo", "picto", etc.

Ensuite, il suffit d'ajouter ce préfixe ou suffixe à ton code Html, un peu dans ce style :

Code : Tout sélectionner

<a href="images/mon_image.jpg" target="_blank"><img src="images/picto_mon_image.jpg" alt="mon_image" /></a>
Tu peux évidemment ajouter les formatages de ton choix, ce code est juste pour illustrer le principe...

Il existe aussi des scripts Php qui permettent de générer les vignettes à la volée pour les images qui n'en disposent pas, c'est très pratique mais cela peut être de nature à ralentir le serveur lors de grosses charges de travail... bref, c'est un choix à faire...

à+ :)
Fredo d;o)
"Un pas à la fois me suffit..." (Gandhi)

ViPHP
AB
ViPHP | 5818 Messages

07 mai 2008, 13:23

Bonsoir :)
...
Il existe aussi des scripts Php qui permettent de générer les vignettes à la volée pour les images qui n'en disposent pas, c'est très pratique mais cela peut être de nature à ralentir le serveur lors de grosses charges de travail... bref, c'est un choix à faire...
à+ :)
Cette solution est à proscrire surtout si tu as plusieurs vignettes à afficher sur la même page et d'autant plus que tu serais sur un serveur mutualisé. Cela ralenti considérablement le serveur qui peut te renvoyer des insultes (page blanche) en cas de surcharge.
Donc si tu ne veux pas faire deux images, conserve ta première solution. Même si c'est long le résultat finira par s'afficher alors qu'avec la solution du redimensionnement à la volée ça n'ira pas beaucoup plus vite et surtout tu risque une page totalement blanche pour le visiteur.

Je n'utilise pour ma part la génération de vignette à la volée que pour des script d'upload d'image et avec moult précautions et configuration spécifique...

Mammouth du PHP | 620 Messages

07 mai 2008, 13:31

qu'entends tu en cas de surcharge ?

j'ai fais le test avec ma premiere solution et ma deuxieme avec generation à la volée.
L'affichage de ma page avec toutes les vignettes va 5 fois plus vite quand meme.
le poid moyen de mes fond (grand format) étand d'environ + ou - 200 ko. la generation des vignettes a la volé crée des mini a 30 - 40 ko

Eléphant du PHP | 224 Messages

07 mai 2008, 14:05

Bonjour :)
Cette solution est à proscrire surtout si tu as plusieurs vignettes à afficher sur la même page et d'autant plus que tu serais sur un serveur mutualisé. Cela ralenti considérablement le serveur qui peut te renvoyer des insultes (page blanche) en cas de surcharge.
Oui, c'est vrai que ça peut mettre le serveur en difficulté, mais l'idée n'est pas de générer systématiquement les vignettes pour chaque image, uniquement pour celles qui n'en disposent pas, autrement dit, même s'il y a plusieurs images sur une page, il en aura finalement très peu qui seront générées à la volée, puisque les autres auront été faites au préalable (ouff... je ne sais pas si c'est bien clair ce que je raconte là :shock: )

Bref, du moment que la vignette d'une image a été générée, il n'est plus nécessaire de le refaire, on utilise automatiquement la vignette existante...
Je n'utilise pour ma part la génération de vignette à la volée que pour des script d'upload d'image et avec moult précautions et configuration spécifique...


Ha... "moult précautions", "configuration spécifique" :?: peux-tu nous en dire un peu plus ?

Merci... à+ :)
Fredo d;o)
"Un pas à la fois me suffit..." (Gandhi)

ViPHP
ViPHP | 4674 Messages

07 mai 2008, 23:46

Hey :),

La génération à la volée d'image n'est pas une mauvaise chose mais il faut savoir où la placer. Si lorsque l'utilisateur dépose une image (via un formulaire par exemple), alors on enregistre l'image à l'échelle 1:1 mais également la thumbnail (la miniature) qui sera générée à la volée puis enregistrée en fait. Ainsi, lors de l'affichage, tu auras des images miniatures, mais pas de calculs systématiques car le calcul aura été fait une fois en amont puis enregistré. Tu me suis ?

Un détail Fabrice, tu as écrit :

Code : Tout sélectionner

<img src="../images/wallpapers/', $resultat['logo'] ,'" alt="', $resultat['alt'] ,'" width="250" height="188" border="1px" solid black/>
Attention aux guillemets pour la bordure :

Code : Tout sélectionner

<img src="../images/wallpapers/', $resultat['logo'] ,'" alt="', $resultat['alt'] ,'" width="250" height="188" border="1px solid black" />
Comme tu utilises une forme XHTML pour écrire ton code, tu peux aussi essayer de migrer tes attributs width, height et border dans une feuille CSS non ?
« Un handicap est le résultat d'une rencontre entre une déficience ou différence et une incapacité de la société à répondre à celle-ci. »

Hoa : http://hoa-project.net (sur @hoaproject).

ViPHP
AB
ViPHP | 5818 Messages

12 mai 2008, 23:13

Bonjour :)
Cette solution est à proscrire surtout si tu as plusieurs vignettes à afficher sur la même page et d'autant plus que tu serais sur un serveur mutualisé. Cela ralenti considérablement le serveur qui peut te renvoyer des insultes (page blanche) en cas de surcharge.
Oui, c'est vrai que ça peut mettre le serveur en difficulté, mais l'idée n'est pas de générer systématiquement les vignettes pour chaque image, uniquement pour celles qui n'en disposent pas, autrement dit, même s'il y a plusieurs images sur une page, il en aura finalement très peu qui seront générées à la volée, puisque les autres auront été faites au préalable (ouff... je ne sais pas si c'est bien clair ce que je raconte là :shock: )

Bref, du moment que la vignette d'une image a été générée, il n'est plus nécessaire de le refaire, on utilise automatiquement la vignette existante...
Je n'utilise pour ma part la génération de vignette à la volée que pour des script d'upload d'image et avec moult précautions et configuration spécifique...


Ha... "moult précautions", "configuration spécifique" :?: peux-tu nous en dire un peu plus ?

Merci... à+ :)
1/ Ok pour des fichiers déjà existants, je veux dire par là qu'il est néanmoins plus simple de faire les miniatures une fois pour toute lors de l'upload de la grande image.

Mais bon cela implique pas mal de traitement php si j'ai bien compris ta méthode :
- Vérifier l'existence de chaque miniature (gourmand en ressources)
- Sinon faire la vignette correspondante (gourmand en ressources) et l'enregistrer dans le répertoire miniatures.

Pour une page d'administration c'est concevable, mais pour une page visiteur, le traitement est lourd et surtout redondant. Mais bon, cette solution est bien entendu meilleure que de refaire systématiquement les vignettes à la volée.

2/ Les précautions dont je parlais dépendent des spécifications des serveurs : limit memory, post_max_size etc.

@fabrice88250
Oui mais pour créer les miniatures, il faut néanmoins les télécharger sur le serveur et ensuite les réduire. Tu peux effectivement gagner beaucoup en performance chez toi en local, mais s'il s'agit de passer ton script sur un serveur distant - de surcroit mutualisé - tu peux avoir de mauvaises surprises surtout en cas de nombreuses connexions simultanées au serveur.

Eléphant du PHP | 224 Messages

13 mai 2008, 16:25

Bonjour :)
1/ Ok pour des fichiers déjà existants, je veux dire par là qu'il est néanmoins plus simple de faire les miniatures une fois pour toute lors de l'upload de la grande image.
Oui oui, je suis évidemment d'accord sur l'avantage de générer les miniatures lors de l'upload, mais parfois on ne passes pas forcément par un upload en ligne, mais par la mise en place des images originales par Ftp, et dans ce cas on peut bien imaginer une solution intermédiaire entre faire toutes les miniatures "à la mano", ou laisser à Php de les faire si elles n'existent pas déjà... non ?
Mais bon cela implique pas mal de traitement php si j'ai bien compris ta méthode :
- Vérifier l'existence de chaque miniature (gourmand en ressources)
- Sinon faire la vignette correspondante (gourmand en ressources) et l'enregistrer dans le répertoire miniatures.
En effet, c'est un peut gourmand en ressources, mais pas tant que ça finalement, en tout cas la vérification de l'existence des miniatures par un simple test "file_exists()" ne devrait pas être si pénalisant que ça...

En revanche, pour la partie de création des vignettes, là oui, c'est déjà plus contraignant pour le serveur... après c'est aussi une question de puissance de calcul et du nombre de sollicitations que le serveur doit gérer... bref, c'est à considérer en effet...
2/ Les précautions dont je parlais dépendent des spécifications des serveurs : limit memory, post_max_size etc.
Ok... merci pour ces indications, je vais me renseigner un peu, ça peut m'être utile un de ces 4...

Merci... à+ :)
Fredo d;o)
"Un pas à la fois me suffit..." (Gandhi)

ViPHP
AB
ViPHP | 5818 Messages

13 mai 2008, 17:13

Bonjour :)
En revanche, pour la partie de création des vignettes, là oui, c'est déjà plus contraignant pour le serveur... après c'est aussi une question de puissance de calcul et du nombre de sollicitations que le serveur doit gérer... bref, c'est à considérer en effet...
C'est pour cela que je voyais plutôt ce script intégré dans une page administrateur, non accessible par les visiteurs. L'admin fait un téléchargement ftp (donc sans créer de vignettes) et ensuite il lui suffit de lancer le script pour générer les vignettes manquantes (et pourquoi pas l'optimisation pour le web des grandes images déjà existantes si cela n'a pas été fait).
De cette façon les visiteurs on un code déchargé de ces vérifications/calculs...
C'est une idée en passant.
Pour ma part, si l'admin utilise le ftp je lui demande de télécharger également les vignettes qu'il aura créé avec un logiciel photo, sinon il passe par une page administrateur avec un téléchargement http qui optimise les photos pour le web et génère les vignettes à la volée.
Ta méthode nous donne une solution de plus qui peut être intéressante et viable surtout si on la considère dans le cadre d'une page administrateur. C'est juste pour une page visiteur que je serais plus réservé. :)