Two ways of adding images? What is the difference?

Question

The insert image button works like this:

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

  [1]: https://i.stack.imgur.com/zVL6w.png

Display:

But this shorter code does the same thing (I couldn't spot a difference):

![enter image description here][1]

  [1]: https://i.stack.imgur.com/zVL6w.png

Display:

---

Is there any difference between the two ways?

The second way is shorter in text and indirectly saves some storage of this website. So why isn't it the default way of inserting images?

While editing such posts, I hardly see someone who puts image description. In such cases, this one works too:

![][1]

Answer 1

In addition to being able to click on the upper link to open the image, which is not possible with the lower one, it is also possible to edit the upper link to display a thumbnail for larger images, thus:

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


  [1]: https://i.stack.imgur.com/S77Ux.png
  [2]: https://i.stack.imgur.com/S77Uxt.png

which renders as:

(Click the thumbnail for the original)

---

Other options for thumbnails can be found on the Imgur API page

Answer 2

What Journeyman Geek says is correct. One situation where this matters in particular is large images:

• A picture is automatically resized horizontally if it's too wide. If it would be desirable to see more details, you can use the [![enter image description here][1]][1] syntax and add a legend 'click the image to see more details'.

• A picture is not automatically resized vertically. To prevent images (hosted on imgur) from taking too much space, you can add a size modifier before the extension, e.g. /zVL6w.png becomes /zVL6wm.png. You can easily modify the automatically inserted text to something like

  [![enter image description here][1]][1a]
  
  [1]: https://i.stack.imgur.com/zVL6wm.png
  [1a]: https://i.stack.imgur.com/zVL6w.png
  

  (depending on the image, the l modifier might be better)

Answer 3

You can click on the one on top and open the image, not the one at the bottom.

In some cases, the former may be more desirable.

Answer 4

There is a third (and fourth) way of adding images where you don't use a number reference.

Third way:

![enter image description here](https://i.stack.imgur.com/zVL6w.png)

Fourth way (with click target):

[![enter image description here](https://i.stack.imgur.com/zVL6w.png)](https://i.stack.imgur.com/zVL6w.png)

Additional note

Just wanted to make a note about this part of your post:

While editing such posts, I hardly see someone who puts image description. In such cases, this one works too:

![][1]

While it works, I try to make it a habit of putting a descriptive text to accompany the image. This text is used for the alt attribute of the image in HTML. This is used in case the image fails to load (gets removed or blocked, etc) so people know what it was supposed to be. It is also useful to people with disabilities (blindness) as screen readers will read the alt text aloud.