Alternative image en css

Résolu/Fermé
leod Messages postés 98 Date d'inscription samedi 12 janvier 2008 Statut Membre Dernière intervention 30 janvier 2009 - 15 mars 2008 à 16:52
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 16 mars 2008 à 13:37
Bonjour a tous

pour changer cette fois ma question est d'ordre générale :
je suis en train d'attaquer la phase esthétique de mon site avec les menus , boutons , mise en page stylé etc ...
je me suis donc mis a faire des vignettes et boutons sous photoshop ainsi que l'architecture exterieur du site .

le problème est que le rendu me conviens mais pas la vitesse de chargement de mes pages qui se retrouve alourdie même en faisant attention à la taille des images

je voulais donc savoir si il était possible d'obtenir ce rendu par du css au lieu d'utiliser une image :

à titre d'exemple : http://deal.cash.free.fr/designmenu/vignettes.gif

j'ai également entendu parler de près mise en cache des images !

comment fait on précisement ? ceci améliore t'il vraiment la fluidité ?

sinon si vous pouviez me donner une série d'astuce pour accelerer la vitesse de chargement de mes pages

ah oui encore une autre question est il possible en php de spécifier une zone a recharger ou est on obligé de reactualiser une page entiere lors d'un evenement
A voir également:

3 réponses

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
16 mars 2008 à 02:22
salut,

je voulais donc savoir si il était possible d'obtenir ce rendu par du css au lieu d'utiliser une image
tu peux utiliser des fragments de cette image, ce qui est plus léger.
dans ce cas et pour chaque carré tu peux le faire avec 3 bitmpas de la largeur de la case mais seulement de quelques pixels de haut au lieu de faire transiter l'image entière.

une balise affiche quelques pixels du milieu du cadre et les répète en hauteur ce qui donne l'effet des bordures latérales de haut en bas.
à l'intérieur, une autre balise contiendra les pixels du haut pour afficher les coins supérieurs.
enfin, une troisième balise affiche les pixels du bas pour afficher les coins inférieurs.

tu peux regarder cet exemple, il ne correspond pas à ton cas mais utilise la même technique.

tu peux même minimiser encore le nombre de pixels téléchargés en ne découpant que les coins et des portions de bords mais cela multiplie le nombre de balises, à toi de voir.

j'ai également entendu parler de près mise en cache des images
il s'agit en fait d'un téléchargement des images préalable à l'affichage de la page, ce qui permet un affichage direct de l'intégralité de la page, plus esthétique.

cela se fait en Javascript, un script parmi des milliers d'autres.

si vous pouviez me donner une série d'astuce pour accelerer la vitesse de chargement de mes pages
tu peux tester tes pages chez WSO.
ce n'est pas la peine de suivre les recommandations à la lettre mais cela te permettra de chiffrer le poids des éléments et les temps de chargement et te permettra de définir les points que tu dois améliorer en priorité.

est il possible en php de spécifier une zone a recharger ou est on obligé de reactualiser une page entiere lors d'un evenement
tu peux ne recharger qu'une partie grâce à des interactions avec Javascript, on parle d'Ajax.
0
leod Messages postés 98 Date d'inscription samedi 12 janvier 2008 Statut Membre Dernière intervention 30 janvier 2009 2
16 mars 2008 à 12:08
encore toi ^^

décidément je pourrai dire que tu m'a tout appris ^^

eh bien ca me parrait super tout ca surtout les images en repeat de petites taille !
je vais essayer de comprendre comment marche tout ca et le mettre en action
tu m'a donné 2 liens que je cherchai desesperement :p

encore une fois merci beaucoup
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
16 mars 2008 à 13:37
salut,

c'est avec plaisir, à plus !
0