I noticed at the start of August 2018 that new images like https://i.stack.imgur.com/MJrvX.png no longer resize when an m is placed before .png.

  1. Original image:
    Auto shrunk by page formated to about 609 pixels (desktop), but still full size.

  2. l suffix:
    Should reduce image to 640 pixels wide.
    ~~ FAILS ~~ default

  3. m suffix:
    Should reduce image to 320 pixels wide.
    ~~ FAILS ~~ default

  4. t suffix:
    Should reduce image to 160 pixels wide.
    ~~ FAILS ~~ default

  5. s suffix:
    Should reduce image to 90x90 pixels.
    But notice that image displayed is from the middle of the original image, where there is no detail -- ~~ FAILS ~~

Additional proof that this once worked on PNG images can be seen in: Preserve image transparency when resizing images

Please restore this resizing functionality ASAP.

migrated from meta.stackoverflow.com Aug 11 at 8:13

This question came from our discussion, support, and feature requests site for professional and enthusiast programmers.

  • 4
    I had this problem, too. The m addition did nothing and s made the image smaller but also cropped it. – Catija Aug 11 at 12:08
  • Stack Overflow can ask Imgur to restore the functionality, but I'm not sure they can "restore this resizing functionality", ASAP or otherwise... – Heretic Monkey Aug 12 at 14:28
  • 8
    @HereticMonkey, Stack Exchange pays Imgur to do a job, they can dang well pressure them to stop the malfunction. And, Stack Exchange is probably one of their bigger paying customers. ...Or Stack Exchange can switch providers, or move the capability in-house. – Awesome Poodles Aug 12 at 21:24
  • I don't know why the following post doesn't appear in the related column, maybe lack of votes? But I have found it useful. Related: The order of the attributes in the <img/> element matters when it shouldn't – Mari-Lou A Nov 1 at 8:11

This bug is very annoying when trying to create or fix posts with overlarge images. We used to be able to display a reasonably shrunk picture that linked to the full size one.

Here's a temporary workaround until this bug is fixed:

Refer to the allowed HTML FAQ.

Use markup like:

[<img src="https://i.stack.imgur.com/MJrvX.png" width="320" height="30" alt="wide demo pic">][2]
  [2]: https://i.stack.imgur.com/MJrvX.png "Click for larger image."

which yields:

wide demo pic .

-- With:

  • a useful alt parameter
  • Hover text.
  • a convenient link to the image, full-sized.
  • 3
    Note: If you don't include the height="30" attribute, the image will preserve its aspect ratio instead of being squished. Awesome Poodles has a reason for including it, but hasn't yet explained why. – Cool Fool Sep 13 at 23:58
  • @CoolFool, I did explain to you semi-privately. The main reason is to illustrate the allowed attributes in the only allowed order. A second reason is so the image is more prominent as an image (rather than some thin kind of horizontal rule). – Awesome Poodles Sep 14 at 0:06
  • Why not add a second example to show the best of both worlds? I don't know why SE decided to only allow a specific order (that's not part of HTML), and it looks better with the original aspect ratio. I certainly don't want to manually calculate the height for every image I edit. – Cool Fool Sep 14 at 0:35
  • @CoolFool, because I don't see a pressing need, and the KISS principle. ... As for SE, I think it's a combo of whitelisting ease and the same reason that brown M&M's are forbidden. – Awesome Poodles Sep 14 at 0:46

Yet another workaround might be adding 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: Similar to what is mentioned in another answer, make sure 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">
  • The s parameter crops the image into a square. That's no good for most images, but okay for some. You can also use select other integers -- 16, 32, 64, 128, 256, 300, 500, 512, and 900 -- for s. – Awesome Poodles Oct 29 at 20:57
  • Thank you for this! In my particular case I'm also interested in the minimization of the loading time (and data volume) for users of mobile devices or living in places in the world with less-than-awesome connection speeds, or with explicit data charges. I'm curious if this work-around does the resizing on the server side (as the imgur feature did), or does it download the full image size to the user's device first, then do the resizing there? – uhoh Oct 30 at 1:50
  • 1
    @uhoh, it's the former (the s parameter, and the previously working suffixes, do save bandwidth). – Awesome Poodles Oct 30 at 6:26
  • Okay that's great news! Can you change "former" to "server" in your comment? Thanks! – uhoh Oct 30 at 6:28

The Stack Exchange network also allows direct embedding of images, as well as the handy image shortcut. Until this issue is fixed, you can use direct image embedding as a workaround. The following code produces the image below it:

[<img src="https://i.stack.imgur.com/MJrvX.png" width="320" alt="wide demo pic">][1]

[1]: https://i.stack.imgur.com/MJrvX.png "Click for larger image."

wide demo pic

Notes: Stack Exchange style is to place the link URL at the bottom of the post, after all the remaining paragraph text (see the markdown source of this post as an example). Also, you will get better results across both browsers and mobile devices if you don't include the optional height attribute (see below).

From What HTML tags are allowed on Stack Exchange sites?:

img Attributes

The following attributes are allowed on the <img> tag, but note that the mobile theme enforces a maximum width of 90%, so specifying a height might not scale the image proportionally on the mobile sites.

The attribute order is important! Using a different order (e.g., height before width) will strip the tag!

width="" (up to 999; do not include the 'px' extension)
height="" (up to 999; do not include the 'px' extension; see note above)

You must log in to answer this question.

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