68

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:
    https://i.stack.imgur.com/MJrvX.png
    Auto shrunk by page formated to about 609 pixels (desktop), but still full size.
    default

  2. l suffix:
    https://i.stack.imgur.com/MJrvXl.png
    Should reduce image to 640 pixels wide.
    ~~ FAILS ~~ default

  3. m suffix:
    https://i.stack.imgur.com/MJrvXm.png
    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 ~~
    default

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 '18 at 8:13

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

  • 6
    I had this problem, too. The m addition did nothing and s made the image smaller but also cropped it. – Catija Aug 11 '18 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 '18 at 14:28
  • 10
    @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 '18 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 '18 at 8:11
  • 2
    @Catija could you as employee please clarify the position of the Stack Overflow company on this issue? – αλεχολυτ Jan 17 at 9:57
19

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.
  • 4
    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 '18 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 '18 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 '18 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 '18 at 0:46
8

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 '18 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 '18 at 1:50
  • 1
    @uhoh, it's the former (the s parameter, and the previously working suffixes, do save bandwidth). – Awesome Poodles Oct 30 '18 at 6:26
  • Okay that's great news! Can you change "former" to "server" in your comment? Thanks! – uhoh Oct 30 '18 at 6:28
5

It's always worth trying the m attribute first, as it still sometimes works.

I posted on the photo meta before discovering this post - Imgur image resize not always working - the linked question did resize one image, but even after several attempts with fresh uploads it refuses to resize the other. [s and b work, but not m]

The trouble with using the img tag instead of the m is that the downloaded image size is the same for the end user, whereas the m would significantly reduce the download itself, unless they click through for the full size.

The only real [& utterly PITA] solution I can see right now is to download the full-size image, re-size in the image manipulator of your choice & re-upload it, then you can link [1] and [2] after the fact to each size, as a totally separate upload/file name.

  • The create new m size image feature has stopped working, but if there are already existing m sized images, they will still display. Is there any chance that you or someone have already generated the m version of AwVru? It's not the display function that has stopped, it's only the generation of new m size versions of images that's gone. – uhoh Dec 18 '18 at 14:09
  • 1
    I've no way to tell. Testing a brand new image upload, it gives s & b but not m, so you may be right. – Tetsujin Dec 18 '18 at 14:18
  • Yep, the m worked for me a little while ago. It's intermittent. Hopefully, Imgur is A/B testing a fix or something... – Awesome Poodles Dec 26 '18 at 1:57
3

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!

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

Confirming this is still broken, and sharing my workaround.

Imgur still does the resizing, but very unreliably. I just finished successfully embedding three images with thumbnails in this post. There’s something wrong with their code or their infrastructure, and it’s failing for a high percentage of uploads, but not all of them.

The first two images in that post that I uploaded (the second and third in the post) came back without resized versions being generated, but both worked on a second try. Notice though that they only have t versions — the m versions generated are still uselessly full-sized.

The first image (last successfully uploaded) took dozens of tries. The first time it worked at all produced a useful m size but no true t size. Subsequent uploads produced no resized images. After dozens of tries I got a URL that finally gave a thrumbnail (though no medium version), and that was good enough to match it with the other two images.

A workaround is to just reupload until it works

Open a new blank question and just go to town, uploading until you get a URL that also has the resized version you need. A blank question box is easier to manage than working in the middle of other text and images, and is marginally faster since the JS has to chew on less preview.

This consumes Imgur URLs and storage, but Stack Exchange and Imgur will have to suck that up until they deal with the bugs in their resize process. Some posts need thumbnails or reduced images, and browser-based resizes aren’t always what the post needs.

  • Re-uploading is not a good option in case you just want to edit an existing post of someone. – Robert 1 hour ago

You must log in to answer this question.

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