Grow your CSS skills. Land your dream job.

Understanding Retina

  • # September 3, 2012 at 3:25 pm

    So I’ve been thinking of ways to optimize for high dpi screens. I just had a question about it. If I had an image on my regular site that was 16×16, and I wanted to optimize it, should I design it at 32×32 and resize it with css? Does it still look 16×16, or would it blend in the same way it would on a regular dpi screen?

    # September 5, 2012 at 6:06 pm

    No one knows?

    # September 5, 2012 at 6:31 pm

    Correct. From what I understand you create the image at 200% of what you are going to display it as and use CSS to shrink it. I think there is a css property to target retina displays so it doesn’t load that image for every device. This saves in file size if the image is quite large.

    # September 5, 2012 at 7:44 pm

    Here’s the media query for it: http://css-tricks.com/snippets/css/retina-display-media-query/

    # September 6, 2012 at 9:16 am

    Pretty much the below is very simple example of how to work with retina images.

    element {
    background-image: url('/path/to/non/retina/image.png');
    height: 200px;
    width: 200px;
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    element {
    background-image: url('/path/to/retina/image.png');
    background-size: 200px 200px;
    }
    }

    To put it simply you would design the above example image at 400×400 but use the background-size property to scale it down which doesn’t blur or distort the image because it was created at a sub pixel level unlike the non-retina image which would sit on top of every pixel within 72 dpi.

    # December 6, 2012 at 1:52 pm

    Anyone know how to do this with tiled background images?

    # December 7, 2012 at 4:48 am

    > Anyone know how to do this with tiled background images?

    Is the image your using something like `1×50` as an example?

    If you could supply a link as all you would need to do is re-design the image @2x the width and height then save the file using the Apple naming convention.

    **Non-Retina**
    `my-image.png`

    **Retina**
    `my-image@2x.png`

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".