FireFox images moches [Résolu]

Pymento · 07/06/2011, 14h34

Bonjour, je sais que ce n'est pas exactement le bon endroit pour poster ça, mais de toutes les catégories ça me semblait être la meilleure.

J'ai plusieurs images png(avec de la transparence) qui ne s'affichent pas correctement sous firefox et parfaitement sous chrome ->

J'ai fais un peu de recherches ça pourrait venir de l'anti-aliasing.
Pour avoir une image nette sous firefox je suis obliger de zoomer.

Je ne sais absolument pas comment arranger ce problème, help !

vaneck · 07/06/2011, 17h51

bizarre cette histoire.
Essais de changer de format. En gif (mais tu vas perdre des couleurs) , en .jpg (si tu peux simuler la transparence), le top serait du .SVG qui assurerait un résultat parfait (mais faut le créer ou tenter de convertir ton image bitmap).

Pymento · 08/06/2011, 10h26

en GIF -> même résultat
JPG -> background non régulier donc impossible de simuler une transparence
SVG -> heuu je connais absolument pas ce format.

C'est de toute façon plus directement lié à la taille de l'image plutôt qu'a son format. En gros, une image grosse resized par le css en plus petit me donne ce résultat, si je laisse tel quel, c'est "lisse".

Pour l'instant la seule solution que j'ai trouvé c'est de redimensionner mes images directement à la même dimension que mon css.
Mais ça m'embête un peu :/

Bisûnûrs · 08/06/2011, 10h28

Pourtant c'est ce qu'il faut faire. Il ne faut pas s'étonner de voir son image modifiée lors d'un resize ..

Pymento · 08/06/2011, 11h03

Je me suis dis que si chrome et surtout IE y arrivaient... pourquoi pas FF !

vaneck · 08/06/2011, 13h44

Pour être rigoureux , il faut toujours laisser les images dans leur dimension d'affichage finale , si elle sont trop grande , çà ralentie le chargement , si elles sont trop petit çà pixelise.
Maintenant , si l'image n'ai pas prévu pour une dimension précise il reste le svg, un format vectoriel;

thelvin · 08/06/2011, 14h07

On peut voir l'URL de la page ?
Par défaut, Mozilla applique une interpolation bilinéaire, comme Chrome et IE, sauf si on lui demande le contraire pour améliorer les perfs.

Pymento · 08/06/2011, 14h18

c'est une page intranet, et en utilisant le cache, je peux faire complètement l'impasse sur les perfs de chargement des images.

@thelvin
Simplement :

Code :

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

1
2
3
4
5
6
7
 
<html>
<head/>
<body>
<img src="test.png" height="45px" width="45px" />
</body>
</html>

Mon soucis en fait est que ma page va être consulté par plusieurs type de résolution, et j'ai peur que sur un petit écran qui va "zoomer" l'image ne rende pas bien.
Je vais regarder du côté du svg, mais je ne peux pas perdre trop de temps sur cette problématique :/

thelvin · 08/06/2011, 14h24

Bon, et on peut voir test.png ?

. C'est pour ça que j'ai demandé une URL.

Pymento · 08/06/2011, 14h35

oups pardon, j'avais mal compris.

Voilà :

thelvin · 08/06/2011, 15h44

Ah ben oui, tiens.
Firefox n'est décidément pas terrible pour réduire les images.

Il semble que ça ait déjà été constaté, ici : http://www.graphicrating.com/2009/01...age-rendering/

Désolé, pas trouvé de solution simple.

vaneck · 08/06/2011, 21h12

Tu as définis la taille de l'image dans ton html, ce qui signifie que, quelque soit la taille de l'écrans , l'image aura toujours la même résolution, c'est a dire qu'elle occupera toujours 45 pixels de cotes, et çà ne peut pas changer, a part si tu as crée un script javascript pour modifier l'html en fonction de l'écrans.
Autrement dit , utilise une image de 45px de coté.

kéraunos · 08/06/2011, 21h22

