Automatisation de plusieurs images en une et découpage css

Bonjour,

Je vous explique le problème, dans ma page j'ai 20/30 petites images à charger.
Ce qui fait beaucoup de requêtes pour des petites données, et ralentis la page.

Je veux donc utiliser la technique qui consiste à mettre toutes les images en une, puis de découper l'image en css.

Simplement, je veux une très grande souplesse, et pas de lourdeur dans le processus.

Donc je cherche un script PHP qui prend toutes les images et forme une grande à partir de celle-ci (avec un minimum d'optimisation au niveau du placement des petites images pour éviter d'avoir trop de "trou" dans la grande image), puis une librairie JS/Css qui permet d'accéder très facilement à l'image. Avec par exemple une fonction qui me met automatiquement les bon styles quand je lui dit que je veux accéder à l'image "pom.jpg" car il sait exactement où elle est située sur la grande image.

Merci pour vos réponses

Salut,

AMHA, je ne vois pas l'intérêt de traiter une première fois tes images pour en faire une seule puis de les traiter une 2éme pour en extraire une... En terme de "lourdeur"... je ne vois pas le gain!
Orientes toi peut être vers un préload js ou css de tes images car (je n'ai jamais fait le test 30 fois xko si différent de 30xko) mais pour moi impliquer des processus supplémentaires de traitement ne peut que logiquement alourdir le résultat. Enfin je dis ça sans test à l'appui

Bah quand tu as des dizaines de milliers de visites, de passer de 40 requêtes HTTP par page à 3 requêtes par page, le gain est incroyable.

Et en découpant en CSS tu fais un tout petit peu travailler le client, c'est tout.

oxman a écrit :
Et en découpant en CSS tu fais un tout petit peu travailler le client, c'est tout.

Et tu flingues assez largement l'accessibilité.

S'il s'agit de faire des liens correspondant aux vignettes, pourquoi ne pas générer une image unique et, côté HTML, une image map (avec attributs alt qui vont bien sur les éléments area)? Ce serait une solution déjà plus accessible, et peut-être même plus simple à réaliser techniquement.

Ce sont des éléments de décorations graphiques.
Par exemple tous les input sont redécoré graphiquement, les select aussi etc.

Bonjour,

Avant de partir ou de poursuivre dans un grand n'importe quoi, fournir l'url des pages concernées.

(Les pseudos optimisations sont légions, et "fausse bonne idée" est le chiffre de la Bête )
Modifié par Laurent Denis (09 Feb 2008 - 11:08)

Je ne peux pas fournir l'url sinon je l'aurais fait dans mon premier message

Pour cadrer les choses, je ne suis pas un débutant, je sais de quoi je parle (dans une moindre mesure du moins ), c'est pour un site à très forte audience.

Et d'avoir près de 30 requêtes pour accéder à tout le contenu d'une page ralentis considérablement son affichage, je veux améliorer ça.

Par exemple, hier soir on a unifié les fichiers JS et CSS, on est passé pour ceux-ci de 10 requêtes à 1. Et la différence a été flagrante.

Mais il y a toujours un goulot d'étranglement pour les images et le nombre important de requête qu'elle génère.

Et donc je me suis dit qu'il existait peut-être un truc clean à ce sujet dont je n'avais pas encore connaissance.

Le truc idéal serait la possibilité d'envoyer un paquet genre gzip au navigateur avec toutes les images, et qu'il pioche dedans.

Dans les trucs ultra crade que j'ai testé, c'est carrément d'essayer de fournir les données de l'image <img avec le contenu de l'image (je veux dire, dans le goût d'une image stockée en bdd).

Je cherche donc avant tout quelque chose qui réduise considérablement le nombre de mes requêtes, et qui ne soit pas lourd à mettre en oeuvre.

<IMG
SRC="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw
AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH
hhx4dbgYKAAA7"
ALT="Larry">

Ah bah si finalement on peut, je savais bien

je renonce

Je n'aime pas ton air condescendant.
Genre je ne sais pas de quoi je parle, et je fais n'importe quoi.

Tu connais mon niveau technique ?
Tu sais que tous les sites ne peuvent pas avoir un modèle génial niveau sémantique accessibilité etc ?

C'est un site d'entreprise, qui doit être fait dans des délais extrêmement cours, et on a pas le choix.

oxman a écrit :
Je n'aime pas ton air condescendant.

Aucune condescendance.

Simplement, il n'y a pas de conseil possible dans le vide, sans évaluation des contenus concernés et des priorités

No problem, keep cool, relax, tout ça...

Bon week-end.
Modifié par Laurent Denis (09 Feb 2008 - 11:59)

Mais... Ca ne fonctionne pas sous IE, alors que c'est une norme de 98.
Diantre...
Modifié par oxman (09 Feb 2008 - 12:10)

Vu que tous les clients savent décompresser le gz, n'est-il pas possible de leur envoyer une archive gz avec les images puis de lui dire de lire dedans ?