OVH Cloud OVH Cloud

problème d'affichage pour un non spécialiste

20 réponses
Avatar
Didier
Bonjour à tous.
J'ai un problème d'affichage pour le site http://scoescrime.fr (sous
spip 1.9.2i).
Ok avec Firefox et Opera, j'ai une image dont la dimension verticale
"explose" sous Chrome et Safari.
Comme je ne suis pas du tout un spécialiste des navigateurs et du html,
je prendrais bien quelques pistes pour essayer de corriger ça.
Merci à ceux que ça inspirera.
Didier.

10 réponses

1 2
Avatar
Didier
Guy Gruais a écrit :
Bonjour,

Vous allez être infiniment heureux d'apprendre que Guy Gruais vient
d'écrire :

J'ajouterais que l'image réelle fait 640 x 113 pixels


Je voulais dire 640 x 453


Merci à tous.
Effectivement, l'image prend toute la hauteur que la div peut s'arroger
en fonction du reste, c'est du moins ce que je comprends.
J'ai mis des dimensions en pixel (j'ai divisé par 4 les dimensions de
l'image); est-ce que cela consomme du temps ?
Firefox et Opera ne rendent pas cela, est-ce dû à un défaut de leut part
(après tout, on pourrait vouloir avoir ce résultat), ou à une
intelligence supérieure de leur part aussi ?
Je ne suis qu'un autodidacte, j'avoue que ce n'est parfois pas simple,
ces réactions diverses des navigateurs.
J'avais tendance à faire confiance à Firefox et Opera.
Didier.
Avatar
Guy Gruais
Bonjour,

Vous allez être infiniment heureux d'apprendre que Didier vient d'écrire
:

J'ai mis des dimensions en pixel (j'ai divisé par 4 les dimensions de
l'image); est-ce que cela consomme du temps ?



Effectivement dans le fichier-source, les dimensions ont été divisées
par 4.
Mais l'image fait toujours 640 x 453.
C'est l'image elle-même qui doit être réduite par 4 (linéairement) et
l'ordinateur de l'internaute n'aura pas à réduire la photo pour la
mettre au format souhaité

Firefox et Opera ne rendent pas cela,



Chez moi, Firefox, Chrome, Opera et IE rendent correctement la page.

--
Cordialement.


http://fonderie.indret.free.fr/
Avatar
Guy Gruais
Bonjour,

Vous allez être infiniment heureux d'apprendre que Guy Gruais vient
d'écrire :

Firefox et Opera ne rendent pas cela,



Chez moi, Firefox, Chrome, Opera et IE rendent correctement la page.



Il faut peut-être réactualiser votre page

--
Cordialement.


http://fonderie.indret.free.fr/
Avatar
Didier
Guy Gruais a écrit :
Bonjour,

Vous allez être infiniment heureux d'apprendre que Didier vient d'écrire :

J'ai mis des dimensions en pixel (j'ai divisé par 4 les dimensions de
l'image); est-ce que cela consomme du temps ?



Effectivement dans le fichier-source, les dimensions ont été divisées
par 4.
Mais l'image fait toujours 640 x 453.


Excusez-moi, mais je ne comprends pas : comment une image dont la source
a vu ses dimensions divisées par 4 (dès le fichier sur mon disque dur
local) peut se retrouver 16 (4x4) plus grande une fois dans la page html ?
Merci.
Didier.
Avatar
Didier
Guy Gruais a écrit :
Bonjour,

Vous allez être infiniment heureux d'apprendre que Guy Gruais vient
d'écrire :

Firefox et Opera ne rendent pas cela,



Chez moi, Firefox, Chrome, Opera et IE rendent correctement la page.



Il faut peut-être réactualiser votre page



Je l'ai fait bien entendu, et avant le changement de % en px, Chrome et
IE rendaient effectivement une image complètement étirée vers le bas,
mais pas Firefox et Opera.
Didier.
Avatar
LeLapin
Didier a tapoté du bout de ses petites papattes :
Guy Gruais a écrit :
Bonjour,

Vous allez être infiniment heureux d'apprendre que Didier vient d'écrire :

J'ai mis des dimensions en pixel (j'ai divisé par 4 les dimensions de
l'image); est-ce que cela consomme du temps ?



Effectivement dans le fichier-source, les dimensions ont été divisées par
4.
Mais l'image fait toujours 640 x 453.


Excusez-moi, mais je ne comprends pas : comment une image dont la source a vu
ses dimensions divisées par 4 (dès le fichier sur mon disque dur local) peut
se retrouver 16 (4x4) plus grande une fois dans la page html ?



Parce que le code html demande au navigateur d'agrandir l'image à la
taille précisée.

--
LeLapin
Avatar
Guy Gruais
Bonjour,

Vous allez être infiniment heureux d'apprendre que Didier vient d'écrire
:

Excusez-moi, mais je ne comprends pas : comment une image dont la
source a vu ses dimensions divisées par 4 (dès le fichier sur mon
disque dur local) peut se retrouver 16 (4x4) plus grande une fois
dans la page html ?



