Thumbnailing with EXIF and Javascript

As a content consumer
I want an appropriate version of a media asset
so that I can have quick page load times and experience the content as intended on my device.

It would be nice if a client could request an appropriate version of an image (or asset) for their current view port. There has been good progress on the <picture> element which hopefully is going to bring some resolution to this pickle. In the meantime there are lots of approaches utilizing JavaScript, CSS, server side image derivative generation and so on. These approaches are well documented, work, and pretty much address the need to get relevant content into the view port in a straight forward way.

So what about approaches that... are less recommended? Like letting a client dictate its own requirement? 

Range request for the interior of an image

Creative use of multiple range requests might make it possible to select the interior region of a file to make a thumbnail.

How about fetching portions of an image client side without downloading the entire image? Apache supports a range request which can allow for portions of a file to be retrieved at a time- used in streaming as well as resuming downloads. Theoretically one could just request a smaller portion of an image with targeted requests. While this would only give you a subsection of a file it ought to be a lower file size. In order to only request the interior portion it's likely that multiple requests would have to be calculated to get the interior space and these results would have to be stitched together to form the smaller version. It might be possible to do this with a multipart/byte-range request though given the number of offsets needed I'm not sure that you could. If this is possible you could probably just interpolate the image with the HTTP request. That would be pretty neat.

One thing that the range request does enable is reading small portions of a file- say like reading meta data out from the header. In this case JPEG files actually have some useful data to look at. EXIF metadata has all kinds of interesting stuff in it- camera information, dates, GPS data, and so on. It even (sometimes) has a thumbnail in it. Tada! A handy thumbnail that can be fetched with two requests- one to get the metadata and one to get the thumbnail. The process isn't even horrible to do this- basically a JavaScript XMLHttpRequest with some knowledge of how JPEG files are structured. So without any server intervention a client can request a thumbnail of an existing image URI.

Range request

The range requests getting the metadata from the image and then grabbing the thumbnail.


Actually, this really isn't any kind of solution- it still requires content to have the EXIF data, it isn't well supported, and will only work with JPEG images (yes, PNG does have metadata but it seems to be less standardized than JPEG). It also requires two requests- though compared to downloading a 2mb file it could caries an advantage for mobile devices.

Nonetheless, I wrote a little proof of concept here: It gets a list of files from Apache (or from Github's API) and tries to fetch thumbnail and other EXIF data from the files and of course is all done client side.