- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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?
No one knows?
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.
Here’s the media query for it: https://css-tricks.com/snippets/css/retina-display-media-query/
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.
Anyone know how to do this with tiled background images?
> 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]`