Image syntax

[John Gruber]

Michel Fortin <michel.fortin at michelf.com> wrote on 07/23/05 at 9:05 am:


> > Use standard Markdown syntax: an image as the text of a link tag.

> >

> >     [![alt text](thumbnail.jpg)](big_image.png)

> >

> > That’s it.

> 

> But I don't think I have to point out that the current syntax is hard 

> to figure out.


Agreed. In fact, I've been thinking that the syntax for regular
images is the worst part of Markdown 1.0 -- let alone how
complicated it gets if you try to wrap an image with a link.

I mean, look at this:

    ![Screenshot of the Weather widget, after typing ‘Vancouver’.](http://daringfireball.net/misc/2005/07/vancouver-weather-1.png)

That looks like crap to me. What's the point of the '!', for
example? That alone seems to violate the spirit of Markdown, that
the syntax elements should look like what they represent. Bullet
items look like bullets, for example. How does an exclamation mark
look like an image? It sort of looks like an upside down letter 'i',
but so what?

And I now think that putting the URL to image itself last was a
mistake. Images aren't like links, and I no longer understand why I
thought their Markdown syntaxes should be so similar.

I don't think I ever released this feature, but a while back I added the option to put a return between the [] and () inside an image, so you could rewrite the above as:

    ![Screenshot of the Weather widget, after typing ‘Vancouver’.]
    (http://daringfireball.net/misc/2005/07/vancouver-weather-1.png)

But to me that still doesn't look like an image, nor does it look good.

In fact, in my own writing, I've been using HTML img tags for months:

    <img
        src='http://daringfireball.net/misc/2005/07/vancouver-weather-1.png'
        alt='Screenshot of the Weather widget, after typing ‘Vancouver’.'
    />

So I'm thinking we should take a step back and completely rethink
the syntax for including images.

Based on an idea from Brad Choate, I'm thinking something like this:

    http://daringfireball.net/misc/2005/07/vancouver-weather-1.png
    Screenshot of the Weather widget, after typing ‘Vancouver’.

No special punctuation at all. Just a URL pointing to an image,
followed by an alt text description on the next line.

The assumption here is that image URLs end with something like .png,
.gif, .jpg, etc. It'd be easy to match those URLs. We could further
specify that URLs need to begin with "http" or "/".

This syntax would only work for images that stand alone, e.g. which
aren't inline in the middle of a paragraph of text.

Another idea would be to do something similar to <url> autolinking:

    <http://daringfireball.net/misc/2005/07/vancouver-weather-1.png>
    (Screenshot of the Weather widget, after typing ‘Vancouver’.)

These ideas look much more like how I would reference an image in a
plain text email message or text document.

The latter syntax: <img>(alt) could also be used within a paragraph.

Then to make it a link:

    [<http://daringfireball.net/misc/2005/07/vancouver-weather-1.png>
    (Screenshot of the Weather widget, after typing ‘Vancouver’.)][1]

Which is still a lot of punctuation, but it seems more memorable to me.

-J.G.