Images inside markdown

In order to properly render an image lazily to a page without content jumping, the width and height of an image are needed.

When getting an image from markdown, the width and height aren’t returned so no placeholder-content can be set for lazy-loaded images.

Is this a limitation with datocms, or with markdown? Is there a way of handling images sources from markdown without experiencing a content-jump if the image is lazyloaded?

Hey @dan1 yes, the markdown is just text, so we cannot send more information there.

If you want more info on the assets, you should consider using a separate field for your assets. If you do that you can have a lot more info from the single asset, for example have a look at this documentation page: https://www.datocms.com/docs/content-delivery-api/images-and-videos

Or if you are using React you can directly use our component: https://www.datocms.com/docs/react#loading-responsive-progressive-images-from-datocms to get the effect that you want.

1 Like