Join 3,513 readers in helping fund MetaFilter (Hide)


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.
posted by Jimbob to Computers & Internet (4 answers total) 9 users marked this as a favorite
 
How do images with fixed pixel sizes, say on a web page, scale on a high-resolution (ie. "retina") display?

CSS3 image queries
posted by Blazecock Pileon at 12:13 AM on June 12, 2012


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


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


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


« Older I applied to speak at a confer...   |  Is it ever OK to get involved ... Newer »
This thread is closed to new comments.