53

How can you thumbnail an uploaded image on Stack Overflow?

Improve this question

2 Answers 2

Reset to default
65
+50

Images embedded in your post are already displayed to be 640 pixels wide on the regular site, or 90% on the mobile site, to fit the page layout. If that's not enough, or if you want to reduce the download file size too, you have a couple options:

  • Use the HTML syntax for embedding images, which allows for height and width parameters. The scaling is done by the browser, and the whole image is still downloaded.
  • Create the thumbnail yourself using the image manipulation tool of your choice.
  • Invoke imgur's black magic to create the thumbnails for you.

imgur's thumbnail feature

If you uploaded your image via the editor's upload function, you can let imgur do the work for you. (If they reside on your own imgur account, this will still work, but you really should use the branded upload.)

You do this by appending a special suffix to the image code.

Consider this cat. It is too big to fit the page, and its URL is https://i.stack.imgur.com/mZCux.jpg. With the thumbnail feature, we can do this:

Notes

  • The square options s and b will force the image to be a square of that exact size, downscaling/upscaling and cropping it in the process if necessary.

  • The thumbnail options won't have any effect if the image is already within the maximum dimensions. They also respect image proportions and won't crop your image.

Improve this answer
5
  • 1
    PNG seems to work in thumbnails too.
    – 3ventic
    Jan 7, 2014 at 16:23
  • 1
    @3ventic Apparently the rules have changed a bit. Small thumbnails of PNGs are now also PNGs, but different sizes still seem to be converted to JPEG (if resizing is done). Anyway it doesn't really matter because imgur sends the correct Content-Type regardless of extension, so I removed that line.
    – a cat
    Jan 7, 2014 at 17:48
  • 1
    Help section about images could use this info.
    – user1306322
    Mar 6, 2014 at 2:38
  • Cool update. It's worth noting that the default max width of 650 pixels is set for all SE posts. Wider images will get downscaled, losing sharpness. Also, 2 m-sized images can fit in a row. I haven't experimented with other sizes, but putting several smaller images in a row allows for neater illustrations.
    – user1306322
    Mar 6, 2014 at 15:59
  • Don't forget the s parameter for icon sizes. EG: /mZCux.jpg?s=64. Valid values for s seem to be 16, 32, 64, and 128.
    – Awesome Poodles
    Apr 23, 2014 at 23:06
10

There now is a script that aids you in creating thumbnails:

Thumbnail Uploader

It adds an improved "upload" dialog:

enter link description here

The large/medium/small options use the imgur hacks described above. The height/width creates an HTML image tag (leaving one blank locks aspect ratio).

And, of course, there's a "link to full size" option for thumbnailing.

Improve this answer
4
  • Nice! Any chance it can also ask for a title?
    – Arjan
    Jun 30, 2012 at 12:47
  • @Arjan: Yeah, I remember keeping a placeholder for the title in the script, so adding this shouldn't be hard. I'll look into it later. re:HTML fixed, thanks :)
    – Manishearth
    Jun 30, 2012 at 12:56
  • The linked app says it is no longer being maintained.
    – Stevoisiak
    Dec 19, 2017 at 17:02
  • 1
    @StevenVascellaro The SE uploader design changed so I assume this stopped working as well.
    – Tim
    Feb 15, 2018 at 17:07

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .