How can I optimize images and screenshots that I embed in 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?

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

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 SE.

After embedding an image to your post using the upload feature on the site, you should see an imgur URL similar to https://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 https://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:

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. (9.7KB)
2. (25.7KB)

Other options that also appear to work are:

• b (square crop?) (38 KB)
• h (high quality original?) (190KB)
• s (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.