What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 131 Stack Exchange communities.

How can you thumbnail an uploaded image on Stack Overflow?

share|improve this question

2 Answers 2

up vote 30 down vote accepted
+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 http://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.


share|improve this answer
    
PNG seems to work in thumbnails too. –  3ventic Jan 7 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. –  lunboks Jan 7 at 17:48
1  
Help section about images could use this info. –  user1306322 Mar 6 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 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 at 23:06

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.

share|improve this answer
    
Nice! Any chance it can also ask for a title? –  Arjan Jun 30 '12 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 '12 at 12:56

You must log in to answer this question.

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