2

so I've read a few stuff about retina graphics for website and since most of my images can be at 2X, I'd guess: Why not, while using @media queries.

However, all I could find about sizing, was that you should specify dimensions, but I'm wondering: What about background images using background-size:cover!

As in:

div {
    background-image: url('../images/foo.png');
    background-size:cover;
    height:100%;
    width:100%;
    // max-size:1920px by X
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1921px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1921px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1921px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1921px),
only screen and (                min-resolution: 192dpi) and (min-width: 1921px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1921px) {
    div {
        background-image: url('../images/foo@2x.png');
        background-size:cover;
        height:100%;
        width:100%;
        // min-size:1921px by X
    }
}

Second question, if I may: What if you've an image of max approximately 2400x1380, but the visitors machine has a maximum resolution of 2880x2160, as in the Macbook 15" retina - thus not being able to server the complete @2X experience - Serve @2x no matter what, or serve a regular, max 1920px image?

And third, in regard to 1 & 2 - While using :cover, you're not specifying dimensions, thus not knowing the minimum of the @2x image. with that in mind, is there a way to say "For retina images and using :cover, you're image should be at least this by this dimensions" ?

Thanks!

Sander Schaeffer
  • 2,757
  • 7
  • 28
  • 58
  • It could be you're overthinking things. Just think in logical pixels rather than device pixels. If the browser has 1440x1080 pixels to work with, use those dimensions. No matter if there really are 2 device pixels in one such "browser pixel". If the picture happens to be displayed in its full hi-res glory rather than being downsized, that's just an added bonus. – Mr Lister Apr 01 '14 at 07:03
  • Simply said, just use any picture for 2X, if indeed it fits the device pixels, that's a bonus, else it's just like regular. OK thanks! However, what about :cover? – Sander Schaeffer Apr 01 '14 at 07:14

1 Answers1

1

To answer your first question: Yes you can retinafy an image with background-size:cover. If the you define a div and let its background be covered by and image with double that dimensions, it will be retina (@2x).

I won't go into detail for your other questions or answer them, because I feel that what you trying to do is actually not the right way to optimize for retina!

The best solution I have found to handle retina images best for all devices is to use @media queries to serve the best image for the specific client device (e.g. @1.5x, @2x, @3x, ...). Check out my blog post for a complete solution: http://blog.benmarten.me/best-way-to-optimize-website-images-for-all-possible-retina-sizes/

electronix384128
  • 6,625
  • 11
  • 45
  • 67