Image en background - Optimisation

Image en background - Optimisation - Web design - Graphisme

Marsh Posté le 24-04-2006 à 17:52:33    

Voila sur mon site j'ai une image background en dessous de chaque page. (Une image différente par page, c’est pas moi qui l'ait décide c'est comme ça) Comme chaque image est de taille assez importante (80-100k) l'affichage du site prend du temps. Le texte s'affiche en premier lieu puis vient seulement l'image en dessous. Il y a en tout une 15aine d’images.
 
J'aimerais que l’affichage se fasse plus rapidement (image de moins bonne qualité affichée avant, image découpée en plusieurs parties,...). J'ai essaye avec du progressive Jpeg mais cela ne donne rien (l'image s’affiche d'un seul coup)  
 

Code :
  1. <table style="background-repeat:no-repeat;background-image:url('./images/test.jpg')>"


 
alors que si j’utilise une balise img le progressive se fait convenablement :/
 
 
J'ai également essaye 2 autres techniques
 
- Precharger les images avant, a l'aide de

Code :
  1. <img src=./images/xx.jpg style="display:none">

. Cela fonctionne mais la première page ne s’affiche pas du tout tant que toutes les images n'ont pas été chargées. Bref on attend 3h avant d’avoir la première page, mais après le site s’affiche très rapidement. Ce que j’aurai voulu c'etait arriver sur la première page d'un seul coup puis après (lorsque la première page a été chargée et que l'utilisateur commence a lire le texte) commencer a precharger les images....
 
-Utiliser deux frames. Une avec le contenu du site et l'autre avec les images préchargées. Problème : Il y a un clignotement assez important lorsque l'on passe d'une page à l'autre du site sous IE et mozilla,  non visible lorsque l'on n'utilise pas les frames.
 
Pas essayé
- Avoir deux types d'images : une de bonne qualité a afficher et une servant uniquement lors du prechargement (avec un blur assez élevé et une compression max). Au début du site je precharge les images basses qualité. Apres lorsque l’utilisateur demande une page, j’affiche directement limage de basse qualité puis télécharge l'autre. Problème : possibilité de faire ça sans javascript ?
 
-Découper les images a la google map. Problème : comment faire ça en html ? Est ce vraiment utile?
 
 
A oui, j'allais oublier je ne peux pas utiliser de javascript car dans certains domaines l'utilisateur n'a pas les droits et le site ne fonctionnera pas correctement.
Voila, si vous avez des idées, conseil concernant ce genre de problème...


Message édité par red faction le 25-04-2006 à 11:45:54
Reply

Marsh Posté le 24-04-2006 à 17:52:33   

Reply

Marsh Posté le 25-04-2006 à 10:09:49    

[:yoyoz]  jen ai vraiment besoin

Reply

Marsh Posté le 25-04-2006 à 11:36:45    

.

Message cité 1 fois
Message édité par Chahrazad le 10-06-2014 à 13:47:09
Reply

Marsh Posté le 25-04-2006 à 11:45:02    

Une autre solution, penser que tout le monde ne navigue pas avec l'ADSL :D


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 25-04-2006 à 11:48:24    

oui je sais, mais ces images constituent le concept même du site donc les retirer n'est pas du tout envisageable ......
je posterai bien l'url pour montrer a quoi ca ressemble mais je n'ai pas envie de me faire bannir pour spam, surtout que c'est un site commercial....
 
Chahrazad> merci jessaie tout de suite


Message édité par red faction le 25-04-2006 à 11:49:53
Reply

Marsh Posté le 25-04-2006 à 12:04:05    

Bah si tu veux une solution de sauvage tu peux doubler tous tes backgrounds, en mettant celui de plus basse qualité en dessous. :spamafote:
 
Bon par contre le navigateur risque de faire la gueule au niveau de l'utilisation de la mémoire, mais faut bien que ça fasse mal quelque part. :o
 
Exemple :  

