93

The picture I uploaded is too large... Is there a way to limit the size (width & height)?

0

3 Answers 3

108

If you are using the native Stack Overflow imgur service (eg. clicking the little icon for adding an image in the toolbar), you can just append an s or m or l (for small/medium/large) at the end of the URL, before the file extension.

https://i.sstatic.net/kXY0J.jpg

demonstration image

https://i.sstatic.net/kXY0Jm.jpg

demonstration image

https://i.sstatic.net/kXY0Js.jpg

demonstration image

You could link to the full-size image if you want, too.

5
  • 6
    Yup. This. And you should be using the provided image hosting anyway, since that helps to keep down image rot. Commented Jul 20, 2013 at 9:02
  • Even adding l for "large" is actually useful to save bandwidth: i.sstatic.net/8IlR6.jpg vs i.sstatic.net/8IlR6l.jpg Thinking about it, maybe Stack Exchange should do that by default.
    – Arjan
    Commented Jul 20, 2013 at 9:13
  • @Arjan Then if we wanted to post a giant picture of a unicorn, how would we do it? We'd need a new h suffix for "huge". Commented Jul 20, 2013 at 9:34
  • Or remove the l, @Cody, if you'd know how the image insert works. Alternatively, Stack Exchange could post-process the pre-cooked HTML, to only add the l on the regular site, but I guess that's a no go. (In the regular site, the posts are limited to 660px, and imgur's "large" is 640px. So, we're 20px short if Stack Exchange would always add the l for the regular site only. But again: that needs post-processing of the cached HTML. On mobile, there's only max-width: 90% for images, so indeed image width could exceed imgur's 640px.)
    – Arjan
    Commented Jul 20, 2013 at 9:47
  • It didn't work for me while I was creating the question. But after posting the question, I could edit and the feature worked fine.
    – neves
    Commented May 14, 2021 at 21:08
34

You can use <img> tag to place the image and control its size:

<img src="{link to image}" width="{width}" height="{height}" />

Optionally, you can also leave out either height or width (but not both) to proportionally set the other value.

<img src="{link to image}" width="{width}" />

Examples

Resized to 200 by 200 in <img>:

<img src="https://via.placeholder.com/100" width="200" />

Resized to 150 by 150 in <img>:

<img src="https://via.placeholder.com/100" width="150" />

Original image, 100 by 100 pixels.

![](https://via.placeholder.com/100)

Resized to 50 by 50 in <img>:

<img src="https://via.placeholder.com/100" width="50" />

Resized to 25 by 25 in <img>:

<img src="https://via.placeholder.com/100" width="25" />

Resized to 10 by 10 in <img>:

<img src="https://via.placeholder.com/100" width="10" />
3
  • True, but note that the mobile theme uses max-width: 90% which might yield odd results when setting both width and height. Also, this should not be used to resize huge images (see Please do something to encourage people to scale down their giant heavyweight photos.)
    – Arjan
    Commented Jul 20, 2013 at 9:09
  • if using <img it may be good to use alt=" ... " for accessibility as well Commented May 19, 2020 at 16:37
  • @nonopolarity Unfortunately you cannot use <img /> inside a StackExchange answer post with both width="" and alt="" at the same time, I don't know if that's a bug or not.
    – Dai
    Commented Jan 19, 2022 at 10:39
-3

At the moment picture resize feature is not available. You have to do it manually by local software.

1
  • of course there are option using html commands. Commented Apr 2 at 10:13

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