508

How do I reduce the size of an image in Stack Overflow questions?

I have found large size images in many Stack Overflow questions. I feel the formatting does not look good. While moderating I have not found any option to reduce the image size.

How do I reduce a large image while moderating questions to improve Stack Overflow quality?

1

2 Answers 2

801

Add a character to the file name to specify a size

If the images are hosted on the Stack Exchange imgur.com account (which most are), you can add a h, l, m, t, b or s to the filename in the URL (before the extension) to get resized versions.

For that post, for example, you can use
https://i.sstatic.net/a9LCgl.jpg instead of
https://i.sstatic.net/a9LCg.jpg to get a more manageable size screenshot.

If needed, you can always link to the full-size screenshot too; transform:

[![enter image description here][1]][1]

  [1]: https://i.sstatic.net/a9LCg.jpg

to

[![enter image description here][1]][2]

  [1]: https://i.sstatic.net/a9LCgl.jpg
  [2]: https://i.sstatic.net/a9LCg.jpg

and it'll link the reduced-size version to the full-size image.

I've gone ahead and used the medium (m) version for that post to reduce the size of the retina-resolution iPhone screenshots, linking each to the full-resolution version.

For completeness sake, the letters stand for:

s: small   square     90×90   (forced)
b: big     square     160×160 (forced)
t: small   thumbnail  160×160
m: medium  thumbnail  320×320
l: large   thumbnail  640×640
h: huge    thumbnail  1024×1024

The square options will scale the image (up as well as down) and crop to fit the size, thumbnails are only ever scaled down (smaller images are not scaled up) to fit with the square maximum dimensions.

NOTE: Resizing only preserves the first frame of an animated GIF image. If you need to resize an animation, use HTML markup instead (i.e. use <img>).

WARNING: Imgur seems to have consistency issues with generating the different sizes of images, where not all suffixes give you a resized image; and are instead served the original image. I don't know what causes this to happen or what a work-around might be.

Add a ?s=X query string to the URL for some square sizes

You can add a query string to the URL to specify some specific sizes. The available sizes are dimensions that are the powers of two from 16 up to 512 (i.e. X can be 16, 32, 64, 128, 256 and 512).

Using this method will produce a square image. The image may be cropped and/or resized without preserving the image's aspect ratio.

Example (with link to full sized image):

[![enter image description here][1]][2]

  [1]: https://i.sstatic.net/a9LCg.jpg?s=256
  [2]: https://i.sstatic.net/a9LCg.jpg

Use an <img> tag to specify exact dimensions

If you want to specify other sizes, you can use an <img> tag. The full image will be downloaded and scaled by the user's browser to fit the specified width and/or height.

<img src="https://i.sstatic.net/a9LCg.jpg" width="400" />

The width attribute tells the browser to constrain the size, the height is scaled along automatically.

When using an <img> tag, any attributes must be specified in the following order or the image will not be displayed: src, width, height, alt, title. The values for the width and height attributes can be up to 999.

7
  • 2
    @MartijnPieters Can you please tell how to align it center Commented May 3, 2014 at 12:16
  • 2
    @SVM-RAJESH: you cannot; there are no alignment options. Commented May 3, 2014 at 12:16
  • 2
    @SVM-RAJESH: On sites using MathJax, you can offset an image by XX pixels by inserting $\hspace{XXpx}$ before it. On other sites like SO, though, the closest you can get is something like &nbsp; &nbsp; &nbsp; ..., and the offset that produces can vary widely depending on the fonts available to the viewer, as well as other settings, so you shouldn't really rely on it. Commented May 4, 2014 at 0:36
  • 2
    Is it possible that there has been changes for the image resizing? Currently neither medium nor large do have any affect on an image of size 720x1280.
    – Robert
    Commented Aug 18, 2018 at 12:31
  • @Robert: imgur's implementation his having issues with different sizes at different times. No idea what causes this or what the work-arounds might be. Today it's the t size that's not working, for example.
    – Martijn Pieters Mod
    Commented Apr 13, 2019 at 15:26
  • Apparently Stackoverflow for Teams doesn't support all the same methods described... frustrating.
    – sytech
    Commented Aug 18, 2023 at 18:36
  • Please add the src width height alt title to the Markdown instructions page, i.e. sharepoint.stackexchange.com/editing-help . I spent hours going in circles wondering why my image was invisible before finding this.
    – mm201
    Commented Jan 15 at 15:09
71

You can use the HTML <img> tag, instead of [enter image description here][1]. To do that, copy and paste this:

<img src="" width="" height="">

Then put the URL of the picture in the src attribute, and the desired width and height in their respective attributes. At the end, it looks like this:

<img src="www.com/.png" width="256" height="1337">

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

2
  • 16
    Note that this only reduces the display size of the image; it does nothing to reduce the time or bandwidth required to load it. Commented May 4, 2014 at 0:30
  • 13
    On the plus side, that bandwidth is not necessarily wasted if the image is shrunk by ~200%: retina displays will show the image non-blurry if you inserted a large one and specified a smaller width or height in the img tag. This seems to be the only way of inserting retina-friendly images on SO, not that it matters that much for this type of content. Commented Nov 29, 2014 at 20:33

You must log in to answer this question.

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