177

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?

  • Please note that both links are broken. Can you think of another example to replace those links? – Pierre.Vriens May 18 '17 at 10:57
  • @Pierre.Vriens This is the image that was being referred to in those (now deleted) examples. – Jason C May 18 '17 at 11:56
  • @JasonC Merci for sharing that. I'd be happy to "suggest an edit" (to somehow integrate your prior comment), but for reasons I'm sure you will understand I'm not sure how such suggestion of me would be perceived, especially at this very moment. It's tough to be a good meta.SE citizen ... especially because there doesn't seem to be like a cook-book within the help pages (or anything like that), about the kind of edits that will not be perceived in a way they are not intended ... – Pierre.Vriens May 18 '17 at 12:17
  • In what sense is this "status-completed"? What was done to support this? – Scott May 19 '17 at 5:36
  • @Scott - if you see the accepted answer, you'd know what was "done" – warren May 19 '17 at 18:16
199

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:

http://i.stack.imgur.com/R7QBb.jpg

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

Medium:

http://i.stack.imgur.com/R7QBbm.jpg

Smaller:

http://i.stack.imgur.com/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.

  • 4
    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 Oct 10 '09 at 10:07
  • 3
    The order of src, width, height is the convention SOFU sticks to for the wild guns of HTML for images. – random Oct 10 '09 at 10:18
  • Note: The image title goes last. :) – Mr. Polywhirl Aug 22 '13 at 20:16
  • 1
    The image tag does not show when I add width or height. – Ciro Santilli 新疆改造中心996ICU六四事件 Nov 22 '14 at 8:54
  • 1
    @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 Feb 27 '15 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 新疆改造中心996ICU六四事件 Feb 27 '15 at 19:05
  • If you use the img tag approach, don't add px after the size! – ROMANIA_engineer Nov 27 '15 at 15:34
  • 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 Feb 3 '16 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 Lahtonen Aug 7 '16 at 11:53
  • 4
    Using only height will keep aspect ratio, which is most useful. – sancho.s Feb 13 '17 at 7:51
  • Using just height or width will scale the image accordingly – phuclv Jul 15 '18 at 7:18
  • 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 Oct 20 '18 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 Dec 17 '18 at 18:47
22

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.stack.imgur.com/gSpBi.png" width="216" height="180" alt="Babou" title="My Patou">
<img src="https://i.stack.imgur.com/gSpBi.png" width="270" height="225" alt="Babou" title="My Patou">
<img src="https://i.stack.imgur.com/gSpBi.png" width="135" height="113" alt="Babou" title="My Patou">
  • I'm curious where this is in the documentation? – Marcel Wilson Jun 7 '18 at 16:09
  • 2
    @MarcelWilson good question, I only learned about these things via browsing of sources, and experimenting. – Pierre.Vriens Jun 7 '18 at 17:13
20

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]: http://i.stack.imgur.com/PieY5m.png
[4]: http://i.stack.imgur.com/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.

9

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

  • 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 Nov 28 '16 at 10:48

You must log in to answer this question.

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