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 the preserves the first frame of an animated GIF image. If you need to resize an animation, use HTML markup instead (i.e. use <img>
).
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, the 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.