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
  • 4
    @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

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.
  • 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

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 .