CODEWITHSUNDEEP
htmlcssgoogle-chrome
snoopy_15
snoopy_15

Reputation: 1313

Images looks low resolution and blur in Chrome

I notice that some of my images on website looks low resolution in Chrome and in Mozilla they looks fine.

Here are screenshots

In Chrome: enter image description here

In Mozilla: enter image description here

What can I do to solve this problem?

I found something like this, but it doesn't help

img {
     image-rendering: optimizeSpeed;             /*                     */
    image-rendering: -moz-crisp-edges;          /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
}

This is how it look when I add image-rendering: pixelated; enter image description here

Upvotes: 3

Views: 9603

Answers (2)

JTCon
JTCon

Reputation: 509

Test this:

1 . Pulse "Ctrl + 0" (zero) Its return to 100% web size.

  1. No resize image with styles or width attribute. Design your image to the exact size you need.

Its works for me. ;)

Upvotes: 0

CaringDev
CaringDev

Reputation: 8551

It looks like Chrome does some anti-aliasing. So, first, it might help to save the picture in the desired size (s.t. it shows correctly when you do not apply any sizing e.g. using CSS). Then, according to CanIUse, for Chrome the CSS should read image-rendering: pixelated; instead of image-rendering: -webkit-optimize-contrast; Note: Safari's values have changed as well and MS doesn't support it anymore/yet in Edge.

Upvotes: 2

Related Questions