# Responsive Images support on Markdown Cards

**URL:** <https://forum.ghost.org/t/responsive-images-support-on-markdown-cards/18195>\
**Category:** Ideas\
**Created:** [November 11, 2020, 10:49pm UTC](https://forum.ghost.org/t/responsive-images-support-on-markdown-cards/18195 "2020-11-11T22:49:10Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ludovic\_Toinel](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ludovic_toinel/32/3476_2.png) [@Ludovic\_Toinel](https://forum.ghost.org/u/Ludovic_Toinel)\
**Post date:** [November 11, 2020, 10:49pm UTC](https://forum.ghost.org/t/responsive-images-support-on-markdown-cards/18195/1 "2020-11-11T22:49:10Z")

</div>

Hi,

[Ghost supports Responsives images on image card.](https://forum.ghost.org/t/responsive-images-inside-of-post-content/6866/2)

I could be genious to support responsive images on **Markdown cards**! 😇

> **[@davegardner/markdown-it-responsive](https://www.npmjs.com/package/@davegardner/markdown-it-responsive)**
>
> markdown-it plugin for responsive images with support for Netlify Large Media Transforms. Latest version: 0.2.3, last published: 2 years ago. Start using @davegardner/markdown-it-responsive in your project by running \`npm i...

Regards,

---

<div class="post-metadata">

**Author:** ![Kevin](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/kevin/32/32_2.png) [@Kevin](https://forum.ghost.org/u/Kevin)\
**Post date:** [November 12, 2020, 10:54am UTC](https://forum.ghost.org/t/responsive-images-support-on-markdown-cards/18195/2 "2020-11-12T10:54:06Z")

</div>

It’s a difficult one to implement. We’re able to generate `srcset` and `sizes` for image and gallery cards because they allow metadata about the image to be stored inside the mobiledoc document format. Markdown doesn’t let you do that unless you break away from cross-compatible markdown which would largely work against the intention of the markdown card.

---

<div class="post-metadata">

**Author:** ![Ludovic\_Toinel](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ludovic_toinel/32/3476_2.png) [@Ludovic\_Toinel](https://forum.ghost.org/u/Ludovic_Toinel)\
**Post date:** [November 12, 2020, 9:40pm UTC](https://forum.ghost.org/t/responsive-images-support-on-markdown-cards/18195/3 "2020-11-12T21:40:06Z")

</div>

The responsiveness is a rendering issue linked to the theme used and not the post content. It’s not a mobiledoc issue, isn’t it ?

What about to let the image as is in the mobile doc and let the rendering resizes the images and provides images sizes regarding the theme used ?

Thank-you Kevin.

---

<div class="post-metadata">

**Author:** ![Kevin](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/kevin/32/32_2.png) [@Kevin](https://forum.ghost.org/u/Kevin)\
**Post date:** [November 12, 2020, 11:04pm UTC](https://forum.ghost.org/t/responsive-images-support-on-markdown-cards/18195/4 "2020-11-12T23:04:11Z")

</div>

> The responsiveness is a rendering issue linked to the theme used and not the post content.

No, themes have no control over the post content rendering. Post content is rendered to HTML when the post is saved to keep front-end and API requests fast through not needing to render on the fly.

> What about to let the image as is in the mobile doc and let the rendering resizes the images and provides images sizes regarding the theme used ?

Sorry, I’m not sure what this means, can you re-phrase?

---

<div class="post-metadata">

**Author:** ![Ludovic\_Toinel](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ludovic_toinel/32/3476_2.png) [@Ludovic\_Toinel](https://forum.ghost.org/u/Ludovic_Toinel)\
**Post date:** [November 14, 2020, 10:06pm UTC](https://forum.ghost.org/t/responsive-images-support-on-markdown-cards/18195/5 "2020-11-14T22:06:07Z")

</div>

The Koenig rendering motor could take into parameters the theme settings in terms of image resolution supported ?

The html could be regenerated each time a theme is changed based on the Mobiledoc document that contains the original Markdown ?

I’m trying to find a solution to accelerate the mobile rendering of my blog on long posts 😉

---

<div class="post-metadata">

**Author:** ![Kevin](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/kevin/32/32_2.png) [@Kevin](https://forum.ghost.org/u/Kevin)\
**Post date:** [November 15, 2020, 11:34am UTC](https://forum.ghost.org/t/responsive-images-support-on-markdown-cards/18195/6 "2020-11-15T11:34:49Z")

</div>

> [@Ludovic\_Toinel](#):
>
> The Koenig rendering motor could take into parameters the theme settings in terms of image resolution supported ?
> 
> The html could be regenerated each time a theme is changed based on the Mobiledoc document that contains the original Markdown ?

That side of things isn’t the problem, srcsets use system-defined sizes that aren’t affected by themes. The issue is having access to the image dimensions so that we can output the correct set of srcset/sizes that work within the available system sizes. Image and gallery cards store that metadata within mobiledoc, markdown has no equivalent.

---

<div class="post-metadata">

**Author:** ![Ludovic\_Toinel](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ludovic_toinel/32/3476_2.png) [@Ludovic\_Toinel](https://forum.ghost.org/u/Ludovic_Toinel)\
**Post date:** [December 7, 2020, 9:46pm UTC](https://forum.ghost.org/t/responsive-images-support-on-markdown-cards/18195/7 "2020-12-07T21:46:05Z")

</div>

The other solution could be to add a “loadind=lazy” attribute on all post images generated by the markdown  
[Image Lazy Loading plugin for Markdown-it by ltoinel · Pull Request #156 · TryGhost/Koenig · GitHub](https://github.com/TryGhost/Koenig/pull/156)

It could save me some performance Warning on large posts (+ support new image format).

 ![Untitled-1](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/7/7ab8b213898780d335b0f20892ae4519bceb112c.png)
