18041 sujets

Questions générales et questions de débutants

Problème backround PNG qui met beaucoup (trop) de temps à s'afficher

salut à tous !

j'ai un petit problème avec mon site. voilà : dans la règle de style de mon conteneur j'ai mis un background image en PNG afin d'obtenir un design fixe sur mon site (voir lien plus bas).

ça marche très bien sauf que ce background met un temps fou à s'afficher (tant qu'il n'est pas dans le cache du navigateur) et ça gêne beaucoup la lisibilité du site avant qu'elle apparaisse. en plus ça fait très moche. ce problème de lenteur "anormale" d'afichage est présent avec firefox 3 mais aussi avec IE 7.

pourtant mon image n'est pas extrêmement lourde (656 ko). le truc c'est qu'elle a des coins arrondis donc je suis obligé de la laisser en PNG et comme c'est à la base une photo je ne peux pas trop non plus la compresser... d'ailleurs en jpg je perdrais ma transparence sur mes angles...

je n'arrive pas à diagnostiquer le problème et donc à le résoudre...

quelqu'un peut m'aider ?

voici mon site : http://moreibiza.free.fr

merci d'avance !

manolo
Salut,

sujet déplacé (pas de rapport avec CSS).

manolo25 a écrit :
pourtant mon image n'est pas extrêmement lourde (656 ko).
Eh bien si ! Pour un site c'est énorme. Smiley langue

manolo25 a écrit :
je n'arrive pas à diagnostiquer le problème et donc à le résoudre...
La solution s'appelle "compression des images" : soit avec ton logiciel graphique préféré, soit avec un outil comme smushit.

Pour info on préconise de ne pas dépasser 100ko pour une page d'accueil et 150ko pour les autres pages.
Modifié par Heyoan (22 Feb 2009 - 11:49)
merci beaucoup pour ces conseils!

je vais donc tâcher d'alléger mon image...

mais je dois rester sur du PNG, pour conserver mon canal alpha et par rapport au fait que mon image soit une image (pasqu'en gif j'ai déjà essayé et il y a une perte de qualité importante).

manolo
Administrateur
Bonjour,

un passage dans pngnq (puis OptinPNG) donne 192ko et ceci:
upload/39-dernier-nq8.png

Son algorithme pour descendre à 256 couleurs (comme les GIFs) est bien plus efficace sur les photos ("quantisation" le q de pngnq) mais il plante régulièrement sur la conservation de la transparence.
Là il y a un souci sur le pli du rideau au centre et sur le front de la mamzelle m'enfin pour une image de fond ...

Sinon tu peux créer un fond composé de ta photo et ton MAGNIFIQUE papier peint année 70 Smiley lol répété dessous, le tout de taille 4000x3000 environ. Un multiple de 8 pour la dimension du papier peint devrait aider JPEG à compresser l'image, en passant.

Ensuite il te faut un <div> #conteneur dans ton <body> (ça tu l'as déjà) et:
- tu appliques le fond immense sur le <body> de la page et tu centres le fond
- tu centres le conteneur de largeur fixe
body { background: url(trucimmense.jpg) center top no-repeat; }

#conteneur { width: 990px; margin: 0 auto; }

C'est une trouvaille de dew
merci beaucoup Felipe !

je vais mettre en ligne l'image telle que tu l'as réduite, pour voir la différence. elle devrait être notable !

l'idée de fusionner avec le body est intéressante, mais je ne pense pas que je vais laisser longtemps ces beaux papiers peints.

merci encore !

manolo
Sujet clos
Aller à