html - How to make retina ready image that can be used on retina and non retina devices -

html - How to make retina ready image that can be used on retina and non retina devices -

this follow link below

preparing images retina-ready (web)

this clarification, because many words mean different things different people. appears have 1 image looks on both retina , non-retina device:

if image on screen should max-width of 400 , max-height of 300, image should 800 x 600, ppi of 144. file should highly compressed minimize download time.

when display image, forcefulness max-width , max-height using css/html code this:

<img src:"imagethatis800x600.jpg" style="width:400px; height:300px;" width="400" height="300" />

is correct? (i have resolved our company won't using responsive.js or cdn.)

an easier approach utilize srcset attribute of img. can have images in different device pixels per css pixel.

try open page both in desktop browser , in phone supported browser: http://www.webkit.org/demos/srcset/

the back upwards still limited, improve supported soon: http://caniuse.com/srcset

html css retina-display retina