Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1361 connectés 

  FORUM HardWare.fr
  Graphisme
  Web design

  Image en background - Optimisation

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Image en background - Optimisation

n°814280
red factio​n
Posté le 24-04-2006 à 17:52:33  profilanswer
 

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
mood
Publicité
Posté le 24-04-2006 à 17:52:33  profilanswer
 

n°814568
red factio​n
Posté le 25-04-2006 à 10:09:49  profilanswer
 

[:yoyoz]  jen ai vraiment besoin

n°814627
Chahrazad
Posté le 25-04-2006 à 11:36:45  profilanswer
 

.

Message cité 1 fois
Message édité par Chahrazad le 10-06-2014 à 13:47:09
n°814638
Shinuza
This is unexecpected
Posté le 25-04-2006 à 11:45:02  profilanswer
 

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.
n°814643
red factio​n
Posté le 25-04-2006 à 11:48:24  profilanswer
 

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
n°814649
Danamir_
kodama
Posté le 25-04-2006 à 12:04:05  profilanswer
 

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]

n°814955
oualad
Posté le 25-04-2006 à 23:54:47  profilanswer
 

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
n°814978
Danamir_
kodama
Posté le 26-04-2006 à 08:33:00  profilanswer
 

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

n°815080
oualad
Posté le 26-04-2006 à 11:38:28  profilanswer
 

: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
n°815086
red factio​n
Posté le 26-04-2006 à 11:47:51  profilanswer
 

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

mood
Publicité
Posté le 26-04-2006 à 11:47:51  profilanswer
 

n°815091
oualad
Posté le 26-04-2006 à 11:53:04  profilanswer
 

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
n°815212
Chahrazad
Posté le 26-04-2006 à 16:24:05  profilanswer
 

.


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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Graphisme
  Web design

  Image en background - Optimisation

 

Sujets relatifs
gif sur image readyconvertir une image .png en .gif
Aide pour rendre transparent une partie de mon image[Flash] Commande pour atteindre une image
Planche contact II optimisationimages dans l'image...
image jpg vignette apres modificationBESOIN D'AIDE POUR CREER UN LOGO AVEC TEXTE ET IMAGE 3D
creation d'un site probleme avec image readyvisualisation d'une image dans un mail
Plus de sujets relatifs à : Image en background - Optimisation


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR