Check if retina or not using only one image

Question

as the title says. Is it possible to use only one picture that is already suit for retina, but when not using a retina screen, the picture automatically resizes/crops down to be a non-retina picture? I'm having this problem with IE (and I'm using a PC). All my picture looks great in other browsers such as Chrome, Opera, Moz and so on. But when I'm looking at the same picture in IE, it have these "ugly edges".

I saw this blogpost, but he is using two picture/images. I don't want that if it possible ofcourse.

var retina = window.devicePixelRatio > 1;

if (retina) {
    var html = '<img src="my-high-res-image.jpg">';
}
else {
    var html = '<img src="my-low-res-image.jpg">';
}

To be more specific: If my image is lets say 500x500 and in my CSS I shrink it to 100x100 px because of retina screens. But if the screen is not retina and I'm using that 500x500 picture which I shrink, it will have these "crispy edges".

To show you what I mean, I've taken two screenshots of the same picture I'm using, using Chrome and IE(Edge). The original size of the images below is 500x500 but is downsized to 100x100.

enter image description here Chrome

enter image description here IE

So back to my question if I wasn't clear enough: Can I use one image, but tell it to be retina or not when the need is given?

i think you might be confused about what "retina" means. it's not something that happens on a per-browser basis, to my knowledge. — Woodrow Barlow, Oct 21 '14 at 12:27
Look up responsive design. There's libraries that load different versions of an image based on screen size / pixel density. — Sergiu Paraschiv, Oct 21 '14 at 12:29
I get that ofcourse. But my problem is that I'm not using a retina screen now. On my friends Mac, all pictures looks fine, even in IE when he is using virtualbox with IE. But on my screen, the picture looks like crap in IE, but not in Chrome, Opera and so on. Why is that? — maverick, Oct 21 '14 at 12:29

score 0 · Answer 1 · answered Oct 21 '14 at 12:33

0

Its the way IE handles image resampling in the browser. You should be able to fix this by using this in your CSS:

-ms-interpolation-mode: bicubic;

By default it uses: -ms-interpolation-mode: nearest-neighbor;

Swapping the resampling method might solve your problem depending on what version of IE you are using.

Here's what CSS Tricks has to say:

http://css-tricks.com/ie-fix-bicubic-scaling-for-images/

answered Oct 21 '14 at 12:33

Chris Spittles

15,023
10
61
85

Yes, I'm already using bicubic... For some reason, I don't know why, it still looks weird. – maverick Oct 21 '14 at 12:34

Check if retina or not using only one image

1 Answers1