Et si vraiment tu as des gens qui s'amusent à naviguer en zoom +300% avec leur navigateur et si tu es un peu graphiste, tu peux toujours t'orienter vers le SVG, parce que c'est une norme du W3C et que c'est facile avec le logiciel libre Inkscape.
C'est un format d'image vectorielle. L'image n'est convertie en bitmap qu'à l'affichage final.

Pymento · 10/06/2011, 14h24

Merci pour vos conseils,
même si je n'ai pas assez de temps à consacrer au format SVG, je passe le post en résolu.
(j'ai redimensionné mes images, la solution est suffisante pour de l'intranet applicatif).

07/06/2011, 14h34	#1
Pymento Membre confirmé Ingé. Info. Inscription : janvier 2008 Messages : 338 Détails du profil Informations personnelles : Sexe : Âge : 24 Localisation : France, Haute Garonne (Midi Pyrénées) Informations professionnelles : Activité : Ingé. Info. Informations forums : Inscription : janvier 2008 Messages : 338 Points : 273 Points : 273	FireFox images moches Bonjour, je sais que ce n'est pas exactement le bon endroit pour poster ça, mais de toutes les catégories ça me semblait être la meilleure. J'ai plusieurs images png(avec de la transparence) qui ne s'affichent pas correctement sous firefox et parfaitement sous chrome -> J'ai fais un peu de recherches ça pourrait venir de l'anti-aliasing. Pour avoir une image nette sous firefox je suis obliger de zoomer. Je ne sais absolument pas comment arranger ce problème, help ! __________________ Memento Quia Pulvis Es, Et In Pulverem ReverteriS
	00

08/06/2011, 10h26	#3
Pymento Membre confirmé Ingé. Info. Inscription : janvier 2008 Messages : 338 Détails du profil Informations personnelles : Sexe : Âge : 24 Localisation : France, Haute Garonne (Midi Pyrénées) Informations professionnelles : Activité : Ingé. Info. Informations forums : Inscription : janvier 2008 Messages : 338 Points : 273 Points : 273	en GIF -> même résultat JPG -> background non régulier donc impossible de simuler une transparence SVG -> heuu je connais absolument pas ce format. C'est de toute façon plus directement lié à la taille de l'image plutôt qu'a son format. En gros, une image grosse resized par le css en plus petit me donne ce résultat, si je laisse tel quel, c'est "lisse". Pour l'instant la seule solution que j'ai trouvé c'est de redimensionner mes images directement à la même dimension que mon css. Mais ça m'embête un peu :/ __________________ Memento Quia Pulvis Es, Et In Pulverem ReverteriS
	00

08/06/2011, 11h03	#5
Pymento Membre confirmé Ingé. Info. Inscription : janvier 2008 Messages : 338 Détails du profil Informations personnelles : Sexe : Âge : 24 Localisation : France, Haute Garonne (Midi Pyrénées) Informations professionnelles : Activité : Ingé. Info. Informations forums : Inscription : janvier 2008 Messages : 338 Points : 273 Points : 273	Je me suis dis que si chrome et surtout IE y arrivaient... pourquoi pas FF ! __________________ Memento Quia Pulvis Es, Et In Pulverem ReverteriS
	00

08/06/2011, 14h35	#10
Pymento Membre confirmé Ingé. Info. Inscription : janvier 2008 Messages : 338 Détails du profil Informations personnelles : Sexe : Âge : 24 Localisation : France, Haute Garonne (Midi Pyrénées) Informations professionnelles : Activité : Ingé. Info. Informations forums : Inscription : janvier 2008 Messages : 338 Points : 273 Points : 273	oups pardon, j'avais mal compris. Voilà : __________________ Memento Quia Pulvis Es, Et In Pulverem ReverteriS
	00