L'image chargée sur votre site fait 640 x 543 pixels pour environ 30 ko
Dans votre fichier-source, vous indiquez qu'il faut la réduire à 160 x
113 pixels ce que fait l'ordinateur de l'internaute qui vient sur votre
site.
Donc cet ordinateur télécharge une image de 30 ko puis ensuite la
redimensionne au format désigné.
Alors que si vous chargiez sur votre site une image au format voulu -
soit 160 x 113 - elle ne ferait qu'environ 2,5 ko.
Donc l'ordinateur de l'internaute chargerait alors une image de 2,5 ko
et n'aurait pas besoin ensuite de la redimensionner.
D'où double gain de temps.
Certes ce gain reste minime s'il n'y a qu'une image sur la page mais
peut devenir intéressant si ces images devenaient plus nombreuses. C'est
pourquoi il est bon de prendre l'habitude de charger une image
directement au format voulu.
--
Cordialement.


http://fonderie.indret.free.fr/
Avatar
Didier
Guy Gruais a écrit :
Bonjour,

Vous allez être infiniment heureux d'apprendre que Didier vient d'écrire :

Excusez-moi, mais je ne comprends pas : comment une image dont la
source a vu ses dimensions divisées par 4 (dès le fichier sur mon
disque dur local) peut se retrouver 16 (4x4) plus grande une fois
dans la page html ?



L'image chargée sur votre site fait 640 x 543 pixels pour environ 30 ko
Dans votre fichier-source, vous indiquez qu'il faut la réduire à 160 x
113 pixels ce que fait l'ordinateur de l'internaute qui vient sur votre
site.
Donc cet ordinateur télécharge une image de 30 ko puis ensuite la
redimensionne au format désigné.
Alors que si vous chargiez sur votre site une image au format voulu -
soit 160 x 113 - elle ne ferait qu'environ 2,5 ko.
Donc l'ordinateur de l'internaute chargerait alors une image de 2,5 ko
et n'aurait pas besoin ensuite de la redimensionner.
D'où double gain de temps.
Certes ce gain reste minime s'il n'y a qu'une image sur la page mais
peut devenir intéressant si ces images devenaient plus nombreuses. C'est
pourquoi il est bon de prendre l'habitude de charger une image
directement au format voulu.


Oups, effectivement, ma réponse était idiote, j'ai confondu avec une
autre image.
Celle-ci fait bien la dimension que vous dites.
Ce sera la seule (heureusement, elle est bien moche, mais on me l'impose).
Je vais la garder comme cela, parce qu'il faut que le visiteur, attiré
par cette merveille, puisse cliquer dessus pour l'agrandir à sa taille
normale.
Merci de votre patience.
Didier.
Avatar
Olivier Miakinen
Le 14/12/2010 22:55, Didier répondait à Guy Gruais :

[...]
Donc cet ordinateur télécharge une image de 30 ko puis ensuite la
redimensionne au format désigné.
Alors que si vous chargiez sur votre site une image au format voulu -
soit 160 x 113 - elle ne ferait qu'environ 2,5 ko.





Voilà, exactement.


Je vais la garder comme cela, parce qu'il faut que le visiteur, attiré
par cette merveille, puisse cliquer dessus pour l'agrandir à sa taille
normale.



Mauvaise raison.


Cette fonctionnalité est réalisée très facilement sans obliger à charger
la grande image avant de cliquer, par exemple :

<a href="image640x543.jpg"><img src="image160x113.jpg" alt="..."
title="Cliquer pour agrandir"></a>


Autre exemple, sur Wikipédia :
http://fr.wikipedia.org/wiki/Ensemble_de_Mandelbrot

La première image fait 300x225 pixels. En cliquant dessus on obtient une
image de 800x600 pixels. Et en cliquant une seconde fois, on a
l'image de plus haute résolution, 2560x1920 pixels.

--
Olivier Miakinen
Avatar
LeLapin
Olivier Miakinen a tapoté du bout de ses petites papattes :
Le 14/12/2010 22:55, Didier répondait à Guy Gruais :

[...]
Donc cet ordinateur télécharge une image de 30 ko puis ensuite la
redimensionne au format désigné.
Alors que si vous chargiez sur votre site une image au format voulu -
soit 160 x 113 - elle ne ferait qu'environ 2,5 ko.





Voilà, exactement.


Je vais la garder comme cela, parce qu'il faut que le visiteur, attiré
par cette merveille, puisse cliquer dessus pour l'agrandir à sa taille
normale.



Mauvaise raison.


Cette fonctionnalité est réalisée très facilement sans obliger à charger
la grande image avant de cliquer, par exemple :

<a href="image640x543.jpg"><img src="image160x113.jpg" alt="..."
title="Cliquer pour agrandir"></a>


Autre exemple, sur Wikipédia :
http://fr.wikipedia.org/wiki/Ensemble_de_Mandelbrot

La première image fait 300x225 pixels. En cliquant dessus on obtient une
image de 800x600 pixels. Et en cliquant une seconde fois, on a
l'image de plus haute résolution, 2560x1920 pixels.



Principe des vignettes chez tous ceux qui y ont un peu réfléchi.

--
LeLapin
1 2