How can I streamline images and screenshots I embed into my post?

Question

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?

Answer 1

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

After embedding an image to your post, 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):

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 thumbnail) at the end) will result in an image of smaller size and dimension:

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 thumbnail) or an l (for large thumbnail) instead. This will result in the following images respectively:

1. (9.7KB)
2. (25.7KB)

Other options that also appear to work are:

• b (Big square crop) (38 KB)
• h (Huge thumbnail (1024x1024)) (190KB)
• s (Small square cropped thumbnail) (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:

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.