1

I'm developing a react website. In my Google Chrome browser, images showing as pixelated (image-rendering: pixelated) but in firefox work as expected (image-rendering: auto). Here is the difference,

{images[0].preview} return an image url from an object

<img src={images[0].preview} className='border w-[250px] z-10 h-[85%] -mr-8 object-cover object-top shadow-portfolio' alt='' />

Here is css code for keeping image rendering same as firefox.

img { image-rendering: auto !important }

Firefox Image Preview

Chrome Image Preview

How to show images in chrome like firefox ? I used (image-rendering: auto) for img tag but not working.

Muhammad Sumon
  • 19
  • 5

1 Answers1

0

Finally, I found a solution. If image mimetype is svg+xml then it will look perfect in chrome & firefox.

Muhammad Sumon
  • 19
  • 5