252

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?

Improve this question
2
  • Please note that both links are broken. Can you think of another example to replace those links?
    – Pierre.Vriens
    Commented May 18, 2017 at 10:57
  • 2
    @Pierre.Vriens This is the image that was being referred to in those (now deleted) examples.
    – Jason C
    Commented May 18, 2017 at 11:56

4 Answers 4

Reset to default
269

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.

Improve this answer
18
  • 5
    Note that for some reason this only works on SO if the src attribute comes first (before width and/or height). A while back it really puzzled me that I couldn't get the image working even though the url and everything seemed right...
    – Jonik
    Commented Oct 10, 2009 at 10:07
  • 4
    The order of src, width, height is the convention SOFU sticks to for the wild guns of HTML for images.
    – random
    Commented Oct 10, 2009 at 10:18
  • Note: The image title goes last. :)
    – Mr. Polywhirl
    Commented Aug 22, 2013 at 20:16
  • 2
    The image tag does not show when I add width or height.
    – Ciro Santilli OurBigBook.com
    Commented Nov 22, 2014 at 8:54
  • 2
    @CiroSantilli You need to put the parameters in order: src, width, height. Ran into the same problem myself and didn't realize the fix until I found this question and followed random's comment.
    – Iszi
    Commented Feb 27, 2015 at 17:14
  • @Iszi thanks for the tip, I'll try it out next time I edit an image. Their XSS filter is merciless!
    – Ciro Santilli OurBigBook.com
    Commented Feb 27, 2015 at 19:05
  • 1
    If you use the img tag approach, don't add px after the size!
    – ROMANIA_engineer
    Commented Nov 27, 2015 at 15:34
  • 1
    This breaks the automatic linking to the image at the same time as displaying it feature. If you change the url, when you click on it, you will get the same sized picture, not the original one. :(
    – cde
    Commented Feb 3, 2016 at 19:28
  • This was useful. Thanks! A warning I want to add is that apparently the m/s -modifiers to the imgur file name don't seem to work with animated gifs. At least I only got an appropriately scaled static picture showing the first image of the animated GIF.
    – Jyrki_Shog9Supporter
    Commented Aug 7, 2016 at 11:53
  • 7
    Using only height will keep aspect ratio, which is most useful.
    – sancho.s ReinstateMonicaCellio
    Commented Feb 13, 2017 at 7:51
  • 2
    Using just height or width will scale the image accordingly
    – phuclv
    Commented Jul 15, 2018 at 7:18
  • 2
    Client-side resize is preferable for Retina displays. It will display at full native resolution, but still the proper size on the screen (twice the pixel size, but twice the density as well).
    – SilverWolf
    Commented Oct 20, 2018 at 21:17
  • Appending the letter b to the end seems to do something as well. For me it was a happy medium between m and s
    – Albert Renshaw
    Commented Dec 17, 2018 at 18:47
  • 1
    @random, after doing this, the resolution of the image gets spoiled. So, what can be done to tackle this?
    – SarGe
    Commented Jul 2, 2020 at 6:47
  • @AlbertRenshaw yes b means big. See the full list of suffixes here How to reduce image size on Stack Overflow
    – phuclv
    Commented Jun 7, 2022 at 4:58
45

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:

enter image description here (?s=16)    enter image description here (?s=32)    enter image description here (?s=64)    enter image description here (?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 &nbsp;.

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:

Babou, aka My Patou Babou, aka My Patou Babou, aka My Patou

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.

Improve this answer
2
  • 1
    Love it! I needed this for stackoverflow post that my image was way too large in. I had to go with 256, but it works! And, in markdown too: [1]: https://i.sstatic.net/dfP0S.png?s=256
    – Neil Gaetano Lindberg
    Commented Aug 24, 2022 at 15:49
  • 2
    @NeilGaetanoLindberg merci for the kudos (and upvote). BTW, I saw your edited SO-post in which you added that "?s=256", which indeed does the trick. But just in case you're not aware of it, as a variation you could also have changed that URL to i.sstatic.net/dfP0S$.png, whereas $ can have the value s (small), m (medium) or l (large), and in your case 'm' seems to be the best fit.
    – Pierre.Vriens
    Commented Aug 24, 2022 at 16:14
27

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.

Improve this answer
11

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.

demo

Same image in Smaller:

demo

Improve this answer
2
  • 2
    You saved my life. I think, however, that "t" could mean "tiny" rather than thumbnail. Because, actually, the "s" mode more resembles a thumbnail than "t", as it is cropped to a square.
    – dim
    Commented Nov 28, 2016 at 10:48
  • 2
    @dim: the imgur.com documentation names it small thumbnail, and I suspect it was the first resizing option added. I see no evidence anywhere that it was meant to be short for 'tiny'.
    – Martijn Pieters
    Commented May 3, 2020 at 14:56

You must log in to answer this question.

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