6

Uploading 1MB images or even 300KB images in a question or answer is often unnecessary/overkill and slows down page loads significantly especially when viewing on a mobile connection. Similarly, really large dimensions are often pointless due to real-estate restrictions.

How can I keep file sizes down or adjust the dimensions of the images to reasonable and sensible numbers?

This post is shamelessly stolen from one by coleopterist over on Anime and Manga Stack Exchange. Go and visit for all your Anime question needs!

8

If you don't have the wherewithal to optimise an image prior to upload, here are a few tips on doing so directly on UX Stack Exchange:

After embedding an image to your post, you should see an imgur URL similar to http://i.stack.imgur.com/Bg1Lm.png (just using this image of a handsome chappie as an example). This should result in a large image (280KB, it could be a worse size, but even this can be optimised further):

http://i.stack.imgur.com/Bg1Lm.png

But this image can now be optimised even further simply by tweaking the URL being used. For example tweaking the URL to http://i.stack.imgur.com/Bg1Lmt.png (note that the filename now has an t (for small thumbnail) at the end) will result in an image of smaller size and dimension:

http://i.stack.imgur.com/Bg1Lm.png

This file is only 6.9KB in size and also smaller in terms of dimensions.

If the dimensions are unsuitable add an m (for medium thumbnail) or an l (for large thumbnail) instead. This will result in the following images respectively:

medium

large

Other options that appear to work are:

b (Big square crop):

big

s (Small square crop):

small square

h (Huge thumbnail crop):

huge


If you'd nevertheless prefer viewers to be able to view your uploaded image in all its raw glory, simply link an optimised image to it by wrapping the code like this:

[![...my optimised image!][2]][1]

This will link the thumbnail to the original source file, like so:

example clickable thumbnail!

In other words, those wanting to view a higher resolution [1] can do so by simply clicking on the thumbnail [2].

Imgur also have more detailed documentation on this

  • Seriously. How hard could it possibly be to add "Small, Medium, Large" as options to the "upload image"-dialog, and then automatically add the corresponding character to the generated URL? And automatically add a link to the original image... – Jørn E. Angeltveit Aug 7 '13 at 9:54
  • 1
    @JørnE.Angeltveit Agreed. The burden for having to optimize images shouldn't really fall to the user to have to manually edit the HTML. It's already sort of been suggested on the main Meta StackOverflow site so feel free to add your voice to it there as it's a global issue for all StackExchange sites and not one specific to this UX site. – JonW Aug 7 '13 at 10:07

You must log in to answer this question.

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