The increased resolutions on newer smart phones, Retina Display to borrow Apple’s terminology, allow for much crisper images on the mobile view of our websites, but they cause problems for us as developers. There are several different methods for using these images, and most of them are rather cumbersome. It also makes the development more tiresome since you have to produce two images even in the development phase. We have found a few shortcuts in both areas.
Posts Tagged: retina
Webkit just added support for the new
srcset attribute. From the Webkit blog:
WebKit now supports the
srcsetattribute on image (
img) elements (official specification from the W3C). This allows you, the developer, to specify higher-quality images for your users who have high-resolution displays, without penalizing the users who don’t. Importantly, it also provides a graceful fallback for browsers that don’t yet support the feature.
Although it will be a while before this is usable across a broad spectrum of browsers, it’s progress in a good direction.