Welcome to the blog.

Bigger (square) thumbnails from the Instagram API

Update #2 January 2018: Thanks to @wavesummit, who has provided a working update (view his original comment here).

As before, replace s150x150/ with s320x320/. Next, apply a second replacement to change the start of the URL from https://scontent.cdninstagram.com/vp/.../ to https://scontent.cdninstagram.com/hphotos-xfp1/.

Here’s an example. This is the original thumbnail URL (parts to change in bold):




Here’s code to do that in PHP:

$thumbnail_url = $post->images->thumbnail->url;
$thumbnail_url = str_replace('s150x150/', 's320x320/', $thumbnail_url);
$thumbnail_url = preg_replace('/vp\/[^\/]*/', 'hphotos-xfp1', $thumbnail_url);

Thanks again, @wavesummit for this!

Update January 2018: (See update #2, above) Unfortunately, this no longer works. We will have to wait and see if the change is permanent. Instagram’s site does still link to square images at different sizes. For example, visit our Instagram and inspect the srcset attribute on an image. You’ll see something like this:

	https://scontent.cdninstagram.com/vp/f318cfcda22ed524945ba15101e388b4/5AEA3ECC/t51.2885-15/s150x150/e35/c0.95.1080.1080/25012342_1457211741065421_8728364604880584704_n.jpg 150w,
	https://scontent.cdninstagram.com/vp/71ad8893e2740491c53bb893a1299b76/5AE3C8A7/t51.2885-15/s240x240/e35/c0.95.1080.1080/25012342_1457211741065421_8728364604880584704_n.jpg 240w,
	https://scontent.cdninstagram.com/vp/33f4eac760e04e31331ca632dae84d52/5AFD6A6F/t51.2885-15/s320x320/e35/c0.95.1080.1080/25012342_1457211741065421_8728364604880584704_n.jpg 320w,
	https://scontent.cdninstagram.com/vp/73d1814d785084e02fe2204f807414c9/5AF17485/t51.2885-15/s480x480/e35/c0.95.1080.1080/25012342_1457211741065421_8728364604880584704_n.jpg 480w,
	https://scontent.cdninstagram.com/vp/294f196525210e34d7d7f85216ac779b/5AFE6E22/t51.2885-15/s640x640/sh0.08/e35/c0.95.1080.1080/25012342_1457211741065421_8728364604880584704_n.jpg 640w

The problem is we can’t see a way to work out those URLs based on the data available via the API. Our workaround for now is to check if the low_resolution image is a square and use that if it is, otherwise fall back to the thumbnail, which is only 150×150 but always square. In PHP that’s simply:

if (!empty($post->images->low_resolution) && $post->images->low_resolution->height === $post->images->low_resolution->width) {
    $thumbnail_url = $post->images->low_resolution->url;
} else {
    $thumbnail_url = $post->images->thumbnail->url;

When Instagram added the ability to upload non-square media images to their service, the only way to get a cropped version of the image from the API was via the thumbnail attribute from the media endpoint. Those familiar with the API would know that Instagram’s thumbnails are served at a rather small size of 150×150 which is alright in some cases, but if you need a larger thumbnail size a 150×150 image scales up very poorly.

Here’s the images attribute in the API response for a recent Instagram post we did:

And here’s the thumbnail for that image:

Example 1 Image: Square

Scaling that thumbnail up even 1.5 times makes it look very grainy and shows very little detail. For normal square images you can just use a different image size (like low_resolution or standard_resolution), but for images that aren’t square, you won’t get a nice square image. Not great if you’re trying to use a square grid to display Instagram pictures.

Now, here’s the images attribute in an API response for another recent Instagram post we did, except this time the image in question is landscaped:

Instagram are nice enough to provide a cropped, square version of the image for the thumbnail, but the low_resolution and standard_resolution URLs are both uncropped and are not square. Gross!

Say we want a 320×320 thumbnail of the Instagram post, but as you can see, we want a square image. If we use the low_resolution URI, we’ll get this:

Example 2 Image: Rectangle, but we want a square

If you take a look at the URIs for the images, you’ll notice that the thumbnail URI has an extra parameter in the filename path… the magical crop dimensions! Unfortunately, the crop dimensions aren’t accessible anywhere else in the API (as far as I know), except for in the thumbnail URI. With a bit of spelunking and messing around with the URI, you can change the s150x150 part of the URI to s200x200 for example to get a 200×200 sized thumbnail.

With that in mind, I’ve set the thumbnail URL to use 320×320 instead of 150×150 and voila! We have a larger, square version of the Instagram image:

Example 3 Image: Square, cropped image

Note that you can’t provide arbitrary dimensions and expect the API to automagically generate custom images sizes to your specification (Instagram isn’t an image processing CDN!). Change the dimensions to s220x220 and you’ll see what I mean.

curl -v https://scontent.cdninstagram.com/hphotos-xap1/t51.2885-15/s220x220/e35/c73.0.934.934/1172990_1289634271062707_99066703_n.jpg

If you run the above command you’ll see that the server returns a 404 “Unsupported Size” error in the headers but the body response is 5xx server error. Assuming the thumbnail size you wanted was a thumbnail size Instagram generated, you can semi-reliably use your custom dimensions, however I couldn’t guarantee that those thumbnail sizes will remain accessible forever. We’ve decided to bite the bullet and use 320×320 image dimensions where we can, so fingers crossed they don’t remove those dimensions!

If you’re crawling the API with a script, you can do something like this in PHP to alter the thumbnail (where $post is your Instagram post object):

$thumbnail = str_replace('s150x150/', 's320x320/', $post->images->thumbnail->url);

Alternatively if you’re using JavaScript, you can do something like this:

var thumbnail = post.images.thumbnail.url.replace('s150x150/', 's320x320/');

I’m not going to post how to do it in each language, but the two examples above should hopefully suit most people.


Like this post? Keep up with us on Twitter and Instagram.


person hit in the face by a flying newspaper (aka. the popups experience)

Are popups still a good idea?

7 November 2016 Author: Sandy Lim

Go on. Ask any internet user how they feel about popups. You may learn some new swear words. And yet, when the business case for UX is stronger than ever, many brands still default to popups...

Read Article
Dear Developer

Dear Developer. Love, Designer.

20 August 2015 Author: Kylie Timpani

Last month, a tweet by Yesenia Perez-Cruz, Senior Designer at Vox Media, caught my eye. Her tweet asked what seemed like a simple question:   I see an abundance of articles about how designers can make developers lives...

Read Article