Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Understanding Retina

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #39643
    Odd_E
    Member

    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?

    #109275
    Odd_E
    Member

    No one knows?

    #109277
    chrisburton
    Participant

    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.

    #109283
    TheDoc
    Member
    #109330
    SgtLegend
    Member

    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.

    #116542
    Spigot
    Member

    Anyone know how to do this with tiled background images?

    #116708
    SgtLegend
    Member

    > 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**
    `[email protected]`

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.