Nov 05
HTML: How do you develop for retina displays?
Web images, HTML and high DPI displays - or, how do you develop, write HTML, for "retina" displays, displays with more than the usual 72 dots per inch (DPI)?
Images on mobile device displays sometimes look blurry. That's because smartphone displays are, for example on a Samsung Galaxy, 360 pixels wide - but, here's the catch: at twice the resolution.
Now, how do you develop a HTML + CSS website for a high DPI / retina display?
People will tell you you should develop at 200% for high resolution, high dpi displays. At 200%??
So before you start messing with the viewport, with the viewport meta tag and/or initial scaling zooming...
The answer is so simple, you might not believe it:
Just do what you avoided for years, use images bigger than what their referencing img-tag is asking for.
In a desktop world, this would mean wasting bandwidth. A desktop or normal browser will resize them down. But a mobile browser, or more general, an environment which is displaying stuff on a display with high DPI ratio, like a "retina" display, will use the additional pixels to improve the density of the image, to improve resolution.
Text data is like vector graphics, there's information in text to render the chars at any dpi, but that's not the case for raster or bitmap images. With providing more pixels, you cater to displays with raised resolutions.
for keywords:
samsung galaxy images, 360 px wide but actually 720px
image display on high resolution displays
samsung galaxy website high resoltuion images
high resolution image device width
high resolution retina displays and image width or height
develop iphone retina images html
Read on:
5 ways to support high-density retina displays
retina.js if you care about bandwidth and would like to serve lower res / smaller images to desktop/low dpi display users
https://www.webkit.org/blog/55/high-dpi-web-sites/