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

Citation:

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

28/12/2010, 20h09	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 001 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 001 Points : 45 077 Points : 45 077	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 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

29/12/2010, 08h25	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 001 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 001 Points : 45 077 Points : 45 077	à 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 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

28/12/2010, 08h59	#2
dukej Membre expérimenté Duke Jikel Inscription : mai 2010 Messages : 340 Détails du profil Informations personnelles : Nom : Duke Jikel Informations forums : Inscription : mai 2010 Messages : 340 Points : 548 Points : 548	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.
	00

28/12/2010, 18h30	#3
Ghostly Invité de passage Inscription : décembre 2010 Messages : 2 Détails du profil Informations forums : Inscription : décembre 2010 Messages : 2 Points : 0 Points : 0	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...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email