Highslide : chargement des images lent

**Ghostly** · 25/12/2010, 16h20

Bonjour,

Je m'occupe actuellement du site d'un proche, et je rencontre quelques difficultés avec le module highslide (un image viewer en JS, pour ceux qui ne connaissent pas) : en effet, le chargement des images (les zoomé, pas les thumbnails) est trèèèèèès long.

Voilà le site en question : http://stephaneprotic.free.fr/

et le code source d'une page type des images :

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Stéphane Protic - Works</title>
	   <meta name="description" content="Site web de Stéphane Protic, artiste plasticien."/>
       <meta name="keywords" content="Stephane,Stéphane,STEPHANE,Protic,PROTIC,protic,stephane,artiste,Artiste,plasticien,Plasticien"/>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="icon" type="image/png" href="Design-ressources/favicon32.png" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Blacknight" href="design-stf.css" />
 
       <script type="text/javascript" src="highslide/highslide-with-gallery.packed.js"></script>
	   <script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
       <link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]-->
	</head>
   <body>
    <div id="entete">      
     <br/><p><a id="linkback" href="index.html"><img  class="entete" src="Design-ressources/stfprotic.png" alt="Stephane Protic" /></a></p>
    </div>
 
 
	<div id="menu">
  <ul> 
	<li><a href="Text.htm"><span class="normalmenu">  Texte</span></a></li>
    <li><a href="Travaux.htm"><span class="currentmenu">  Travaux/Works</span></a></li>
    <li><a href="Expositions.htm"><span class="normalmenu"> Expositions/Exhibitions</span></a></li>
    <li><a href="Contact.htm"><span class="normalmenu"> Contact</span></a></li>
 
    <li><a href="liens.htm"><span class="normalmenu"> Liens/Links</span></a></li>
    <li><a href="Support.htm"><span class="normalmenu"> Support</span></a></li>
  </ul>
</div>
 
<div id="back"><a href="Travaux.htm"> <p> &lt; BACK </p> </a></div>
 
<div class="corps">
 
<a  href="images/GINGER_LYNN.jpg" class="highslide, idoles" onclick="return hs.expand(this)">
	<img src="images/GINGER_LYNN_MINI.jpg" 
		alt="Cliquez pour agrandir" />
</a>
 
<div class="highslide-caption">
Ginger Lynn<br/>
Techniques mixtes sur bois<br/>
20x30 cm 2009
</div>
 
<a  href="images/SEKA.jpg" class="highslide, idoles" onclick="return hs.expand(this)">
 
	<img src="images/SEKA_MINI.jpg" 
		alt="Cliquez pour agrandir" />
</a>
 
<div class="highslide-caption">
Seka<br/>
Techniques mixtes sur bois<br/>
20x30 cm 2009
</div><br/><br/>
 
<a href="images/TRACY_LORDS.jpg" class="highslide, idoles2" onclick="return hs.expand(this)">
	<img src="images/TRACY_LORDS_MINI.jpg" 
		alt="Cliquez pour agrandir" />
</a>
 
<div class="highslide-caption">
Tracy Lords<br/>
Techniques mixtes sur bois<br/>
20x30 cm 2009
</div>
 
<a  href="images/CHRISTY_CANYON.jpg" class="highslide, idoles" onclick="return hs.expand(this)">
	<img src="images/CHRISTY_CANYON_MINI.jpg" 
		alt="Cliquez pour agrandir" />
</a>
 
<div class="highslide-caption">
Christy Canyon<br/>
Techniques mixtes sur bois<br/>
 
20x30 cm 2009
</div>
 
 
</div>	
 
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12625063-1");
pageTracker._trackPageview();
} catch(err) {}</script>
   </body>
</html>

Par logique, j'ai pensé que cela venait de leur poids, et après bien des allègement, des pertes de qualité, cela ne change pas beaucoup, alors que bien d'autre sites web utilise highslide, ou d'autre image viewer avec des images 10 fois plus lourde, et leurs chargements est quasi-instantané.

Je pense donc que cela est du au redimensionnement automatique de l'image, mais je ne peut pas me permettre d'enlever cette option : c'est bien trop utile, et tout les sites que j'ai visité ont cette option sans pour autant perdre en fluidité.

Je demande donc de l'aide pour savoir s'il n'y aurais pas un moyen d'accélérer le processus de "zoom", si j'ai fais une erreur (bien possible), ou si cela viens d'autre chose (hébergeur, incompatibilité des navigateurs...)

Si cela vient de highslide, et qu'il n'y a pas de solution, auriez-vous un autre image viewer plus léger, plus rapide, à me conseiller ?

Merci d'avance.

**dukej** · 28/12/2010, 08h59

Si je prend l'exemple de cette page :
http://stephaneprotic.free.fr/Serie14.htm

Par défaut la miniature chargée EST LA GROSSE IMAGE
et l'image que tu penses avoir optimisé pèse 1.3Mo pour du 1400x1400 je n'appelle pas ça optimisé.
Un jpg optimisé fait 200ko pour cette résolution voire maximum 400ko.

**Ghostly** · 28/12/2010, 18h30

Effectivement, celle-ci a un poids énorme, mais prends une autre page :
http://stephaneprotic.free.fr/Serie15.htm

Les dimensions sont bien plus grande et font 100ko...

**SpaceFrog** · 28/12/2010, 20h09

heu 1390 Ko ....

utilise des optimiseurs d'images comme riot ou pngoptimiser
réduis le poids des images en supprimant les données exif
éventuellement créé un preloader d'images afin de precharger les images

**dukej** · 29/12/2010, 08h22

Envoyé par Ghostly

Effectivement, celle-ci a un poids énorme, mais prends une autre page :
http://stephaneprotic.free.fr/Serie15.htm

Les dimensions sont bien plus grande et font 100ko...

Ben dans ce cas présent je n'ai aucun problème de vitesse de chargement

**SpaceFrog** · 29/12/2010, 08h25

à signaler que tu es sur un serveur partagé, et que si la fréquentation est importante sur ce serveur la bande passante sera réduite... d'ou l'imporatance de reduire au maximum le poids des images

Highslide : chargement des images lent

JavaScript

Discussions similaires

Partager

Partager