Inconsistent support for PNG image

[bvaughn]

While working on the gatsby branch of facebook/react I noticed an unexpected behavior with regard to how Gatsby handles different image types within markdown files.

This may be caused by something upstream (haven't dug into it yet) but the docs made no mention of this limitation that I saw so I wanted to file it.

• This works

<img src="../path/to/image.gif" alt="Some title"> 

• This does not work (the image will fail to load at runtime)

<img src="../path/to/image.png" alt="Some title"> 

• This works

![Some title](../path/to/image.png)

Another difference is that eg .gif and .jpg image types output regular HTML image tags, eg:

![Some title](../path/to/image.gif)

...becomes...

<img src="/b967396662319e6aa6170dab232f0286.gif" alt="...">

But .png images output "responsive" image anchor tags, eg:

![Some title](../path/to/image.png)

...becomes...

<a class="gatsby-resp-image-link" href="undefined" style="display: block" target="_blank" rel="noopener">
  <span class="gatsby-resp-image-wrapper" style="position: relative; z-index: -1; display: block; ">
    <span class="gatsby-resp-image-background-image" style="...">
      <img class="gatsby-resp-image-image" style="...">
    </span>
  </span>
</a>

[bvaughn]

This looks at least related to #1138.

Although I've updated to the latest releases of Gatsby (and plugins) and I'm still seeing PNG image types treated differently than eg .jpg and .gif.

[KyleAMathews]

Hmmm @chiedo worked on adding support for tags. Wonder why that's not working.

We don't generate responsive markup for gifs as there's not an easy way afaik to resize gifs so they just get copied over.

[bvaughn]

Would be great to be able to embed PNGs via <img> tags since the existing React blog posts so heavily make use of this syntax.

There's also some weird nested syntax (eg in files like this) that isn't compatible with the markdown flavor of image tags:

Rendered markup on the server:

[](http://www.phpied.com/server-side-react-with-php-part-2/)

Not sure yet what the workaround for this would be, without manually editing a bunch of old files to an as-of-yet unknown markup.

[chiedo]

Kyle's right @bvaughn

Open to any suggestions/pull requests to improve!

I only write posts in markdown if they're VERY simple otherwise, I'll do the whole thing in HTML so if you find more cases where markdown is having issues and could help fix, that would be awesome!

Most of the crazy logic should be taken care of already. The code should be pretty easy to follow. I tried to write good comments.

[bvaughn]

Cool. So just to confirm, it sounds like the fact that <img> tags don't work at all with PNGs is not a known/expected issue then? I'll see if I can find some time to look into it and submit a PR.

[KyleAMathews]

Yup! Just add a failing test and fix the bug! https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-images/src/__tests__/index.js

[chiedo]

Also, I just realized, I haven't been using gatsby-remark-images any more and am using this version of gatsby-copy-linked-files. Can't get it to build on the gatsby site for whatever reason but it's working in all my codebases.

#1571

So it's possible the fix for that problem is already fixed and you'll just be able to port it!

[bvaughn]

Sorry, I was writing up my thoughts as I went along and didn't mean to actually submit them yet, let alone to close the issue. (Misclicked.)

[KyleAMathews]

Hey, closing out old issues. Please re-open if you have additional questions, thanks!