4
$\begingroup$

So when I add an image, this shows up:

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

This also shows up:

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

I was wondering why there is two of "[1]" in the first quote. I get that one of them is probably showing which link in the second one to use, but which one is it? Also, what is the purpose of the other one?

Thanks.

$\endgroup$
2

2 Answers 2

Reset to default
9
$\begingroup$

As an illustration, I have used the picture from the Wikipedia article "Harmonic series (mathematics)" which is at this URL: https://i.stack.imgur.com/Zxtnn.png

Basic information about the syntax for images is explained in the editing help. In this context, having a look at the part concerning links might be useful, too. (Very briefly, one could say that the syntax for images and links is a bit similar - but the images contain an additional exclamation mark.)

If you only add "the inner part" ![description][1], this creates an image. (Using the image in the link [1] and the text "description" as alt-text. Of course, it is better to choose something more descriptive - the text "description" is just for illustration purposes.)

You can obtain exactly the same using ![description](https://i.stack.imgur.com/Zxtnn.png) if you prefer. Notice that this creates image which isn't a link - nothing happens after clicking on the image:

description

The way images are entered through the editor, image becomes a link. Which is basically the same thing as what you would get from [link][1] or [link](https://i.stack.imgur.com/Zxtnn.png): link or link. (The help center calls these two styles of linking "a reference-style link" and "an inline link".) But now, instead of "clickable text" with a link to the given URL, you can obtain an image which links to the given URL: [![description][1]][1].

description

In some situations you might consider preferable to make a picture linking to a different URL. (But I suppose this won't happen too often.) A possible syntax could be: [![description](https://i.stack.imgur.com/Zxtnn.png)](https://en.wikipedia.org/wiki/Harmonic_series_(mathematics)). Now by clicking on the picture you go to the Wikipedia article:

description

Alternative, you could use a "reference-style" link instead of an inline link shown in the above example. One example of such usage is in this answer - where a screenshot of a chat message is actually a link to that message.

$\endgroup$
6
  • $\begingroup$ This is a great answer. $\endgroup$
    – GEdgar
    Oct 25, 2022 at 8:06
  • 1
    $\begingroup$ Fantastic answer. But, if like me your eyes started to swim and you ended up thinking that one couldn't create a link with the display text "image", it's the leading exclamation point "!" that makes the difference between an image element and a link element. (I found it hard to notice among all the parens and brackets, which is why I'm not a LISP programmer.) $\endgroup$
    – JonathanZ
    Oct 25, 2022 at 14:11
  • 1
    $\begingroup$ @JonathanZsupportsMonicaC I have changed alt-text to "description". (I did not want to put there something too long - but you're right that "image" was probably not the best option.) $\endgroup$
    – Martin Sleziak
    Oct 25, 2022 at 14:43
  • 1
    $\begingroup$ @MartinSleziak - Thanks. I confess that any time I have to do a link in Markdown I get irritated, because which part should be surrounded by ( ) and which [ ] is something I always get wrong, even when I try to consciously compensate for the the fact that I always get it wrong. So amid the forest of () and [] I completely missed the !. Hopefully others cope better. ;-) $\endgroup$
    – JonathanZ
    Oct 25, 2022 at 15:52
  • 2
    $\begingroup$ @JonathanZsupportsMonicaC perhaps a silly mnemonic, I think of passing a link x to a function [f] to create [f](x), a hyperlinked version of f $\endgroup$
    – Calvin Khor
    Oct 25, 2022 at 16:03
  • 1
    $\begingroup$ I will freely admit that I certainly use parenthesis too much - that's a thing that has been pointed out before. But it's not that easy to get rid of this habit. $\endgroup$
    – Martin Sleziak
    Oct 25, 2022 at 16:05
4
$\begingroup$

I use the two "[n]" things to display a small version of the image while making the original larger version easily available. For example I import a big image this one, shrunk to just under 2 MB on my laptop) and first get this:

[![enter image description here][1]][1]
  [1]: https://i.stack.imgur.com/2DTfT.jpg

Then I do this:

[![enter image description here][2]][1]
  [1]: https://i.stack.imgur.com/2DTfT.jpg
  [2]: https://i.stack.imgur.com/2DTfTm.jpg

and then add "click for full size". This way the page loads quickly and some folks who are using a mobile device and on a fixed data (not unlimited data) plan don't write angry messages about load time or cost.

Actually I usually do this (inline links) because it makes block quoting a section of one post into a future post via simple copy/paste much easier:

[![enter image description here](https://i.stack.imgur.com/2DTfTm.jpg)](https://i.stack.imgur.com/2DTfT.jpg)

references:

enter image description here (click for larger)

$\endgroup$

You must log in to answer this question.

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