Better image embedding and viewing

Question

I think I might understand why, or at least partially why, SE doesn't use something like "lightbox", but I do feel SE could make the upload and embed procedures a little bit more user friendly, and most definitely improve the actually viewing experience for those browsing the site.

For example, consider this question on this site. There are 5 images which if not made medium size, will require one to scroll a lot to read. OK, maybe 5 pics was an excess there, but even in cases where there are 2 or 3 pics, for example here or here, it is easy to see the entire question and the images at a glance if they're medium sized and tiled. Having to scroll greatly disturbs the flow of reading.

Can we implement a feature whereby images uploaded are automatically set to medium, with links to the high res versions and the subsequent images tiled? Also, upon clicking one image, it should bring up a lightbox like pop-up, where by you can see the larger picture, use right/left keys to cycle through the rest and press escape to quit.

While I can fully appreciate images aren't that important on some SE sites, it's little details like poor image handling that can (really) hurt SE sites like Gardening, DIY, etc where images are (should be) an important feature...

Would it be possible to get SE developers to look into possibilities to improve image handling?

The above was brought on by my minor frustration with how images are handled on SE and by noticing yoda spending his (valuable) time cleaning up images on SE Gardening.

Answer 1

Until we hear anything from the SE team, here's what I do, and others can follow this to resize pics if they so wish.

If the original post is something like:

text here 

![image 1][1]

![image 2][2]

text here

  [1]: https://i.stack.imgur.com/xxxxx.jpg
  [2]: https://i.stack.imgur.com/yyyyy.jpg

I change it to:

text here 

[![image 1][1]](https://i.stack.imgur.com/xxxxx.jpg)    
[![image 2][2]](https://i.stack.imgur.com/yyyyy.jpg)

text here

  [1]: https://i.stack.imgur.com/xxxxxm.jpg
  [2]: https://i.stack.imgur.com/yyyyym.jpg

Note the three key changes:

1. The two images are listed on successive lines (no blank line)
2. Each image is now linked to the original image
3. The image links at the bottom have an m appended to the random 5 character ID. This is for a medium sized image.

You could also get sophisticated and use HTML like

<img src="https://i.stack.imgur.com/xxxxx.jpg" width="200">&nbsp;
<img src="https://i.stack.imgur.com/yyyyy.jpg" width="200">&nbsp;

I've found that setting it to medium makes two images fit neatly within the answer box, if they're both oriented the same way, and is quick. So I'll probably stick with that for now.

Answer 2

Here's a userscript that provides an improved upload dialog with resizing/linking options.

https://stackapps.com/q/3507/10098