263

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? Commented May 18, 2017 at 10:57
  • 2
    @Pierre.Vriens This is the image that was being referred to in those (now deleted) examples. Commented May 18, 2017 at 11:56

4 Answers 4

Reset to default
278

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

HTML:

The documentation says to revert to good ol' HTML for resizes and force client-side resize:

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

Which is also considered good practice as it scales for high res displays (note that it loses the "link" back to the source image, however, and the src [optional width, optional height] tags can only be in that order on SE posts).

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

Improve this answer
20
  • 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... 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. Commented Oct 10, 2009 at 10:18
  • Note: The image title goes last. :) Commented Aug 22, 2013 at 20:16
  • 2
    The image tag does not show when I add width or height. Commented Nov 22, 2014 at 8:54
  • 3
    @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. 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! Commented Feb 27, 2015 at 19:05
  • 1
    If you use the img tag approach, don't add px after the size! 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. :( 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. Commented Aug 7, 2016 at 11:53
  • 7
    Using only height will keep aspect ratio, which is most useful. Commented Feb 13, 2017 at 7:51
  • 4
    Using just height or width will scale the image accordingly Commented Jul 15, 2018 at 7:18
  • 4
    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). 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 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? Commented Jul 2, 2020 at 6:47
  • 2
    Stack Exchange’s image hosting arrangement with Imgur has ended which was announced in November 2023 and the migration to i.sstatic.net has been completed on May 28th 2024. Appending letters to the URL to modify image sizes still works. Commented Apr 25 at 10:49
47

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
3
  • 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 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. Commented Aug 24, 2022 at 16:14
  • 2
    Below 1000, this seemingly abruptly crops non-square images Commented Jan 27 at 3:20
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. Commented Nov 28, 2016 at 10:48
  • 3
    @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'. Commented May 3, 2020 at 14:56

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.