Imgur different image sizes and Thumbnails

Imgur.com is a popular free image hosting service used by many people. I use it to host images I post on public forums because it's really easy to use. If you're uploading the image as a guest, it generates a one time delete link for you to save somewhere so you can visit that link to delete the image anytime. If you aren't worrying about deleting the image later, you can simply copy the direct link to the image and close the Imgur window. But once you close the window, you are not going to find those details again.

So recently, I uploaded a large image to Imgur and embedded it to a forum and noticed that the image is too large to be displayed in an average screen. My image was covering the whole screen and soon I understood that other users are not going to be happy with what I have done. So I changed my idea to show a thumbnail of the image and give a link to the original image. But I've already closed the Imgur window. So I had no more information about the image.

The only option I had is to create two images, one thumbnail and one original. Then upload the both images to Imgur and embed them separately. But it was a lot of additional work, and I wanted something easy and simple. Luckily, I found their API documentation and there, they have mentioned about different image sizes. It was really simple.

If you want to get different image sizes, you only have to append a single character to the end of the image name as below. Imgur will then generate the thumbnails for you saving a lot of time.

Imgur provides 6 image sizes so you can select whatever the size suits your requirement. The following table shows you the different image sizes available.

Thumbnail Suffix Thumbnail Name Thumbnail Size Keeps Image Proportions
s Small Square 90x90 No
b Big Square 160x160 No
t Small Thumbnail 160x160 Yes
m Medium Thumbnail 320x320 Yes
l Large Thumbnail 640x640 Yes
h Huge Thumbnail 1024x1024 Yes

For example, if your image is located at http://i.imgur.com/12345.jpg, you can get different image sizes as below;

Small Square - http://i.imgur.com/12345s.jpg
Big Square - http://i.imgur.com/12345b.jpg
Small Thumbnail - http://i.imgur.com/12345t.jpg
Medium Thumbnail - http://i.imgur.com/12345m.jpg
Large Thumbnail - http://i.imgur.com/12345l.jpg
Huge Thumbnail - http://i.imgur.com/12345h.jpg

Source: http://api.imgur.com/models/image

Notice the last character at the end of the image name (before the extension).

If you think I've missed anything, please feel to let me know that by leaving a comment here. Also, if you think this blog post is useful, please consider sharing it with your friends in Google+, Facebook and Twitter.

5 comments :

  1. Didn't know there were thumbnail options, this is very useful.

    ReplyDelete
  2. But then what do you do if you want your image post to appear as that thumbnail which will open to the original size when clicked on?

    ReplyDelete
    Replies
    1. You can link it to the original image :) Pseudocode:

      [link = original image] [img-thumbnail] [/link]

      Delete

  3. There are lots of information about latest technology and how to get trained in them, like this have spread around the web, but this is a unique one according to me.


    SEO Company in Chennai

    ReplyDelete
  4. There are lots of information about latest technology and how to get trained in them, like this have spread around the web, but this is a unique one according to me.


    SEO Company in Chennai

    ReplyDelete