How does Facebook auto display the image in the right size depending on user screens?

Question

I noticed that when displaying photos from Albums, Facebook on web will cleverly detect your screensize and selects the right thumbnail photo and then selects the right width and height for the img element.

I used the chrome developer tools to look at the natural and displayed width and height of the images in Facebook.

Here is an example of a photo viewed on a 20.41" x 12.8" monitor at 1600x1200 resolution

Notice how it mentions that the image src is _o.jpg suffix and the natural dimensions are 1529x2048 whereas the current image element dimensions are 432 x 578

Here is the same image on a 14 inch macbook air displaying at 1440 x 900 resolution.

This one uses the suffix _n which you cannot see clearly, but you can see that the natural dimensions are 717 x 960 whereas the current image element dimensions are 538 x 720

My reason to find out is to learn the same strategy but to use it for displaying artwork which is in the standard png or jpeg format.

How much of the strategy is implemented using css? How much in javascript?

My questions are:

1. how does Facebook do this detection?
2. How many thumbnails does facebook create for each original photo?
3. How does Facebook determine the right width and height for the img element depending on screen size?

I believe Facebook allows a max of 2048by2048 resolution.

Other than that, I am unable to find out more.

This question is also cross-posted in Quora to gain a wider audience.

UPDATE: I am using cakephp as backend and front end I am relying on jquery and html5 conventions

Answer 1

When you stretch the window and therefore change the size of the 'theatre' the image changes size. From this I can only assume the 'theatre' is set to a certain size(s) and the image is set to have a max-width or max-height so it expands or contracts with the size of the outer elements (the theatre). This part is done with CSS.

I think the screen size detection will have something to do with the DOMDimensions ( http://pastebin.com/Biz9ntMj ) and the DimensionTracking ( http://pastebin.com/Ys72APyL ) functions. Also any click is intercepted by the 'primer' ( https://gist.github.com/376039 ) script that then routes the action through AsyncRequest (if needed) and then reacts depending on the JOSN response. My screen size only shows the one size for both the link and final image ( _n.jpg ) but I assume that as if is being handled by javascript then that would be how it would work the sizes out, otherwise (if javascript is off or something) it would just go back to their best guess of a one size fits all of 720 x 960 and then using css as above to force the sizing.

Edit

About the CSS...
With CSS you can set a height (specific or relative to screen size, what ever you fancy) to a block element that contains an image and then set that image to have max-height/width so rather than a defined height/width. That way the image will keep it's aspect ratio but still expand and contract to the allowed size within the container. An example of this can be seen here: http://jsfiddle.net/tV6gG

On the javascript...
When anything is clicked on the page (and javascript is running) it is caught through the 'primer' script mentioned above ( a full version can be seen here - http://pastebin.com/BwhKJ14d ) - (For more info on this see http://www.facebook.com/video/video.php?v=596368660334&ref=mf ). This script then checks the rel attribute of the click event (see line 28) and then decides what to 'bootload' based on that attribute (see line 52). From here it loads up a beast of a function ( http://pastebin.com/eGgtz4dT ) that handles all of the image kind of stuff.

In this script there are a couple of functions that looks like they may have something to do with the image size, one being getCurrentImageServerSizeDimensions (see line 218). There are other about stage sizing and what not too but my guess is that one is important. As far as I know, this script will then compile a load of data and them make a different call to the server than with the regular href.

Unescaped href from source:

http://www.facebook.com/photo.phpfbid=10152228292295554&
set=t.516587895&type=3&src=http://sphotos-g.ak.fbcdn.net/hphotos-ak-
snc7/374008_10152228292295554_643067794_n.jpg&size=720,960&theater

Unescaped actual request sent to pagelet (for more info on pagelets see the above video about BigPipe) maker:

http://www.facebook.com/ajax/pagelet/generic.php/PhotoViewerInitPagelet?
ajaxpipe=1&ajaxpipe_token=AXhGMa1SEXnChIug&no_script_path=1&data=
{"fbid":"10152228292295554","set":"t.516587895","type":"3",
"size":"720,960","theater":null,"firstLoad":true,"ssid":1354797924833}
&__user=6462456246&__a=1&__adt=2

Whilst they do contain most of the same info you can clearly see that the request is being caught and so (if needed) any corrected information (image size) could be sent through that.

With regards to the previous scripts...
The DOMDimensions script is a collection of functions that are pretty well explained by the functions titles to be honest (getElementDimensions, getViewportDimensions, getViewportWithoutScrollbarDimensions, getDocumentDimensions and measureElementBox). For more info on what these individual functions actually do I'd recommend having a look through them and just checking out any basic javascript functions that you don't get. It doesn't look too complicated.
The DimensionTracking script just seems to call the getViewportDimensions() and save the data generated with the /ajax/dimension_context.php page.
If seems to reevalute the dimensions every 100 milliseconds (see line 17), on window resize (see line 18) or on window focus (see line 18).


Over all I think you could do the important stuff (minus the finding actual different images thing) by just using the CSS method above to make a massive image fit the correct stage size.