Picture Element #270

New Issue

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

claunia commented

2026-01-29 14:32:23 +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 closed this issue

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

claunia commented

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

@kaylumah commented on GitHub (Mar 31, 2024):

@TerribleDev did you ever get around to creating this extension?

@kaylumah commented on GitHub (Mar 31, 2024): @TerribleDev did you ever get around to creating this extension?

claunia commented

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

@TerribleDev commented on GitHub (Mar 31, 2024):

I did but 5 years ago is quite a while back so idk what I did with the code.

@TerribleDev commented on GitHub (Mar 31, 2024): I did but 5 years ago is quite a while back so idk what I did with the code.

claunia commented

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

@kaylumah commented on GitHub (Mar 31, 2024):

Oh yeah I can imagine!
Found this issue due to the fact that this was one of the last things affecting my lighthouse scores

A quick scan of your public repositories allowed be to find the code in question (its in your blog repo, not the linked repo)

A quick look at the code, and it looks like it gives me enough pointers on how to achieve something similar

@kaylumah commented on GitHub (Mar 31, 2024): Oh yeah I can imagine! Found this issue due to the fact that this was one of the last things affecting my lighthouse scores A quick scan of your public repositories allowed be to find the code in question (its in your blog repo, not the linked repo) A quick look at the code, and it looks like it gives me enough pointers on how to achieve something similar

claunia commented

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

@TerribleDev commented on GitHub (Mar 31, 2024):

I do remember getting good at markdig extensions. if I recall correctly there's quite a few in there

@TerribleDev commented on GitHub (Mar 31, 2024): I do remember getting good at markdig extensions. if I recall correctly there's quite a few in there

claunia referenced this issue

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

[PR #270] [MERGED] fixes #196 ensuring line breaks when renderer does not have html enabled #904

claunia referenced this issue

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

[PR #270] fixes #196 ensuring line breaks when renderer does not have html enabled #907

Sign in to join this conversation.