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é.
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.
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)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
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 :
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
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 :
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 :
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
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.
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é...
Image flou sur Chrome non voulue
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)