What's the recommended syntax for an image with a link?

Question

What's the recommended syntax for an image with a hyperlink? I tried doing it with the markdown toolbar buttons and the image and link buttons conflict with each other, so I had to resort to HTML.

For example, to do this:

These work properly:

<a href="https://meta.stackoverflow.com/users/44330/jason-s">![alt text][1]</a>
[1]: https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07

<a href="https://meta.stackoverflow.com/users/44330/jason-s">
   <img src="https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07">
</a>

[<img src="https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07">][2]
[2]: https://meta.stackoverflow.com/users/44330/jason-s

This does not:

<a href='https://meta.stackoverflow.com/users/44330/jason-s'>![alt text][1]</a>

(single quotes not allowed?)

Is there a way to do the same thing in Markdown without having to resort to HTML?

Return to FAQ index

Answer 1

It is possible to use Markdown for both the image and the link. You have to do it manually because the the toolbar's default behavior is to make the clickable image point to the URL of the image itself.

---

Reference-style

[![alt text][image]][hyperlink]

[hyperlink]: https://meta.stackoverflow.com/users/44330/jason-s
[image]:
https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07
(tooltip)
  – or –
[image]:
https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07
"tooltip"

Example

Default behavior, reference-style

Since July 2015 the insert image feature (Ctrl + G) of the toolbar of the Stack Exchange Markdown editor by default adds a clickable link to the image itself. ¹

It uses the following syntax:

[![enter image description here][number]][number]

where number is an automatically generated number.

Default example, reference-style

[![Jason's avatar][1]][1]

[1]: https://i.stack.imgur.com/X14m7.png
"Tooltip for Jason's avatar"

To change the link to something else, simply change the second [number] with (*your URL here*) (in parentheses) or use the reference style syntax above.

---

Inline-style

[![alt text](image "tooltip")](hyperlink)
  for example:
[![invisible description of images, read aloud to blind users
](https://i.stack.imgur.com/X14m7.png
"Let's check Jason S' profile page (inline-style)")
](https://meta.stackoverflow.com/users/44330/jason-s)

Default behavior, inline-style

You can get the default behavior without using the [number] construct.

[![A click on the image links to its own URL.](
https://i.stack.imgur.com/X14m7.png
"A click on the image links to its own URL (inline-style).")
](https://i.stack.imgur.com/X14m7.png)

The observant reader will notice that to achieve the inline-style default behavior, the URL to the image must be supplied twice. The first link is there to display the image, the second link makes the image clickable.

---

References:

• From 2015, the image uploader automatically wraps images in a link to themselves
• FAQ for Stack Exchange sites | Editing and Formatting
• Extra square brackets and numbers when using automated link
• Why does the images index on Stack Overflow appear twice?

---

¹ The previous default behavior was to just display the image - without any link at all. ~ * ~ Even the new default behavior does not add any tooltip for you. – If you want a tooltip, you have to add it yourself.

Answer 2

For numerically indexed URLs, just make a new numbered URL.

For example, when you insert an image with the fancy editor, it starts off linking to itself. In HTML terms, the a.href link URL is the same as img.src image URL.

[![alt text][1]][1]

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

Just add a new URL for the link:

[![alt text][1]][2]

[1]: https://i.stack.imgur.com/wPW28.png
[2]: https://www.timeanddate.com/astronomy/moon/light.html?month=3&day=20&year=2040&hour=19&min=00&sec=0&n=64&ntxt=Chicago&earth=0

The result:

So (http://example.com) can be replaced with [42] ... [42]: http://example.com