Hi Folks,

 

I'm not sure if I've posted this in the correct forum but if not, my apologies.

 

I've been thinking recently about providing my clients with optimised images for Retina Displays as standard in my builds and I've been doing a little bit of research on the subject.

 

Essentially, what you want to do is provide two versions for every image, one for the normal displays and one at a minimum of twice the pixel size for Retina Displays.

 

I'm going to use Retina.js for this, along with media queries within a LESS stylesheet.

 

Anyway, it got me thinking. The iPad 3 and iPhone 4 and above both use Retina Display, and the new MacBook Pro (bought one a few months ago and they are beautiful). Now, if any of these devices are connected to a slow internet connection (especially mobile devices), then serving larger images to them just to optimise for the Retina Display seems counter intuitive to me, which made me wonder whether there might be a way to detect a user’s connection speed, and load in Retina.js/Media Queries based on that speed.

 

Now, once I’d had a quick look around it seemed as though this wouldn't be possible but after doing a bit of research on how to do this with Javascript and PHP, I came across a couple of scripts which could act as the basis for a more robust and accurate script.

 

http://www.emanuelef...speed-with-php/

http://jan.moesen.nu...x.php?numKB=512

 

So, I guess I wanted to start a discussion on the subject and get people thinking about the problem. Perhaps together we may be able to come up with a solution.

 

From my research, it seems as though what we would need to do is set the timestamp of the server to a variable and then begin sending a certain amount of data in KB to the client. Once the client has requested/received the data via an AJAX solution then set another timestamp variable but this time from the client end, and then compare the two based on a simple mathematical formula to get an average estimation of the users connection speed.

 

I'm sure there would be a way to achieve a good enough solution, so that we are not sending large Retina Display optimised images to mobile devices on slow connections.

 

I would really love to hear your thoughts on this one guys. Thanks.

It looks as though there is a lot more to consider here other than connection speed. It also seems as though it would be quite a complicated task crafting a solution to this problem. I've published an article with my thoughts on the matter on my blog.

 

I would still love to hear what you guys think on the issue. What other pitfalls can you see? Are you even interesteed in optimising for high resolution displays?

I guess this really isn't an issue for people at the moment then, would that be fair to say?

The forum is just dead tbh mate.

 

Also, this whole multiple version of images thing, how does that site with clients wishing to change images thereselves? Cant see many clients wanting to faff about with various sizes imo.