0

This is a follow up to the link below

Preparing the images for retina-ready (web)

This is clarification, because so many words mean different things to different people. It appears that to have one image that looks good on both retina and non-retina device:

if the image on the screen should be max-width of 400 and max-height of 300, then the image itself should be 800 x 600, with a ppi of 144. Then the file should be highly compressed to minimize its download time.

When you display the image, you force it to its max-width and max-height using css/html code like this:

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

Is this correct? (I have already resolved that our company won't be using responsive.js or a cdn.)

Community
  • 1
  • 1
Paeon
  • 85
  • 1
  • 8

3 Answers3

0

An easier approach would be to use the srcset attribute of img. Then you can have images in different device pixels per CSS pixel.

Try to open this page both in a desktop browser and in a phone with a supported browser: http://www.webkit.org/demos/srcset/

The support is still limited, but will probably be better supported soon: http://caniuse.com/srcset

Emil
  • 16,784
  • 2
  • 41
  • 52
  • Thanks, but since there isn't a lot of support for srcset (especially in IE) this is not yet a workable solution. – Paeon Jul 02 '14 at 14:57
0

There's a new responsive images HTML5 standard. As of July 2014 it's only in beta builds of browsers yet. But the Picturefill polyfill is already available.

This article explains different use-cases quite well. But what you want here is to simply provide an alternative image for high-resolution (e.g. 'retina') displays:

<img srcset="small.jpg 1x, large.jpg 2x"
   src="small.jpg"
   alt="A rad wolf" />
mb21
  • 34,845
  • 8
  • 116
  • 142
0

For broad browser compatibility you could also use CSS background-images on container elements and control the background file (retina or non-retina) with media queries / dpi queries

Check out this fiddle

#container {
    background-image: url(http://placehold.it/200x200);
    width: 200px;
    height: 200px;

    @media 
      only screen and (-webkit-min-device-pixel-ratio: 2), 
      only screen and (min-resolution: 192dpi) { 
          background-image: url(http://placehold.it/400x400);
    }
}
riccardolardi
  • 1,713
  • 5
  • 20
  • 35