Resizing an image in a post?

Question

Is it possible to resize an image in an answer? For example, How important is PhD research topic to getting a job? has an answer that should have the image in the answer, but it's too big.

Is there a way to handle resizing?

Answer 1

Now that all image uploads are stored on Imgur servers, you can tweak the URL to show various sizes should the original be too large.

Where the original might be something as obscenely large as this:

https://i.sstatic.net/R7QBb.jpg

Slip an m or s character at the end of the file name, just before the file extension, like so:

Medium:

https://i.sstatic.net/R7QBbm.jpg

Smaller:

https://i.sstatic.net/R7QBbs.jpg

You can whack in good ol' HTML for that and force client-side resize:

<img src="http://example.com/path-to-ghosts.jpg" width="100" height="100">

But, it's up to you to work out what a good set of resize dimensions will be.

Answer 2

You can also add a query string like ?s=xyz (with xyz = 16, 32, 64, 128, 256 or 512) after the name of the image to change it from gSpBi.png to (eg) gSpBi.png?s=128. I.e I just added the query string ?s=128 right after .png. Attention: sometimes part of the top and bottom are not shown (I think it depends a bit on the actual image you're using).

Some examples of using such query string in an image, for xyz = 16, 32, 64, 128:

 (?s=16)     (?s=32)     (?s=64)     (?s=128)   

Btw, the above also shows that you can even insert some text in between 2 images, though such text seems to have these limitations (at least I have no idea yet how to get around those):

• cannot have text that spans more then a single line.
• the vertical alignment of the text is always at the bottom of the image.
• the spacing between the image and text can only be set using  .

Note: The currently accepted answer doesn't mention that you do need to respect some specific HTML formatting syntax, in order to be able to use the img HTML tag. E.g. to create these 3 variations (sizes) of an image:

Here is the HTML source that created the previous 3 images:

<img src="https://i.sstatic.net/gSpBi.png" width="216" height="180" alt="Babou" title="My Patou">
<img src="https://i.sstatic.net/gSpBi.png" width="270" height="225" alt="Babou" title="My Patou">
<img src="https://i.sstatic.net/gSpBi.png" width="135" height="113" alt="Babou" title="My Patou">

PS: I only learned about these things via browsing of sources, and experimenting, I am not aware of any documentation about this.

Answer 3

If it helps anyone else here is one more hack that would make a post readable when referencing large images:

In the description you will have this to reference an image

[![My App TouchID authentication][2]][4]

At the bottom of the page I have defined 2 images, one was automatically created when I uploaded the image and the second one I created

[2]: https://i.sstatic.net/PieY5m.png
[4]: https://i.sstatic.net/PieY5.png

Notice the only difference between 2 and 4 is the m. Going back to the markdown for the image

The [2] reference is used inside the image tag uses the medium sized imgur.com image. The [4] next to the image tag references the link that the image would link to, this is the larger image uploaded to imgur. You can replace m.png with s.png as mentioned by random.

Hopefully this helps someone.

Answer 4

Additionally to previous answers, I've found another mode which is useful where the image is wide. Let's see:

Using 't' (maybe Thumbnail or Tiny) as @dim suggested.

Same image in Smaller: