10
$\begingroup$

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?

* Thanks to coleopterist over on http://anime.stackexchange.com for originally compiling this..

$\endgroup$
14
$\begingroup$

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

After embedding an image to your post using the upload feature on the site, you should see an imgur URL similar to http://i.stack.imgur.com/FOSov.png (just using this as an example). This should result in a large image (190KB, a relatively reasonable size, but even this can be optimised further):

...and Another one!

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/FOSovt.png (note that the filename now has an t (for small) at the end) will result in an image of smaller size and dimension:

...and Another one!

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

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

  1. ...and Another one! (9.7KB)
  2. ...and Another one! (25.7KB)

Other options that also appear to work are:

  • b (square crop?) ...and Another one! (38 KB)
  • h (high quality original?) ...and Another one! (190KB)
  • s (square cropped thumbnail?) ...and Another one! (15.6KB)

(I have no idea why the "square thumb" image is ~5KB larger than the "medium" one.)


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:

...my optimised image!

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


If these options are too complicated, just blindly add an l to the image filename in your post. This should display it in large dimensions and still load fast.

I should also note that anime/cartoon images generally tend to be more optimisable than photographs, etc.

$\endgroup$

You must log in to answer this question.

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