How can you thumbnail an uploaded image on Stack Overflow?
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
widthparameters. 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:
- /mZCuxs.jpg — small square, 90×90 (forced)
- /mZCuxb.jpg — big square, 160×160 (forced)
- /mZCuxt.jpg — small thumbnail, 160×160
- /mZCuxm.jpg — medium thumbnail, 320×320
- /mZCuxl.jpg — large thumbnail, 640×640
- /mZCuxh.jpg — huge thumbnail, 1024×1024
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.
There now is a script that aids you in creating thumbnails:
It adds an improved "upload" dialog:
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.