Is there an ready solution to just send part of interlaced JPEG depending on the browser resolution?

Question

I'm asking if you know if there is a ready-made solution, not really how to do it.

I'm quite sure I can pull it off myself, even if I never ever touched the bytes of a JPEG manually. If you'd like a crack on it, you're invited to do so ;)

The basic Idea is that you have a site with a few JPEG images, but you want to reduce load as much as possible for mobile users.

So you ensure that all of your JPEG´s are progressive and only sends the low-frequency bits of it first, idles down the TCP-connection, and waits for the client to report in how big the available space is in the browser window.

Or alternatively, you have some sort of browsercaps.ini or similar, and rely on that to get the initial resolution -- and then have the reporter report a correction if necessary.

I actually needs this for two entirely separate environments, one is using PHP and the other is using node.js (The latter one is of more importance).

I'm quite sure picasaweb is doing this stuff already, or at least did. You could view an image, and it loads progressively -- then you could enlarge it, it got blocky but continued to load in progressively, I remember that I was quite impressed by that!

(And its unfair that Google keep the cool stuff for them selves, remember their motto {°«°] )

Answer 1

Why not send the client a list of images that could be used for a specific img tag, then have the client determine which one it should use?

It is possible to determine the screen size of the device document.write(screen.width+'x'+screen.height);or the size of the browser. And instead of adding a src attribute for each image, adding the possible sources to a html5 data- attribute like so:

<img data-img="mobile:some-img.jpg,desktop:other-img.jpg" />

JavaScript (With jQuery):

$('img').each(function(){
    $(this).attr('src', $(this).attr('data-img').split(',')[0].split(':')[1]);
});