Discussion :

[Renand]

Bonjour,

Je ne sais pas trop ou poster ce message, alors allons y ici..

Je cherche à trouver un bonne méthode pour rationnaliser la gestion des images ulpoadées et affichées dans mes sites.

Je me demandais comment organiser cela au mieux. Dans l'idée je pensais garder une image dans grand format (celle considérée comme l'originale) et j'imaginais un service me permettant de générer les images au format nécessaires si elle n'existes pas déjà.. ou un truc du genre...

L'autres options serait de créer toutes les version nécessaires à l'application au moment de l'upload ect....

je ne sais pas trop comment organiser cela..

j'avais vu un truc pas mal sous Drupal à l'époque ... il était question de paramètrer des formats au niveau objet de les générer à l'avance ect...

Avez-vous des idées, un retour d'expérience ?

[Invité]

Bonjour,
avant de se demander "quoi stocker ?" ou "comment stocker ?", il faut savoir "pourquoi stocker ?"

En effet, ca dépend de ce que tu vas en faire :
- garder l'original en archive ?
- afficher d'abord des miniatures ? (les pictos s'afficheront bien plus vite que les "originales")
- puis une plus grande au clic ?,
- ...

Le but étant d'optimiser la rapidité de chargement des images.
De préférence aux dimensions d'affichage sur le site, pour optimiser le poids (comme à la boxe)
Donc, en fonction des besoins :
- dossier "original" (poids lourd)
- dossier "normal" (poids moyen)
- dossier "picto" (poids plume)
- ....

[Renand]

En gros, je pars du principe de pouvoir adapter à partir de mon originale les versions nécessaires à ce jour, mais de me laisser l'opportunité d'en ajouter plus tard.

j'ai renoncé depuis un moment à la possibilité de servir les images redimentionnées à al volée, c'est vraiment trop lent.

Je penses maintenant à générer les différentes versions nécessaires au site en question après la mise à jour du fichier uploadé dans mon application, d'avoir une fonction de purge, si j'ai la volonté de virer les images générés, et une fonction permettant de les régénérer... quelques choses dans ce gout.

En fait la question que tu me pose est évidement la bonne, et j'avoue imaginer les première pierres de cette fonction en ayant un outil réutilisable pour plusieurs projets.... je n'ai donc pas toutes les réponses.

[Invité]

Voici quelques /fonctions/tutos :
-> PHP - Fonctions de redimensionnement d'images
-> la partie VII. Utilisation avec base de données (+ utilisation de ces fonctions avec PHOTO + PICTO)
-> Système de Gestion-Affichage de Nouvelles (+ utilisation de ces fonctions)

[Renand]

merci pour cela, je vais utiliser un autre language, mais ça va surement inspirer des idées d'organisation.

Bonne journée.

[Sergejack]

Selon moi, il y a une seule* (mais grande) considération à avoir concernant l'encodage des fichiers images d'un site web = leur poids (taille en ko).
*Note: CDN est une considération général et pas forcément propre (bien qu'appropriée) aux images.

Concernant leur dimension, j'aime laissé le navigateur faire le travail.
Non seulement les navigateurs actuels font ça proprement mais cela permet surtout d'envisager qu'une même image soit affichée dans n'importe quelle taille*.
* Note: Il faut connaître l'astuce css height/width: auto pour ne pas partir dans du javascript inutile.

Imaginons une image A.jpg qui pèse 1290ko et dont la dimension réelle est 1000px * 500 px.
J'aurais tendance à la transformer en A_light.jpg (4ko 100* 50) et A_heavy.jpg (70ko 1000 * 500).

J'utiliserais A_light.jpg pour les affichages de petites et moyennes tailles.
Un peu de CSS :

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
IMG.width2Em {
 width: 2em
 height: auto;
}

IMG.width4Em {
 width: 4em
 height: auto;
}

IMG.height3Em {
 width: auto;
 height: 3em;
}

Et A_heavy.jpg pour les grandes et très grandes tailles.
Un peu de CSS :

Code :

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

1
2
3
4
5
IMG.width2Em {
 width: 20em
 height: auto;
}

Pas besoin de faire autant de fichiers que d'affichages envisagés.
Avec un nombre réduits de fichiers et l'approche que je suggère, on a les avantages suivants :

Peu de place occupé sur le serveur.
Les images mises en cache (sur le navigateur) peuvent resservir plus souvent.
Liberté totale de dimension.
Si la taille réelle de l'image (jpg) change, le rendu des pages ne sera pas bouleversé/foutu (ce qui se produirait en l'absence d'une définition height/width).

On a l’inconvénient suivant :
Mauvais rendu potentiel sur les mauvais navigateurs (ex: IE < 8).


J'espère m'être montré plus utile que rhétorique ^^