# Convert markdown image tag to a \<picture\> tag in final build

**URL:** <https://discourse.gohugo.io/t/convert-markdown-image-tag-to-a-picture-tag-in-final-build/34784>\
**Category:** Uncategorized\
**Created:** [September 19, 2021, 3:32pm UTC](https://discourse.gohugo.io/t/convert-markdown-image-tag-to-a-picture-tag-in-final-build/34784 "2021-09-19T15:32:05Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![justshipit](https://avatars.discourse-cdn.com/v4/letter/j/e56c9b/32.png) [@justshipit](https://discourse.gohugo.io/u/justshipit)\
**Post date:** [September 19, 2021, 3:32pm UTC](https://discourse.gohugo.io/t/convert-markdown-image-tag-to-a-picture-tag-in-final-build/34784/1 "2021-09-19T15:32:05Z")

</div>

Currently, I am using a custom shortcode for images - the reason for that is because my CDN provider allows me to serve different image formats by manipulating the file extension, i.e. I upload `.png` but I can also serve `.webp` in frontend just by changing the file extension.

But that also means I can’t simply drag&drop to my Hugo’s WYSIWYG editor an image to turn in into a default markdown image tag `![my cool image](image url)`.

The problem is, adding manually a shortcode and then populating it with a title/url is pretty painful and time-consuming. And sometimes I need to do that for 20-30 images in one article.

I would prefer to just drag&drop my image to my WYSIWYG editor which will automatically convert to a standard markdown image tag (`![my cool image](image src url)`) and then have the Hugo build out of it the full `<picture>` tag, like this:

my image tag in markdown:

```auto
![my cool image](https://cdn.mywebsite.com/path/to/my/image.png)

```

Hugo then, upon site build, instead of just spitting this in final build:

```auto
<img src="https://cdn.mywebsite.com/path/to/my/image.png" title="my cool image">

```

is building this instead:

```auto
<picture class="someclass" style="display: block; min-height: 1rem" data-iesrc="https://mycdn.com/path/to/my/image.png" data-alt="my cool image"">
    <source srcset="https://cdn.mywebsite.com/path/to/my/image.webp" type="image/webp">
    <source srcset="https://cdn.mywebsite.com/path/to/my/image.png" type="image/png">
    <noscript><img src="https://cdn.mywebsite.com/path/to/my/image.png" alt="my cool image"></noscript>
</picture>

```

So few things would need to happen here - Hugo would need to:

1. detect markdown image tag
2. replace the file format at the end of the image file url from `.png` to `.webp`
3. correctly populate all the data in ` tag.

How can I achieve it?

---

<div class="post-metadata">

**Author:** ![cshoredaniel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/cshoredaniel/32/19684_2.png) [@cshoredaniel](https://discourse.gohugo.io/u/cshoredaniel)\
**Post date:** [September 19, 2021, 3:44pm UTC](https://discourse.gohugo.io/t/convert-markdown-image-tag-to-a-picture-tag-in-final-build/34784/2 "2021-09-19T15:44:05Z")

</div>

I think what you want is Hugo’s `render-image` render-hook feature ([Markdown Render Hooks in the docs](https://gohugo.io/getting-started/configuration-markup/#markdown-render-hooks)).

You can see an example I have created for a [(work in progress) responsive images hook on this forum](https://discourse.gohugo.io/t/work-in-progress-markdown-responsive-images-including-figure-shortcode/34765)

You will obviously also need to use [replace](https://gohugo.io/functions/replace) or [replaceRE](https://gohugo.io/functions/replaceRE/)

HTH