On the Filament Group blog, Scott Jehl has written about using extreme JPEG compression to deal with hi-res displays, without resorting to JavaScript workarounds. Based on a technique earlier outlined by Daan Jobsis, Jehl noted how with JPEG images, the compression makes a much larger difference than physical dimensions. By way of example, he showed a 400x300 pixel 95 kB JPEG at 90 per cent compression next to one with dimensions of 1024x768. The latter was scaled down but compression was set to zero, and the resulting output was 44 kB – half that of the 'non-Retina' original.
Jehl said he's “not sure it stands to replace the responsive image techniques currently in play”, but is “excited about its potential for complementing them”, and added that the proposed
element offers additional opportunities for control, such as various crops of an image, depending on size and other factors.
In the article’s comments, debate ensued regarding the simpler technique. Clark Pan noted that extremely heavy compression compromises certain aspects of imagery too much, and Srgio Lopes warned there were memory implications when using larger images and scaling them down, through images being “bitmapped when expanded”, which could be a problem on simpler devices such as mobile phones. Developer Anselm Hannemann added that even on the desktop there can be problems, with very large images impacting on performance. Nonetheless, the technique seems like a potential solution for hi-res support for sites that only require the odd piece of photographic content, and where the performance impact will be relatively low.
What techniques are you currently favouring for serving hi-res images? Let us know in the comments.
