Concrete5 and high resolution displays
Currently toying with the idea of buying a MacBookPro, i tried out a new MBP 15" with Retina display. Of course it was naive to expect a higher quality of (non-optimized) images on websites - but i was irritated to find that the opposite was the case, the images looked even worse. I was not only disappointed by the poor quality of the images on my own website, but also of those on other websites i know well enough to evaluate the difference.
Evidently, there's a need for high resolution display optimization for images on websites. So, what would be the best practice for doing that in concrete5 - right now, and in the future?
A brand new version of concrete5 is about to come - will it deal with high resolution optimization for images? Or will someone have to create an addon for that purpose?
What do you think about it?
"...In the browser, it is assumed that Safari and possibly Chrome use some form of linear interpolation and there will be more "difference" than simple pixel doubling. Linear interpolation in theory is better than nearest neighbour, especially when dealing with richer images, but will possibly change pixel art for the worse..."
Web images get resampled to fit the higher resolution of the display, but it seems that the algorithm that is used may be good only to display icons and illustrations, but not for photographs.
By the way, in Safari one can see the (non-optimized) image, which is relatively sharp, for a fraction of a second (obviousely firstly rendered by 'rearest neighbour' method), before it, immediatly afterwards, turns into the final image (obviousely rendered with 'linear interpolation') - which is looking relatively blurry, compared to how it looks in a standard non-retina display.
With many of the sites I'm building now I aim to make them 'retina ready', by doing things like the following:
- Using double sized images in themes, for logos, major graphics, etc, where the styling resizes the image to half the size.
- Using CSS for decorative purposes as much as I can, instead of relying on bitmap images for interface elements (especially buttons).
- If I'm outputting thumbnails in something like a page list, I generate them at double size and then force them to display at half that size, this is really just a bit of fiddling with block templates. Something like this page on our site has retina images for the thumbs -http://www.mesuva.com.au/blog/recent-work/... (I'd be keen for feedback actually for anyone reading this on a retina desktop screen)
- Perhaps most intrestingly I'm now using SVGs in themes as much as I can. I'm doing this enough now that the other week I built a block similar to the image block to easily place SVGs with fallbacks -http://www.mesuva.com.au/blog/concrete5/adding-svg-images-to-pages-...
In other words, the only thing you really need to do is consider when you use actual bitmap images - text, CSS and SVG all scales beautifully on retina devices.
There's a bit of a balance that needs to be considered though, whether something really does benefit from being at high resolutions versus the extra file size and bandwidth.
The only thing I'd suggest in concrete5 now that isn't 'retina ready' is the image block, as this just outputs bitmaps at normal size, but it really wouldn't take too much to tweak this (or make a retina version of the block) to make it do what we'd need. Again it comes down to whether it's a good idea to make every image oversized. I personally think things like logos and buttons should look sharp on retina devices, but general photos aren't so much of a big deal in my mind.
We don't have retina screens on our laptops, but our phones effectively have them, so we can test things on those. A designer we closely work with does have a retina screen and he finds the basic things we do above are enough to sharpen things up.