4

Some one just did me a service and resized a screen shot for me. Is there an easy way to do that without running things through a photo editor? I'm not an HTML wiz, but, I assume there is an HTML way to do it . . .

I don't have a problem with using Lightroom or Photoshop, but sometimes it's just a quick one-off answer, and I don't want to bother with them.

| |
6

Sure there is. If you upload a large image to imgur (the default image uploading service used by Stack Exchange), just stick a letter (l, m, s) behind the URL of the image you just uploaded. For instance, I have a large image here:

http://i.stack.imgur.com/2Kb1g.jpg (Original)

http://i.stack.imgur.com/2Kb1gl.jpg (Large)

http://i.stack.imgur.com/2Kb1gm.jpg (Medium)

http://i.stack.imgur.com/2Kb1gs.jpg (Small)

You can also use HTML magic for this, if you want to specify an exact size, but remember that unlike using the method above, the image is only resized on the client side, which means the full sized image will still be downloaded. Use the following tag (attributes must be in the exact order):

<img src="http://i.stack.imgur.com/2Kb1g.jpg" width="200" height="100" />

| |
  • Thanks for the Pony-laden answer! :D – David M Jan 4 '14 at 1:54
  • -1 too many ponies (but +1 for good answer) – shanodin Jan 6 '14 at 22:56
4

See the MSO post, "Thumbnail image on Stack Overflow".

Quoting lunboks' answer there:

Images embedded in your post are already displayed to be 630 pixels wide on the regular site, or 90% on the mobile site, to fit the page layout. If that's not enough, or if you want to reduce the download file size too, you have a couple options:

  • Use the HTML syntax for embedding images, which allows for height and width parameters. The scaling is done by the browser, and the whole image is still downloaded.
  • Create the thumbnail yourself using the image manipulation tool of your choice.
  • Invoke imgur's black magic to create the thumbnails for you.

imgur's thumbnail feature

If you uploaded your image via the editor's upload function, you can let imgur do the work for you. (If they reside on your own imgur account, this will still work, but you really should use the branded upload.)

You do this by appending l, m or s to the image code.

Consider this cat. It is too big to fit the page, and its URL is http://i.stack.imgur.com/mZCux.jpg. With the thumbnail feature, we can do this:

Notes

  • Thumbnails will always be JPEGs, so if the original image isn't, you should change the file extension as well.
  • l and m have no effect if the image is already less than 640 and 320 pixels wide, respectively.
  • s will force the image to be a 90×90 square, downscaling/upscaling and cropping it in the process if necessary.

| |
2

It looks like @AnnaLear linked to the thumbnail sized version stored on the imgur servers. This is done by adding an "m" to the end of the stored image name (before the extension). I have since edited the answer to show the full image when clicked by linking to the original, something I often do for larger images. Checking with some of my images, this seems to work for every large image uploaded with the SE image uploader.

| |

You must log in to answer this question.

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