29.10.12
High Resolution
With the growing presence of hi res screens I've been curious to explore any practical techniques or strategies for images …
With the growing presence of hi res screens I've been curious to explore any practical techniques or strategies for images …
High res devices are growing in popularity and number so I've been eager to explore any nifty techniques, or even a viable strategy for employing high res images to improve email experience across the board.
Perhaps it's not surprising this is less of a topic haunting email since most designs still tend to stick with something scalable that effectively shrinks to fit the mobile screen.
That said, if we're attempting to harness the power of responsive design to improve readability and click-ability then the manner in which hi-res screens effectively stretch the density independent pixels of an image to fit their more dense device pixel displays creates a frustrating drop off in image quality.
It's not just mobile. Looking at many emails on a hi res tablet the world can start to feel a bit soft focus. Results tend to be passable but where feasible, well tailored image resource might really help a campaign stand out.
The solution of down-sampling a double size image seems simple and comprehensible but there are a few issues it brings particularly in email where things are always a bit more restrictive.
Ben Frain and Daan Jobsis articles gave reason to be hopeful that this approach needn't result in a massive hike in file sizes.
Using CSS background images to serve an alternate set of images for hi res devices is another approach to keep file sizes manageable. However, while CSS background images aren't reliably supported on Android Mail 2.3. (Gingerbread being the major OS) then it doesn't feel very viable. Furthermore, desktop and laptops with retina display would still be stuck with the @1x assets on a 2x screen when accessing desktop and webmail.
There's also the issue of additional production time required to create two sets of assets.
The 1:1 device pixel to dip (density independent pixel) ratio that has existed from device to device up until recent times makes the process of applying image compression during production pretty straightforward. What you see is more or less what you get across the board.
Applying compression whilst viewing on a screen with device-pixel-ratio of 1, doesn't give much indication of how it will render on a mobile or tablet device with a different dpr.
I've generally found 60 to be a reliable starting point for compression when saving images for web. If there was a similar go-to starting point for hi res that might be helpful.