Can automatic loading of giant images be solved? [closed]

Question

I have noticed that even though the displayed image here is limited to only 630 pixels wide for the display (via height and width settings in the HTML), there can still be a 10-megabyte image sitting there behind it — so that when you bring up the page, your browser is slowly grinding through, all just to fit in that little box. In fact, as far as I can tell, there seems to be no limit to the size of images that Stack Exchange sites will autoload into people’s browsers. It does not matter whether it is 100k or 100 megabytes, or even larger. Anything goes, no matter what. This quite surprised me.

My question is this: is this no-size-limits-on-images thing here by design and intent? If not, then if it is just an accident of the implementation, is it a desirable feature or an undesirable one?

Perhaps I am wrong, but it seems odd to me that people can embed gigabyte (or whatever) images in their postings without any warning to other users, nor provision to limit their exposure. Some people really do pay for bandwidth, or only have so much of it. That’s why most sites, even Wikipedia, carefully set size limits on images that are diplayed on the main page without people clicking through. It seems a shame that rate-capped users would have to disable all images for fear of hitting a giant image on an SE site.

Is there any sort of notion that there might be a size above which it becomes a burden on other users, and is therefore discouraged? If so, what is the appropriate action if you stumble on a post with one of these gigantic images?

This arose in chat, where there is no opportunity to have a thumbnail that click-throughs to the full-sized image. It is worse there than on the main site. That’s because on the main site, if you want, you can arrange for a thumbnail to be displayed which if clicked through, takes you to the full-sized image. For example, like this:

That uses the trick of imgur thumbnail magic with the “l” suffix mentioned in this answer, like this:

For example, like this:  <a href="https://i.sstatic.net/CLQzM.jpg"><img src="https://i.sstatic.net/CLQzMl.jpg"></a> 

I was somewhat surprised that the upload mechanism did not already do that automatically. It seems to me it could be made to, so that only if you click on the image do you pay the full cost. Of course, this would only work for imgur uploads, not arbitrary image links.

And while conscientious users can do such a thing on the main site, that wouldn’t work in chat. It would require some coding changes, since you cannot use real HTML there as I have here.

Am I missing something obvious, or is this a less than optimal state of affairs?

---

Edit: I found several tangentially related postings, of which the question on “Please do something to encourage people to scale down their giant heavyweight photos” seems the most interesting and relevant.

Answer 1

[Edited:]

It seems undesirable for a website such as this to have all users present in a chat room automatically download all full images behind posted image links. This should only happen after a thumbnail is clicked. How can this be achieved?

• Whenever you post a link to an image in chat, like http://www.website.com/image.jpg, the image should be automatically uploaded to Imgur; then in chat a thumbnail taken from Imgur's automated thumbnail system should appear. Clicking on the thumbnail in chat should link to the full image.

(This automatically created thumbnail is basically the link to the Imgur file with l stuck before the extension—at least that is how I believe it works now on Imgur: if you have an image on Imgur at, say, http://i.imgur.com/my50D.jpg, there is always an automatically created thumbnail at http://i.imgur.com/my50Dl.jpg. Imgur has other thumbnails too, at different sizes, with m for medium and a few more.)

• Al an alternative, this could be done within the browser of whoever posts the link, if possible. Whenever you post an image link in chat, the image is automatically (and invisibly) downloaded by your browser in the background, and your browser creates a thumbnail. Then the thumbnail is uploaded to Imgur, and it is posted in chat, linking to the full image on http://www.website.com/image.jpg. All this happens automatically, and only once, at the moment you post a link to an image in chat. The browsers of everyone else in the room then only see the thumbnail, which links to the original image http://www.website.com/image.jpg if you click it.

This way, Imgur is not unnecessarily burdened with storing and processing large images: only the uploader's browser needs to do some extra work, and that only once. On the other hand, duplicating the images to Imgur prevents link rot. I'm not sure how difficult this would be to implement; can it be done with Javascript?

This should only be necessary for images over a certain size (be it in KB or in pixels); would that be hard to implement? It is more convenient if images under, say, 100 KB are posted directly as now.

Answer 2

One complication is SVG images. An SVG map from Wikipedia was posted in Linguistics chat, http://upload.wikimedia.org/wikipedia/commons/7/76/Berne_Convention_signatories.svg.

Wikipedia maps are fairly detailed and can be several megabytes. This image was enough to make Firefox visibly slow down.

I suspect someone could perpetrate a denial-of-service on everyone in a chat room simply by posting a huge SVG image, large enough to make people's browsers unusable and possibly crash.

In order to prevent this, we would have to detect SVG images and render them to PNG. (Having Imgur support this would help.)

(In fact, you can do the same thing on the main site, using ![blah](http://upload.wikimedia.org/wikipedia/commons/7/76/Berne_Convention_signatories.svg).)