10/06/2011, 14h24	#14
Pymento Membre confirmé Ingé. Info. Inscription : janvier 2008 Messages : 338 Détails du profil Informations personnelles : Sexe : Âge : 24 Localisation : France, Haute Garonne (Midi Pyrénées) Informations professionnelles : Activité : Ingé. Info. Informations forums : Inscription : janvier 2008 Messages : 338 Points : 273 Points : 273	Merci pour vos conseils, même si je n'ai pas assez de temps à consacrer au format SVG, je passe le post en résolu. (j'ai redimensionné mes images, la solution est suffisante pour de l'intranet applicatif). __________________ Memento Quia Pulvis Es, Et In Pulverem ReverteriS
	00

07/06/2011, 17h51	#2
vaneck Membre du Club Inscription : novembre 2010 Messages : 80 Détails du profil Informations forums : Inscription : novembre 2010 Messages : 80 Points : 51 Points : 51	bizarre cette histoire. Essais de changer de format. En gif (mais tu vas perdre des couleurs) , en .jpg (si tu peux simuler la transparence), le top serait du .SVG qui assurerait un résultat parfait (mais faut le créer ou tenter de convertir ton image bitmap).
	00

08/06/2011, 10h28	#4
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Pourtant c'est ce qu'il faut faire. Il ne faut pas s'étonner de voir son image modifiée lors d'un resize ..
	00

08/06/2011, 13h44	#6
vaneck Membre du Club Inscription : novembre 2010 Messages : 80 Détails du profil Informations forums : Inscription : novembre 2010 Messages : 80 Points : 51 Points : 51	Pour être rigoureux , il faut toujours laisser les images dans leur dimension d'affichage finale , si elle sont trop grande , çà ralentie le chargement , si elles sont trop petit çà pixelise. Maintenant , si l'image n'ai pas prévu pour une dimension précise il reste le svg, un format vectoriel;
	00

08/06/2011, 14h07	#7
thelvin Expert Confirmé Sénior Inscription : septembre 2004 Messages : 5 066 Détails du profil Informations forums : Inscription : septembre 2004 Messages : 5 066 Points : 6 988 Points : 6 988	On peut voir l'URL de la page ? Par défaut, Mozilla applique une interpolation bilinéaire, comme Chrome et IE, sauf si on lui demande le contraire pour améliorer les perfs.
	00

08/06/2011, 14h24	#9
thelvin Expert Confirmé Sénior Inscription : septembre 2004 Messages : 5 066 Détails du profil Informations forums : Inscription : septembre 2004 Messages : 5 066 Points : 6 988 Points : 6 988	Bon, et on peut voir test.png ? . C'est pour ça que j'ai demandé une URL.
	00

08/06/2011, 15h44	#11
thelvin Expert Confirmé Sénior Inscription : septembre 2004 Messages : 5 066 Détails du profil Informations forums : Inscription : septembre 2004 Messages : 5 066 Points : 6 988 Points : 6 988	Ah ben oui, tiens. Firefox n'est décidément pas terrible pour réduire les images. Il semble que ça ait déjà été constaté, ici : http://www.graphicrating.com/2009/01...age-rendering/ Désolé, pas trouvé de solution simple.
	00

08/06/2011, 21h12	#12
vaneck Membre du Club Inscription : novembre 2010 Messages : 80 Détails du profil Informations forums : Inscription : novembre 2010 Messages : 80 Points : 51 Points : 51	Tu as définis la taille de l'image dans ton html, ce qui signifie que, quelque soit la taille de l'écrans , l'image aura toujours la même résolution, c'est a dire qu'elle occupera toujours 45 pixels de cotes, et çà ne peut pas changer, a part si tu as crée un script javascript pour modifier l'html en fonction de l'écrans. Autrement dit , utilise une image de 45px de coté.
	00

08/06/2011, 21h22	#13
kéraunos Membre régulier Inscription : janvier 2005 Messages : 157 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2005 Messages : 157 Points : 71 Points : 71	Et si vraiment tu as des gens qui s'amusent à naviguer en zoom +300% avec leur navigateur et si tu es un peu graphiste, tu peux toujours t'orienter vers le SVG, parce que c'est une norme du W3C et que c'est facile avec le logiciel libre Inkscape. C'est un format d'image vectorielle. L'image n'est convertie en bitmap qu'à l'affichage final.
	00

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