Code :
  1. <style>
  2. #bg
  3. {
  4. background-image: url('bg_low.jpg');
  5. width: 150px;
  6. height: 150px;
  7. }
  8. #bg .bghigh
  9. {
  10. background-image: url('bg_high.jpg');
  11. width: 100%;
  12. height: 100%;
  13. }
  14. </style>
  15. <div id="bg">
  16. <div class="bghigh">
  17. </div>
  18. </div>


 
bg_low.jpg s'affiche rapidement, puis bg_high.jpg se charge pendant ce temps, et le remplace. [:huit]

Reply

Marsh Posté le 25-04-2006 à 23:54:47    

Chahrazad a écrit :

Salut,  
 
moi pour précharger j'insère en début de <body> (en plus des balises permettant d'afficher les images à leur vrai emplaçement) :
 
<div style="position: absolute; left: 0; top: -5000px">
Votre navigateur ne supporte pas les CSS.<br />
Si des images s'affichent ci-dessous, nous vous prions de ne pas en tenir compte.
<hr />
<img src="image_01.jpg" alt="" />
<img src="image_02.jpg" alt="" />
<img src="image_03.jpg" alt="" />
</div>

 
Et je met dans l'ordre de chargement... Si tu faisait ça en mettant au début toutes les images constituant la page n°1 puis celles des autres pages, alors je pense que cela chargerai de la façon dont tu le souhaite... Maintenant moi je m'en sers peu / jamais de ça alors je garantie rien...


 
Bonjour,
une petite question: peux-tu m'expliqer car je ne comprends pas très bien.
Tu mets tes images à "top=-5000px", elles ne sont donc pas visibles, mais, ne sont-elles pas pour autant chargées? Du coup, cela n'arrangerait-il rien?
La suite de ton code me pose aussi problème :pt1cable:  
 
Excusez moi de m'imiscer dans le post, mais j'aimerais être un peu éclairé. Histore de ne pas mourrir idiot :lol:


Message édité par oualad le 25-04-2006 à 23:55:38

---------------
Un forum étant un lieu d'échange, j'accepte les MP uniquement pour les rendez-vous coquins - Imac PPC G3 350Mhz Mac OS X 10.3.9
Reply

Marsh Posté le 26-04-2006 à 08:33:00    

c'est le principe du préchargement, faire telecharger au navigateur des images qui ne sont pas visibles, pour qu'il les ait dans le cache quand il en aura vraiment besoin :o

Reply

Marsh Posté le 26-04-2006 à 11:38:28    

:bounce:  
Ok, ce qui me posait probleme était ceci:

Code :
  1. ...
  2. Votre navigateur ne supporte pas les CSS.<br />
  3. Si des images s'affichent ci-dessous, nous vous prions de ne pas en tenir compte.
  4. <hr />
  5. ....


 
Je viens de comprendre, c'est une sécurité dans le cas où l'utilisateur aurait toujours un navigateur préhistorique :lol:  
 
Merci bien :hello:  


---------------
Un forum étant un lieu d'échange, j'accepte les MP uniquement pour les rendez-vous coquins - Imac PPC G3 350Mhz Mac OS X 10.3.9
Reply

Marsh Posté le 26-04-2006 à 11:47:51    

prehistorique peut etre n'empeche que le support css est encore loin d'etre implementé a 100% dans la plupart des navigateurs.
 

Reply

Marsh Posté le 26-04-2006 à 11:47:51   

Reply

Marsh Posté le 26-04-2006 à 11:53:04    

D'ac avec toi, mais force est de constater qu'ils vont devoir s'y mettre. Et puis les CSS permettent tellement de choses qu'on peut facilement résoudre certains problèmes d'affichage.
Quand je pense qu'il m'a fallu quelques soirées "cool" pour bien conprendre le fonctionnement, je ne ferais qu'encourager son utilisation...


---------------
Un forum étant un lieu d'échange, j'accepte les MP uniquement pour les rendez-vous coquins - Imac PPC G3 350Mhz Mac OS X 10.3.9
Reply

Marsh Posté le 26-04-2006 à 16:24:05    

.


Message édité par Chahrazad le 10-06-2014 à 13:46:58
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed