How to create image thumbnails?

Question

When I upload images to SU it's usually to showcase some error message or some dialog box. However, most of the time, the uploaded images are just too big. Especially when I write answers with step-by-step instructions with numbered list formatting. Large images tend to break the list formatting, and the overview of the list is lost.

Problem #1

Here's a numbered instructions list with associated screenshot image added at the end of the lines.

1. Click Start menu button.
2. Click on Control Panel.
3. Double-click on Network Connections.
4. Right-click on Local Area Connection and click Properties.
5. Double-click on Internet Protocol (TCP/IP), or select it and click Properties.
6. Click on Use the following IP address and type in the following. IP address 192.168.120.115, Subnet mask 255.255.255.0, Default gateway 192.168.120.1. Leave the DNS fields empty.
7. Click OK, OK to save changes and close the dialog boxes.

The code used here is:

 1. Click Start menu button.
 2. Click on **Control Panel**.
 3. Double-click on **Network Connections**. ![screen1][1]
 4. Right-click on **Local Area Connection** and click **Properties**. ![screen2][2]
 5. Double-click on **Internet Protocol (TCP/IP)**, or select it and click
    **Properties**. ![screen3][3]
 6. Click on **Use the following IP address** and type in the following. IP
    address 192.168.120.115, Subnet mask 255.255.255.0, Default gateway
    192.168.120.1. Leave the DNS fields empty. ![screen4][4]
 7. Click **OK**, **OK** to save changes and close the dialog boxes.

How do I make these images smaller? I can obviously re-size them to make them smaller before uploading. But is there a way to make them smaller after upload?

Problem #2

What I like to do when making a numbered list with instructions is to place the screenshots at the bottom. Sort of like attached image files as seen on some web forums. I can then refer to them in the instruction should I need to.

1. Click Start menu button.
2. Click on Control Panel.
3. Double-click on Network Connections.
4. Right-click on Local Area Connection and click Properties.
5. Double-click on Internet Protocol (TCP/IP), or select it and click Properties.
6. Click on Use the following IP address and type in the following. IP address 192.168.120.115, Subnet mask 255.255.255.0, Default gateway 192.168.120.1. Leave the DNS fields empty.
7. Click OK, OK to save changes and close the dialog boxes.

Screenshots

The code used here is:

 1. Click Start menu button.
 2. Click on **Control Panel**.
 3. Double-click on **Network Connections**.
 4. Right-click on **Local Area Connection** and click **Properties**.
 5. Double-click on **Internet Protocol (TCP/IP)**, or select it and click
    **Properties**.
 6. Click on **Use the following IP address** and type in the following. IP
    address 192.168.120.115, Subnet mask 255.255.255.0, Default gateway
    192.168.120.1. Leave the DNS fields empty.
 7. Click **OK**, **OK** to save changes and close the dialog boxes.

**Screenshots**

![screen1][1]
![screen2][2]
![screen3][3]
![screen4][4]

This looks a little bit better. It gives me a nice overview of the step-by-step instructions. But the screenshot images are still too big. I could re-size them and make them smaller before uploading. But I still want people to be able to see a large view of the images should they need to. So how can I create small thumbnail versions of these images?

Answer 1

Just add s for small, m for medium or l for large onto the end of the code in your imgur url. For example:

https://i.sstatic.net/ukClYs.png

https://i.sstatic.net/ukClYm.png

https://i.sstatic.net/ukClYl.png

You can then link the image to the full-size image so when it's clicked on it goes to the original URL.

Answer 2

Solution #3

Yet another way to create image thumbnails, and perhaps the most comprehensive way there is, and that allow you to control the size of the thumbnails is by using the img HTML tag.

The code for this looks like this:

[<img src="https://i.sstatic.net/humpn.png" height="150">][1]
[<img src="https://i.sstatic.net/Q1dJ6.png" height="150">][2]
[<img src="https://i.sstatic.net/POIZs.png" height="150">][3]
[<img src="https://i.sstatic.net/ukClY.png" height="150">][4]

  [1]: https://i.sstatic.net/humpn.png
  [2]: https://i.sstatic.net/Q1dJ6.png
  [3]: https://i.sstatic.net/POIZs.png
  [4]: https://i.sstatic.net/ukClY.png

This is a mix of HTML and Markdown. The key here is to use the attribute height to specify the height for each image (in pixels), thus making them all equally high. Don't use the suffix px like height="150px" as this will break the HTML code. Use height="150" instead. Other attributes of the img tag such as width can be omitted.

More code examples:

This is just another way of getting the same result:

[<img src="https://i.sstatic.net/humpn.png" height="150">](https://i.sstatic.net/humpn.png)
[<img src="https://i.sstatic.net/Q1dJ6.png" height="150">](https://i.sstatic.net/Q1dJ6.png)
[<img src="https://i.sstatic.net/POIZs.png" height="150">](https://i.sstatic.net/POIZs.png)
[<img src="https://i.sstatic.net/ukClY.png" height="150">](https://i.sstatic.net/ukClY.png)

This way you don't need to type the links at the bottom. This is in-line Markdown linking.

You can also use the a (anchor) HTML tag if you want to. That would look like this:

<a href="https://i.sstatic.net/humpn.png"><img src="https://i.sstatic.net/humpn.png" height="150"></a>
<a href="https://i.sstatic.net/Q1dJ6.png"><img src="https://i.sstatic.net/Q1dJ6.png" height="150"></a>
<a href="https://i.sstatic.net/POIZs.png"><img src="https://i.sstatic.net/POIZs.png" height="150"></a>
<a href="https://i.sstatic.net/ukClY.png"><img src="https://i.sstatic.net/ukClY.png" height="150"></a>

This method uses only HTML tags.

Answer 3

Solution #2.2 and #4.2

I thought I would just expand a little on the previously posted solution number 2 and 4 here to sum it all up. There are six thumbnail sizes you can use with images uploaded to the Imgur service. Each one is accessable by appending a single character suffix to the end of the image ID, and before the file extension. The thumbnails are as follows.

Thumbnail suffix   Thumbnail name   Thumbnail size   Keeps image proportions

s                  Small square     90x90            No
b                  Big square       160x160          No
t                  Small thumbnail  160x160          Yes
m                  Medium thumbnail 320x320          Yes
l                  Large thumbnail  640x640          Yes
h                  Huge thumbnail   1024x1024        Yes

To give some code examples, this is what it might look like in the editor. This is actually yet another way to link those thumbnails with the full-size versions of each image. This is Markdown in-line linking. I have padded out the image names with underscores to have the URLs all align vertically so you can more easily observe the difference between each line.

[![small_square____](https://i.sstatic.net/ukClYs.png)](https://i.sstatic.net/ukClY.png)
[![big_square______](https://i.sstatic.net/ukClYb.png)](https://i.sstatic.net/ukClY.png)
[![small_thumbnail_](https://i.sstatic.net/ukClYt.png)](https://i.sstatic.net/ukClY.png)
[![medium_thumbnail](https://i.sstatic.net/ukClYm.png)](https://i.sstatic.net/ukClY.png)
[![large_thumbnail_](https://i.sstatic.net/ukClYl.png)](https://i.sstatic.net/ukClY.png)
[![large_thumbnail_](https://i.sstatic.net/ukClYh.png)](https://i.sstatic.net/ukClY.png)

Go ahead, try them out if you like. I recommend experimenting a little with linking images in the sandbox if you are not sure how to do that and that you read the formatting help.

I prefer the non-proportional "squares" (s and b). They meet my criteria for height control, e.g. allowing all thumbnails to have the same height, but without having them squashed from maybe a 2:1 width to height ration down to a perfect 1:1 square (e.g. 320x320).

You don't really want to keep the proportions anyway when the thumbnail is going to be made into a square. Instead, the new thumbnail is a zoomed-in version of the original image. So if you are making a big image into a thumbnail, it will only show a section of it as thumbnail (e.g. it crops it down to right size instead of resizing). This has the effect that the thumbnail image looks sharper, as opposed to the other options which make the thumbnail image appear blurry.

Answer 4

Solution #2

Another way to create thumbnails is to append the letter m at the end of the file name for a given URL, but before the file extension. So you would upload your images, note down the URL and add the m letter for each image you want a small thumbnail version of.

It would look something like this:

Uploaded images:

  [1]: https://i.sstatic.net/image_01.png
  [2]: https://i.sstatic.net/image_02.png
  [3]: https://i.sstatic.net/image_03.png
  [4]: https://i.sstatic.net/image_04.png

To make a thumbnail version of these, just add the letter m at the end.

Like this:
https://i.sstatic.net/image_01m.png
https://i.sstatic.net/image_02m.png
https://i.sstatic.net/image_03m.png
https://i.sstatic.net/image_04m.png

You can now link them to each other. See previous solution.

The only problem here is that the low-res thumbnail versions will most likely have varying height if you have uploaded several images with varying size. So it won't look very nice when you line them up.

Here is what it can look like:

Code input:

  [![screen1][2]][1]
  [![screen1][4]][3]
  [![screen1][6]][5]
  [![screen1][8]][7]

  [1]: https://i.sstatic.net/humpn.png
  [2]: https://i.sstatic.net/humpnm.png
  [3]: https://i.sstatic.net/Q1dJ6.png
  [4]: https://i.sstatic.net/Q1dJ6m.png
  [5]: https://i.sstatic.net/POIZs.png
  [6]: https://i.sstatic.net/POIZsm.png
  [7]: https://i.sstatic.net/ukClY.png
  [8]: https://i.sstatic.net/ukClYm.png

Output:

Note how the m thumbnails are quite big, still. Unfortunately there appears to be no way to control how big these thumbnails will be. I believe this is pre-defined by the Imgur hosting service. Also, note how some images are higher than the others. How do you create image thumbnails with equal height?

Answer 5

Solution #1

One way to create thumbnails is to have two sets of image files. One set would be high-res images, and the second set would be low-res images. So you would essentially take your screenshots, and then process them, i.e. re-size them. (You can use a program like IrfanView to batch re-size all of them at once, as opposed to opening each image in an image editor such as Microsoft Paint, re-sizing it and then saving it with a new name.)

File              Resolution
----------------------------
image_01.png      800x500
image_01_low.png  240x150
image_02.png      800x500
image_02_low.png  240x150
image_03.png      800x500
image_03_low.png  240x150
image_04.png      800x500
image_04_low.png  240x150

You can then make only the low-res images appear on the page, and link them to the high-res versions.

The code will look something like this:

    [![screen1][2]][1]
    [![screen2][4]][3]
    [![screen3][6]][5]
    [![screen4][8]][7]

  [1]: https://i.sstatic.net/image_01.png
  [2]: https://i.sstatic.net/image_01_low.png
  [3]: https://i.sstatic.net/image_02.png
  [4]: https://i.sstatic.net/image_02_low.png
  [5]: https://i.sstatic.net/image_03.png
  [6]: https://i.sstatic.net/image_03_low.png
  [7]: https://i.sstatic.net/image_04.png
  [8]: https://i.sstatic.net/image_04_low.png

This requires that you have two sets of images, so it requires additional image processing and that takes time. It also means more data traffic and it requires additional space on the image hosting servers.