Concrete5 and high resolution displays

Permalink
Today i did a search in the concrete5 forums for "retina", and the result i got was only one (!) content related thread, dating from 10/2012, which was not very helpful for me. I wondered why there seems to be no discussion for that topical subject.

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?

Am I right in assuming that each C5 block that deals with images, should have the option to add some javascript and/or CSS and to define an alternative high resolution image in the future, a future, that has long since started?

What do you think about it?

Thank you,
Michael

okapi
 
adajad replied on at Permalink Reply
adajad
I haven't given it much thought, really, but I found this article a few weeks ago which discusses the topic

http://stackoverflow.com/questions/13430828/serving-high-res-images...
okapi replied on at Permalink Reply
okapi
Just to be more precise with what i mean by 'worse image quality' of non-optimized web images on retina displays (in comparison to non-retina displays), let me quote a post from the macrumors.com forum, where user nontroppo describes exactly what i am experiencing with web images on a retina display:

"...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..."

http://forums.macrumors.com/archive/index.php/t-1430778.html...

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.
mesuva replied on at Permalink Reply
mesuva
This pretty much comes down to how you theme your concrete5 site and the way you place images, more than handling it at the broader concrete5 level I believe.

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.

Cheers
-Ryan