CODEWITHSUNDEEP
htmlcss
James Lin
James Lin

Reputation: 13

Wordpress images load crisply on IE but are blurry on chrome?

Page in question here : http://www.loftuspeak.com.au/investment-management-team/

I load the page up in chrome and all images are blurry. I load the page up in internet explorer and the images are crisp.

Any idea what could be causing this?

Chrome on the left, IE on the right: https://i.sstatic.net/EkKyq.jpg

Upvotes: 0

Views: 600

Answers (1)

Dzmitry Kushnarou
Dzmitry Kushnarou

Reputation: 566

The screenshot you’ve provided has different zoom: the image has the width of 294px on IE and 323px on Chrome (i.e. the zoom is 110%). Try using Ctrl+minus to change the zoom of Chrome.

Your image is smaller, and the user wants to display it on a bigger size.

Just use the bigger photos (a common practice is to use photos twice as big, and scale them down — this will also look good on Retina screens).

(And please remove the CSS you’ve added, 

image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;

it will not make the rendering crisp. Instead, it will make it pixelated on bigger zooms. For photos, this is even worse.)

Upvotes: 2

Related Questions