How are images scaled for high-resolution devices.
June 12, 2012 12:04 AM Subscribe
How do images with fixed pixel sizes, say on a web page, scale on a high-resolution (ie. "retina") display?
Say I have an image, on a page in a browser, that's 200px x 200px. Is this image displayed at that pixel size (ie. very, very small) on one of the new high-DPI displays that are coming out at the moment? Or is it scaled (ie. each pixel is actually a square of 2x2 or 3x3 pixels)? In the later case, is there a way to tag an image as being of high resolution, or provide an alternative high-resolution image for these kinds of displays? Is metadata within the image, identifying it as a 300dpi image for example, actually used? Or am I over-thinking this problem?
It seems that when viewing a site like Flickr, it might be smarter to serve "retina" displays high-resolution versions of the photos, rather than the 640px wide images you get in the default view.
Say I have an image, on a page in a browser, that's 200px x 200px. Is this image displayed at that pixel size (ie. very, very small) on one of the new high-DPI displays that are coming out at the moment? Or is it scaled (ie. each pixel is actually a square of 2x2 or 3x3 pixels)? In the later case, is there a way to tag an image as being of high resolution, or provide an alternative high-resolution image for these kinds of displays? Is metadata within the image, identifying it as a 300dpi image for example, actually used? Or am I over-thinking this problem?
It seems that when viewing a site like Flickr, it might be smarter to serve "retina" displays high-resolution versions of the photos, rather than the 640px wide images you get in the default view.
Best answer: by default, images are pixel-doubled. you can use CSS to specify higher-res images for display on Retina if you want.
posted by russm at 12:42 AM on June 12, 2012
posted by russm at 12:42 AM on June 12, 2012
Response by poster: Thank you BP for providing that interesting CSS. Thank you russm for confirming images aren't displayed tiny by default.
posted by Jimbob at 12:52 AM on June 12, 2012
posted by Jimbob at 12:52 AM on June 12, 2012
Handy javascript frameworks like Retina JS help too. It will detect a retina display and link to specifically named higher res images when necessary.
posted by purephase at 5:40 AM on June 12, 2012
posted by purephase at 5:40 AM on June 12, 2012
« Older How do I deal with someone who may have helped me... | “When two divorced people marry, four people get... Newer »
This thread is closed to new comments.
CSS3 image queries
posted by Blazecock Pileon at 12:13 AM on June 12, 2012