## 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`](http://api.imgur.com/models/image#thumbs) to the filename in the URL (before the extension) to get resized versions.

For that post, for example, you can use<br/> `https://i.sstatic.net/a9LCgl.jpg` instead of<br/> `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](https://meta.stackexchange.com/questions/25051/resizing-an-image-in-a-post/296138#296138) 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`.

<!-- language: lang-html -->

    <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](https://meta.stackexchange.com/questions/1777/what-html-tags-are-allowed-on-stack-exchange-sites) 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.