What is the correct way to insert images to Stack Exchange posts?

Question

The default code to insert images into Stack Exchange is:

[![example image][1]][1]

  [1]: image-url

This creates an image link of the provided image, like:

But if you change the code to the following, you get a normal image which is not an image link.

![example image][1]

  [1]: image-url

Example:

So, what is the better way to insert images, and why do Stack Exchange sites insert image links instead of normal images?

Answer 1

There is no single correct way.

The one you mentioned is a good one and it's used most often (since the image uploader) produces it, but format used by the new editor is different:

[![enter image description here](image-url)](image-url)

Both methods have their advantages: the one you mentioned keeps all links organized in a nice 'table' at the bottom of the post (or paragraph) and you don't have to include the same link twice. On the other hand, for users not familiar with programming or copy editing on the Internet, it might be confusing: how does the system know which image to display? When you're writing an e-mail or a Word document, all (visible) information about the image is exactly where it appears in the post.

The advantage of using a link is mainly when it comes to large images. They can be clicked and zoomed (which is especially useful for mobile users). Also, it's possible to use a smaller version of the image in the post itself, so that it takes less time to load and doesn't take too much space.

Here is how the text in your post would look to do this (notice that the "1" link has m before the ".jpg" and the "1a" link doesn't. Adding text in quotes after a link will display the text in a tooltip when a mouse hovers over the link instead of clicking it.

[![Small image with a link to a larger image][1]][1a]

  [1]: https://i.stack.imgur.com/X6pf9m.jpg
  [1a]: https://i.stack.imgur.com/X6pf9.jpg "click for the full-size image"

When done right, it saves a lot of scrolling.