Gif Support in MDX File

[theDeal]

What version of starlight are you using?

0.30.3

What is your idea?

Currently, Astro Starlight provides robust support for images, videos, and other media types in MDX files. However, there is no native support for displaying GIFs, which are commonly used for animations and dynamic content in modern web development. Adding support for GIFs in MDX files would enhance the multimedia capabilities of Astro Starlight, allowing developers to include animated content seamlessly.

Why is this feature necessary?

Use Case:

• Enhanced User Engagement: Many developers and designers rely on GIFs to showcase animated content, tutorials, demos, or interactive elements. With GIF support in MDX, content creators could use these animations directly in their documentation or content, improving user engagement and experience.
• Consistency & Flexibility: By supporting GIFs natively, developers would have consistent access to a variety of media types when working with MDX files, ensuring all content remains visually dynamic and engaging without relying on external libraries or custom workarounds.
• Improved Workflow: A seamless GIF experience within Astro Starlight would reduce the need for additional configuration or third-party solutions, streamlining workflows for both developers and content authors.

Do you have examples of this feature in other projects?

Right now, I'm using a workaround by placing GIFs in the public folder and rendering them directly with the <img> tag. While this works, it's not the most efficient solution for page load times. Every GIF needs to be manually copied to the public directory, and each time the page loads, the GIFs are fetched as static assets, which can increase the overall page size and slow down performance. A native GIF support in MDX would streamline this process, ensuring that GIFs are handled more efficiently, reducing unnecessary file transfers and improving load times.

Have a look here:
https://anleitung.sitzplan.digital/de/mitmachen/feedback/

Participation

• I am willing to submit a pull request for this feature.

[delucis]

Hi @theDeal! Thanks for the feedback. What happens currently when you use a GIF in an MDX file? I’d expect this to work, but maybe something in Astro’s asset handling is behaving unexpectedly.

[faiz9068]

Hi @delucis when I am trying use Gif image in .md file I am getting 500 Internal Server Error, It converting gif to web , is there any you to specify image format in markdown ?

[delucis]

Ah, it converts the GIF to WebP? I guess our automatic image optimization isn’t smart enough to detect an animated GIF so still proceeds to optimize that as a static WebP.

One quick workaround would be to move your GIF to the public/ directory. So you could have a public/images/my-animation.gif file and then update your image:

![example](/images/my-animation.gif)

[faiz9068]

Yes It Converts Gif To WebP ,I am currently doing same workaround , is it a Bug ? ,should I report it ?

[delucis]

If you have a reproduction, yes please! I tested and heard from other people and I was able to use animated GIFs in Markdown successfully, so it is possible it’s specific to a certain type of GIF encoding or something, so we would need a GIF file that’s causing this.

For example, here’s my test site with a GIF that works:

starlight-gif-test.mov

[theDeal]

hmm weird will check out, will and write later if it works i will close the issue