Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 155 Stack Exchange communities.

What is meta?
Here's how it works:
  1. Any Stack Exchange user can ask a question
  2. The community provides support, votes on ideas, and reports bugs
  3. Your voice helps shape the way Stack Exchange operates

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?

share|improve this question
up vote 101 down vote accepted

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 obscene as this:

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

Slip your hand in with m or s 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.

share|improve this answer
2  
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 六四事件 法轮功 包卓轩 Nov 22 '14 at 8:54
    
@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 六四事件 法轮功 包卓轩 Feb 27 '15 at 19:05
    
If you use the img tag approach, don't add px after the size! – 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 at 19:28

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.

share|improve this answer

You must log in to answer this question.

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