Picture Element #267

New Issue

claunia · 2026-01-29T14:32:21Z

claunia commented

2026-01-29 14:32:21 +00:00

Originally created by @TerribleDev on GitHub (Feb 4, 2019).

I plan on writing an extension that emits <picture> elements instead of <img> with some customizable suffixes for different image formats webp, jpeg xr, and src sets

As a bit of background I use this markdown compiler for my blog, it gets all 100's in lighthouse, and my last performance bottleneck left to tackle is to ship next gen image formats, but to do that I have to start telling the browsers to use a different image formats based on what the browser supports. The picture element describes an image to load based on rules including format, src set, media query, etc.

For now I'm just going to keep this extension in a separate repo

I've been doing a lot of private extension development for my blog, and I have a decent grasp with how it all fits together. For my new extension, do you think I should just make a renderer that inherits from LinkInlineRenderer but one that just emits picture elements instead if the LinkInline is has the Image property?

Any other tips I should consider when making this thing?

Originally created by @TerribleDev on GitHub (Feb 4, 2019). I plan on writing an extension that emits `<picture>` elements instead of `<img>` with some customizable suffixes for different image formats `webp`, `jpeg xr`, and src sets As a bit of background I use this markdown compiler for [my blog](https://blog.terribledev.io/Visualizing-your-react-redux-performance-bottlenecks/), it gets all 100's in lighthouse, and my last performance bottleneck left to tackle is to ship next gen image formats, but to do that I have to start telling the browsers to use a different image formats based on what the browser supports. The picture element describes an image to load based on rules including format, src set, media query, etc. For now I'm just going to keep this extension in a [separate repo](https://github.com/TerribleDev/markdig-picture-element/) I've been doing a lot of private extension development for my blog, and I have a decent grasp with how it all fits together. For my new extension, do you think I should just make a renderer that inherits from `LinkInlineRenderer` but one that just emits picture elements instead if the `LinkInline` is has the Image property? Any other tips I should consider when making this thing?

claunia referenced this issue

2026-01-29 14:47:05 +00:00

[PR #267] AutoIdentifierOptions clarification #906

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/markdig#267