54

How can you thumbnail an uploaded image on Stack Overflow?

Improve this question

2 Answers 2

Reset to default
67
+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 the image uploader's black magic to create the thumbnails for you.
  • Add a "resize" parameter to the image URL, see below.

Thumbnail feature

If you uploaded your image via the editor's upload function, you can let it do the work for you.

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

Consider this cat. It is too big to fit the page, and its URL is https://i.sstatic.net/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.

Resize feature

You can ask for a resized version of the image by specifying a querystring parameter s, for example ?s=64. This will force the image to be a square of that exact size, and the range is 1 to 999. Giving more than 999 will bring back the original image instead.

Improve this answer
6
  • 2
    PNG seems to work in thumbnails too.
    – 3ventic
    Commented 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
    Commented Jan 7, 2014 at 17:48
  • 1
    Help section about images could use this info.
    – user1306322
    Commented 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
    Commented 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
    Commented Apr 23, 2014 at 23:06
  • @AwesomePoodles now it supports all numbers, from 1 to 999. :)
    – Shadow Wizard
    Commented Jul 10 at 8:33
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
    Commented 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
    Commented Jun 30, 2012 at 12:56
  • The linked app says it is no longer being maintained.
    – Stevoisiak
    Commented Dec 19, 2017 at 17:02
  • 2
    @StevenVascellaro The SE uploader design changed so I assume this stopped working as well.
    – Tim
    Commented 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 .