1
Add to favorites

Avatar gabiosz asked

Adaptive images for Retina/Ultra High Res displays?

Hi,

I have noticed since the advent of the retina display on the latest iPad that all the images on our site are badly up scaled. Looking a little further into this it seem that there is no ideal solution for this at the moment.

Option 1: Send out high-res images by default and scale down in the browser.
This is not ideal simply because the bandwidth required will escalate, pushing up the page load time and would be totally unnecessary for most users, particularly mobile users, most of who now pay for data.

Option 2: Do nothing.
This may be ok in the short term, but again is not ideal because more and more devices will feature larger displays with a higher pixel density, and you may wish to future proof your site. Similarly having adaptive images could have a positive effect for users with lower resolution devices who currently needlessly download the full size image.

Option 3: Use adaptive images.
There are a few methods for doing this, http://adaptive-images.com/ being the most promising I have seen to date. But will this clash badly with Zoo and Widgetkit? Would it work with the Gallery, etc.?

All thoughts welcomed, and is this something that Yootheme developers are likely to be looking at in the near future?

I will begin testing it on a test site.

  • ZOO
  • Widgetkit
  • Image Sources
Order by Votes Newest Active

4 Answers

1

Avatar richard.stephenson answered

I have also implemented that solution - really easy!

BUT - because ZOO intelligently resizes images & caches them (which is a great feature), it is very difficult to use retina.js with ZOO as you have no idea what your hi-res images need to be called.

What would be great would be if the ZOO image engine would produce 2 versions of each image. One at normal res (as it does now) and one at double size with the @2x suffix.

What do YOO think?

Rich

0

Avatar richard.stephenson answered

Hi @gabiosz
I agree that this is something that, being an iPad user, I am really aware of. The latest MacBook Pro adds to this issue!
Seems like it shouldn't be too bad to deal with and that there are plenty of options to address getting sites looking fantastic on high res displays. It would be great to see this added to the responsive themes - especially as it is something that would mark YooTheme well ahead of the game...

Serverside PHP solution
Clientside jQuery solution

Rich

0

Avatar kyrre.amundsen answered

I agree guys, one of the points of having a responsive design is to make it fit to things like iPhone and iPad witch both have retina displays.
I tried to setup the Serverside PHP solution but i diddnt get it to work properly.

I tried to add the javascript as a file (retinaimages.js) and add it to the js folder and update the template/styles/stylename/layouts/template.config.php file.
Then i pasted the content in the .htaccess file to the one i had on the site.
I added the noscript code at the start of the the body tag in template/styles/stylename/layouts/template.php
I put the retinaimages.php to the public_html folder and i uploaded the retina image to the same folder as the original with same name and @2x.png at the end.

Nothing happened. Any ideas?

URL

Today i noticed that the .htaccess file wasnt correct so i added the content from the .htaccess file provided from the Serverside PHP solution. That made all the images on the disappear. Dont know if i should change something in the .htaccess file? In the meantime i commented out the RewriteBase code from it.

Edited

Know someone who can answer? Share a link to this question via email or twitter.

Latest News

Products

Company

Support