3
$\begingroup$

I have a comment/suggestion below this question which contains two animated GIF images that are 1.2 and 1.6 MB in size.

please put animated and heavyweight images under a spoiler or something...

Does a spoiler alert block pre-loading of the images until one hovers, would it help in any way for readers who had slow connections or other difficulty loading images?

I'm guessing right now the SE interface is kept minimal in the sense that it doesn't have the ability to load different size images depending on different data rates that handheld devices might report back to the site. But maybe something exists and I don't know about it yet.

For example, here is the link to the still ISRO image below: https://i.sstatic.net/KaqU1.png If you add s or m or l to the end of the image name (before the extension) you can get handy pre-shrunk versions.

That half-works for GIFs, but it is no longer shown as animated.

I wonder if there is a way to make these automatically happen for people with slow connections without altering the way the post displays with people with connections that are supporting the post without issues?

(as always, please don't add the feature request tag at this time)

enter image description here

enter image description here enter image description here

enter image description here

enter image description here

$\endgroup$

4 Answers 4

Reset to default
7
$\begingroup$

1.

First, to address the specific thing asked:

  • Does putting an image inside a spoiler tag help?

No. The image is loaded anyway, and just hidden with CSS. That is what the inspector tells me. To definitely verify this I did a test over a low bandwidth connection and monitored the data usage: Images inside spoiler tags are definitely loaded.

  1. (about embedding)

The underlying problem here is of course the tradeoff: Are the images, animations or videos worth it? That depends.

Something that always should be considered is Linking to content instead of embedding it. This is not only for data usage consideration but also to keep posts short and concise.

As a general rule of thumb:

Related content should be opt-in, using links, if it is not essential to understand the post.

  1. (some useful facts)
    • Embedding videos are not "free" even if a visitor does not click it as the Youtube player scripts are currently several megabytes in size. (Some people of course have it cached, but you newer know.
    • As you noted, imgur images have several available sizes using different endings of the URL. (Tip: have a smaller version of the image loaded, but make the link point to the original full size image).
$\endgroup$
6
  • $\begingroup$ One reason to import images is to take some measure against loss due to link rot. I wonder if one could first import in order to generate a second "backup" more rot-resistant imgur link, and then post both links (to maintain original source as long as it exists) while removing the displayed image. $\endgroup$
    – uhoh
    Commented Jun 10, 2017 at 20:30
  • $\begingroup$ To double check, the script for the embedded YouTube viewer is several megabytes? Wow I hadn't realized there was such an impact. By some people having it cached, would this be because the've necessarily loaded another stackexchange post with embedded YouTube, or might it include other websites or the YouTube site itself? Thanks! $\endgroup$
    – uhoh
    Commented Jun 11, 2017 at 9:42
  • 1
    $\begingroup$ @uhoh Most sites embedding Youtube videos use the same method (including SE), so the cached content is indeed the same. As for the Youtube site itself, the player is a little different, but the largest chunks are still the same. $\endgroup$
    – SE - stop firing the good guys Mod
    Commented Jun 11, 2017 at 11:05
  • 2
    $\begingroup$ @uhoh Loading space.stackexchange.com/q/21891/415 without using the browser cache downloads 7642 KB for me just now. Of that, www.youtube.com is responsible for 3182 KB and i.stack.imgur.com another 2729 KB. Excluding just the embedded images and the video-related downloads leaves about 1.7 MB to be downloaded. That's still a sizable chunk of data for what basically amounts to a few pages of text, but not quite as extreme as 7.6 MB. $\endgroup$
    – user
    Commented Jun 12, 2017 at 10:59
  • $\begingroup$ @MichaelKjörling thanks for the quantitative reality check! I can understand better now the plight of people viewing the post from different countries with vastly different connect speeds. $\endgroup$
    – uhoh
    Commented Jun 12, 2017 at 11:09
  • $\begingroup$ Thank you again for all of this - I've just used the multi-size technique (described in more detail in this helpful answer) in the question NASA's flying telescope SOFIA — How to find flight plans and real time location? $\endgroup$
    – uhoh
    Commented Jul 9, 2017 at 9:46
2
$\begingroup$

As it has been mentioned in Hohmannfan's answer: provided the smaller, static image and link it to the original animation.

Example:

animation of ...

Click the image to play the GIF animation (1.2 MB)

Markup used by the example:

[![animation of ...][2]][1]

[1]: https://i.sstatic.net/oellg.gif
[2]: https://i.sstatic.net/oellgm.gif
$\endgroup$
4
  • $\begingroup$ I see! I make all my own GIFs, so I could make a smaller sized animated GIF with fewer frames (e.g. n=3) and slower motion as well (e.g. fps=1) that would be a lot easier on the eyes also, like this one which is only ~100 kB i.sstatic.net/N9iyF.gif $\endgroup$
    – uhoh
    Commented Jun 11, 2017 at 14:01
  • $\begingroup$ Oh! now I really see!! > [![animation of ...][2]][1] So that's what those two numbers are for. Great, I learned something new today, thanks for taking the time to post here. $\endgroup$
    – uhoh
    Commented Jun 11, 2017 at 14:15
  • 1
    $\begingroup$ @uhoh ![...][xx] (or alternatively ![...](xx)) is an inline image. [...][xx] or [...](xx) makes whatever is inside the first pair of brackets a link to whatever is in the second pair. space.stackexchange.com/help/formatting describes Markdown inline images and links in ever so slightly more detail. $\endgroup$
    – user
    Commented Jun 12, 2017 at 11:17
  • $\begingroup$ Thank you again for this - I've just used this technique in the question NASA's flying telescope SOFIA — How to find flight plans and real time location?. $\endgroup$
    – uhoh
    Commented Jul 9, 2017 at 9:48
1
$\begingroup$

A real solution would be to make StackExchange support video files via tags, while hosting them the same way as images, or just upload them somewhere as regular files and include links in post. Any proper video codec (including H.264 and VP9) can achieve orders of magnitude smaller file sizes with similar or better quality than GIF.

AFAIK right now StackExchange doesn't support video tags, so it leaves one of the two ways: upload videos somewhere and make a regular hyperlink.

As an example, the same fragment of the same video but in mp4: https://my.mixtape.moe/vhlrqw.mp4
It's playable right in the browser, it's only 267 KB (almost 6x smaller), but it has more frames per second and overall quality is better.

If I had re-encoded it instead of just directly copying part of the video from youtube, it could be made even smaller, youtube's compression is not the most efficient.

Update: after re-encoding with lower FPS and more aggressive compression to make the quality similar to GIF, the size is now 59KB and it's 26 times smaller than the GIF file, and IMO still looks better: https://my.mixtape.moe/eujbvu.mp4

Commands used to create the last example:
youtube-dl https://youtu.be/mpViVEO-ymc (rename downloaded file to ex.mkv)
ffmpeg -ss 3:56 -i ex.mkv -t 5 -map 0:v -c:v libx264 -preset veryslow -tune film -crf 33 -vf scale=iw/3:-1 -r 10 ex.mp4 and now the result is in ex.mp4
I'm not a total expert in ffmpeg, so it's probably can be done even better, I don't know.

$\endgroup$
9
  • $\begingroup$ Wow, that's incredible! I can't see it in my browser yet (I get a black window with the little progress bar, but no response to clicking) but I can download to my desktop and play it there and it's beautiful and yet so much smaller. Sweet! $\endgroup$
    – uhoh
    Commented Jun 11, 2017 at 14:06
  • $\begingroup$ @uhoh check out the update $\endgroup$
    – Display Name
    Commented Jun 11, 2017 at 14:21
  • $\begingroup$ Incredible, and the second one plays in my browser. This is a great demo; I understand much better. Getting new toys into the SE environment has a pretty high barrier, but at least I understand better the possibility. Thanks for taking the time to stop by and post here! $\endgroup$
    – uhoh
    Commented Jun 11, 2017 at 14:26
  • $\begingroup$ @uhoh even without support for video tags and hosting from SE, it's possible to upload videos to some (presumably) reliable site, like google drive or something, and use links in posts at SE. $\endgroup$
    – Display Name
    Commented Jun 11, 2017 at 14:28
  • $\begingroup$ Yep I understand. My personal bias is to stick with the tools supported here in SE, but I'll keep this in mind and see what I can learn. In the mean time, I think other people reading this post can benefit immediately from this. Do you think it's possible that imgur.com could ever support .mp4 uploads like this, or that imgur.com would incorporate mixtape.moe? I see that it can make a .gifv but I don't know what this thing is and can't import here; i.imgur.com/X5r1Fz6.gifv $\endgroup$
    – uhoh
    Commented Jun 11, 2017 at 14:36
  • $\begingroup$ Oh, now I know what else is bothering me. When I make GIFs from YouTubes I make them from screenshots on purpose. This way the original source (YouTube) and the title of the video are absolutely visible. I'm not making a new video. People can see the timecode (or the progress bar at least) and the title and go find the source. I just feel better doing it this way. $\endgroup$
    – uhoh
    Commented Jun 11, 2017 at 14:43
  • $\begingroup$ @uhoh that's easy to do as well using ffmpeg (adding text overlays) $\endgroup$
    – Display Name
    Commented Jun 11, 2017 at 14:47
  • $\begingroup$ @uhoh imgur only accepts GIF as input AFAIK, so that will hurt quality (double re-compression) and limit the size which is practical to upload. MP4 files can be uploaded to any place which accepts arbitrary files, mixtape is nothing special, it's just a regular file hosting. All that is needed is a proper HTTP server. Playback controls, etc, this is all done by browser when it hits a video file instead of HTML page. $\endgroup$
    – Display Name
    Commented Jun 11, 2017 at 14:49
  • $\begingroup$ I really should learn to use ffmpeg. I usually resort to this when I want to start scripting frame manipulations. I ask about imgur because some of its features are already integrated with stackexchange ("My personal bias is to stick with the tools supported here in SE") $\endgroup$
    – uhoh
    Commented Jun 11, 2017 at 14:49
0
$\begingroup$

Reduce the number of images.

This is not exactly the answer you are looking for but in that question it was not clear to me what those pictures and animations added to a readers understanding.

Using the image size figures you gave above opening the question on cellular data would have cost me 0.1% of my monthly cellular data package.

$\endgroup$
1
  • $\begingroup$ No it's not in any way an answer to the question I have asked. I'm looking to see if there is a way to save you money by making all posts with images cheaper. $\endgroup$
    – uhoh
    Commented Jun 10, 2017 at 14:30

You must log in to answer this question.

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