Question

I create a photo viewer for fb photos in a FB canvas application. Therefore I care about photo size. It seems all uploaded photos in FB seem to be available in different sizes. I see in the graph API (http://developers.facebook.com/docs/reference/api/photo/) the term in the source property: “maximum width or height of 720px” but as well a width and height property. As well I have several photo sizes in fql photo (http://developers.facebook.com/docs/reference/fql/photo/).

1. Are the photo sizes available in one category (src_small, normal, src_big) always the same or can they differ? I suppose they can differ.
2. What are the formats FB supports? I suppose it is small normal and big
3. How to conceptually deal with different sizes in a viewer? I suppose you need to fix the viewer area, eg. 3 (height) : 4(width). Now size an image inside the viewer by maximizing the height or width.

Am I heading to the right direction?

Answer 1

Not sure if you noticed, but there’s also an “images” field in the Graph API which holds “The 4 different stored representations of the photo” similiar to the FQL.

"images": [
  {
     "width": 720,
     "height": 483,
     "source": "http://a7.sphotos.ak.fbcdn.net/hphotos-ak-ash2/168119_10150146071831729_20531316728_7844072_5116892_n.jpg"
  },
  {
     "width": 180,
     "height": 120,
     "source": "http://photos-g.ak.fbcdn.net/hphotos-ak-ash2/168119_10150146071831729_20531316728_7844072_5116892_a.jpg"
  },
  {
     "width": 130,
     "height": 87,
     "source": "http://photos-g.ak.fbcdn.net/hphotos-ak-ash2/168119_10150146071831729_20531316728_7844072_5116892_s.jpg"
  },
  {
     "width": 75,
     "height": 50,
     "source": "http://photos-g.ak.fbcdn.net/hphotos-ak-ash2/168119_10150146071831729_20531316728_7844072_5116892_t.jpg"
  }
],

• Note that the original image does not have a width of 720px everytime. It’s not scaled up if you upload a smaller image.

From the first view it seems that the images stored have a fixed width per representation.
180px for the large, 130px for the medium and 75px for the small size. Also there’s a original image which is has a maximum width of 720px.

FB only supports JPEG format.

Conceptually you should have a fixed width window for the image size you want to show (let’s take that you show the biggest [large] image to the user using the one with width 180px. Height is then <= 180px. So you can make a 180×180 box and fill the background in black if the image height’s is smaller.

OR do it like facebook does. Take the original image and fit is as big as you could into the window. They use a pop-up so they could use up maximum amount of space for the image.
Using valid CSS it’ll be easy to play with images different sizes.

So yes, you’re heading to the right direction, just analyze Facebook API’s and take the most out of them.

If you have any trouble writing the CSS needed or putting together the FQL query, feel free to ask another question 🙂

Little reading about CSS image resize