Does slight size discrepancy in retina 2x image matter?

Question

I am adapting my webpage for retina displays and i am using IrfanView to double my image.However,an image that was ordinarily 640 x 427 px now becomes 1281 x 855 px.Will this work with as expected?.I am using retina js too.

Answer 1

If you want add images for retina display you must do this:

for normal screens:

background: url('example_image.png') no-repeat; (example_image.png 640px x 427px)

for retina display:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx){
  .your_element{
    background: url('[email protected]') no-repeat;
    background-size: 640px 427px; 
  }
}

([email protected] 1280px x 854px)