Bonsoir,

Je viens solliciter votre aide après avoir parcouru des heures sur la toile sans trouver de réponses à ma question. J'ai intégré des images dans un projet, et j'ai remarqué que Mozilla Firefox avait un rendu fidèle à mes images. Tandis que, à ma grande surprise, Google Chrome floute mes images, que ce soit l'arrière plan ou n'importe quelle autre image.

J'ai essayé d'appliquer des max-width ou max-height (pixel ou %), des min, des image-rendering, etc. Rien n'y fais, le problème persiste.
J'ai l'impression que le problème vient du fait que j'applique un width à mes images donc j'oblige au navigateur à les redimensionner lui même, mais Mozilla le supporte très bien.. Bref, je ne sais plus quoi faire !

Les images parleront d'elles mêmes.

Sur Chrome

Sur Mozilla

Je sais que je peux paraître maniaque, mais ayant passé des heures à faire ces images, ça m'embête beaucoup qu'elles soient si flou sur Chrome qui est un navigateur beaucoup utilisé.

.image_ressources {
	width:60%;
	height:auto;
}


#logo {
	width:50%;
	height:auto;
} 

<img id="image_energie" class="image_ressources" src="image/ressource/Energie_transparent 512x320.png" title="energie" alt="energie"  />

(Les autres images de la class "image_ressources" ont un code HTML similaire mais avec un id/src/title/alt les désignant)

<a href="accueil.php"><img id="logo" src="image/Logo.png" alt="logo" /></a>

Bref, mes 180 images ont un rendu dégueulasse. Si jamais cette différence de rendu est normale, n'hésitez pas à me le dire également, je n'étais pas au courant.

Je vous remercie d'avance !

Bonjour,

déjà, pourquoi un width: 60% sur les images ? Tu le dis très justement, pourquoi obliger le navigateur à les redimensionner ? Car cela a un autre effet pervers : tu fais charger au navigateur (et donc à l'utilisateur⋅ice) des fichiers plus gros, plus lourd, pour afficher des miniatures.

Je te conseille vivement de les redimensionner dans un logiciel de retouche, et de fournir à ton site les images de la taille dans laquelle elles doivent s'afficher.

(quant à pourquoi c'est moins flou d'un côté que de l'autre, ça dépend du moteur de rendu, et je ne m'y connais pas assez pour te répondre sur ce point)

J'ai déjà essayé de les redimensionner à la taille voulue, mais ça me détruit tout le côté responsive du coup... Je ne peux pas l'avoir plus grande pour un écran plus grand, ou plus petite pour un écran plus petit.

Je ne comprends pas pourquoi ça ne fonctionne pas avec Google Chrome, pour une propriété aussi simple que celle-ci ! Je ne vais quand même pas retailler mes 180 images 5 fois chacune pour chaque Media Queries non ? J'imagine qu'il y a plus simple...

_____________

EDIT :

Ah bah finalement je n'ai pas cherché encore toute une nuit pour rien, il paraît que c'est un bug de Chrome récent, à moins que mon anglais me fasse défaut :

https://productforums.google.com/forum/#!topic/chrome/VezviJoWRsI

Possibilité de palier le problème en rajoutant cette ligne de CSS sur les images, pour ceux qui ont le même problème :

image-rendering: -webkit-optimize-contrast;

N'oubliez pas de vider le cache avant de vérifier si ça fonctionne, pour certaines images c'est une manip' nécessaire j'ai l'impression. Du moins sur mon Google Chrome.

Résolu pour le moment du coup ! Merci à toi quand même Lamercarlate

-
Edité par Anonyme 13 février 2018 à 8:03:06

Bonjour,

Bug récent il faut le dire vite... L'article que tu mets en lien concerne la version 46 de Chrome et est daté d'octobre 2015, autant dire une éternité dans le monde du développement web... Si je ne me trompe pas mon PC doit avoir la version 63 de Chrome.

Pour commencer, va dans les Paramètres de Chrome, puis dans les Paramètres Avancés et décoche la ligne "Accélération matérielle".

Ensuite, comme le dit Lamecarlate, imposer une width à 60% ce n'est franchement pas top. Il suffirait de faire des images responsives, un simple bout de comme est suffisant pour cela :

img {
    max-width: 100%;
    height: auto;
    display: block;
}

Tu peux également regarder du côté de l'attribut srcset pour indiquer au navigateur quelle image charger selon la résolution du terminal : https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web

Alors oui bien sûr tu as beaucoup d'images mais tu le dis moi-même tu es maniaque... 

Ekyss a écrit:

J'ai déjà essayé de les redimensionner à la taille voulue, mais ça me détruit tout le côté responsive du coup... Je ne peux pas l'avoir plus grande pour un écran plus grand, ou plus petite pour un écran plus petit.

Je ne comprends pas pourquoi ça ne fonctionne pas avec Google Chrome, pour une propriété aussi simple que celle-ci ! Je ne vais quand même pas retailler mes 180 images 5 fois chacune pour chaque Media Queries non ? J'imagine qu'il y a plus simple...

_____________

EDIT :

Ah bah finalement je n'ai pas cherché encore toute une nuit pour rien, il paraît que c'est un bug de Chrome récent, à moins que mon anglais me fasse défaut :

https://productforums.google.com/forum/#!topic/chrome/VezviJoWRsI

Possibilité de palier le problème en rajoutant cette ligne de CSS sur les images, pour ceux qui ont le même problème :

image-rendering: -webkit-optimize-contrast;

N'oubliez pas de vider le cache avant de vérifier si ça fonctionne, pour certaines images c'est une manip' nécessaire j'ai l'impression. Du moins sur mon Google Chrome.

Résolu pour le moment du coup ! Merci à toi quand même Lamercarlate

-
Edité par Ekyss il y a environ 1 heure

Mais si je mets le max-width à 100%, mon image est beaucoup trop grosse en fait, elle est délimitée sur les côtés par des margin mais fera sa taille initiale :(. Parce que j'ai besoin qu'elle prenne au maximum 50% du conteneur, ou 60%, selon l'image dont tu parles.

Oui merci pour le lien des srcset mais je m'étais déjà penché là dessus, et je l'aurai utilisé qu'en dernier recours.

J'ai essayé par ailleurs de modifier le paramètre dont tu m'as parlé, en prenant soin d'enlever l'image-rendering que j'ai appliqué hier. Mais hélas, il ne me fait rien du tout ahah.

-
Edité par Anonyme 13 février 2018 à 18:13:01

Bonjour,

j'apporte une autre piste car j'étais dans le même cas de figure : toutes les images de mon editeur wysiwyg maison étaient légèrement floues sous chrome et impec sous firefox.

la solution dans mon cas : Ctrl + 0 !!! j'ai probablement dû un jour avoir eu besoin de zoomer à l'écran via Ctrl + "+" et malgré les fermetures de l'appli et les effacements de données, le zoom n'avait pas été réinitialisé...