Show the pictures inside Reddit comments #5

2026-08-27T19:14:38Z

thatguygriff commented

2026-08-27 19:14:38 +00:00

A comment that was a picture rendered as either a link or, for a Giphy, the
literal text ![gif](giphy|Ve7wX45gaOFmw8eeEM). On r/aww that is most of the
thread.

Reddit writes an inline image as a token rather than an address, in three
shapes: ![gif](giphy|ID) for a Giphy, ![img](emote|t5_2th52|4358) for a
subreddit emote, and ![img](jo8gf0ca92zd1) for an image uploaded straight to
the comment. The useful part is that all three tokens are keys in that same
comment's own media_metadata, so this is one lookup and not three special
cases. Nothing in the adapter has to know what Giphy is.

The fourth shape is someone pasting the address of a picture, which on Reddit
is how most images in comments actually arrive -- 117 of them against 21
Giphys in the sample I scanned. Those are shown as pictures too, decided by
the file extension. A link that is not to an image stays a link.

Animated ones take s.gif over s.mp4 even though the MP4 is several times
smaller: a GIF moves on its own in an <img>, and an MP4 would need a player
element with autoplay, loop and muted set, for something the size of a
postage stamp.

Everything goes through the /m/ proxy, like all other media. Without that a
comment thread would have the reader's browser fetch dozens of files straight
from Reddit, which is the one thing this whole app exists to avoid.

Placing the image is the renderer's job, not the Markdown parser's, because
the proxy is a render-time concern and markdown.ts knows nothing about it --
so it takes an optional ImageRenderer and, without one, an image stays a
link exactly as before. The parser also learned ![...] proper: the link rule
was matching from the [ and stranding the ! as text.

Verified on r/aww/comments/171dxph, which carries one Giphy and 77 pasted
images: 35 render on the first page, all 35 load, all 35 through the proxy,
no upstream address reaches the page, no token is left unresolved, and
nothing overflows the column or scrolls the page sideways.

A comment that was a picture rendered as either a link or, for a Giphy, the literal text `![gif](giphy|Ve7wX45gaOFmw8eeEM)`. On r/aww that is most of the thread. Reddit writes an inline image as a token rather than an address, in three shapes: `![gif](giphy|ID)` for a Giphy, `![img](emote|t5_2th52|4358)` for a subreddit emote, and `![img](jo8gf0ca92zd1)` for an image uploaded straight to the comment. The useful part is that all three tokens are keys in that same comment's own `media_metadata`, so this is one lookup and not three special cases. Nothing in the adapter has to know what Giphy is. The fourth shape is someone pasting the address of a picture, which on Reddit is how most images in comments actually arrive -- 117 of them against 21 Giphys in the sample I scanned. Those are shown as pictures too, decided by the file extension. A link that is not to an image stays a link. Animated ones take `s.gif` over `s.mp4` even though the MP4 is several times smaller: a GIF moves on its own in an `<img>`, and an MP4 would need a player element with autoplay, loop and muted set, for something the size of a postage stamp. Everything goes through the `/m/` proxy, like all other media. Without that a comment thread would have the reader's browser fetch dozens of files straight from Reddit, which is the one thing this whole app exists to avoid. Placing the image is the renderer's job, not the Markdown parser's, because the proxy is a render-time concern and markdown.ts knows nothing about it -- so it takes an optional `ImageRenderer` and, without one, an image stays a link exactly as before. The parser also learned `![...]` proper: the link rule was matching from the `[` and stranding the `!` as text. Verified on r/aww/comments/171dxph, which carries one Giphy and 77 pasted images: 35 render on the first page, all 35 load, all 35 through the proxy, no upstream address reaches the page, no token is left unresolved, and nothing overflows the column or scrolls the page sideways.

thatguygriff added 1 commit 2026-08-27 19:14:38 +00:00

Show the pictures inside Reddit comments

CI / Typecheck, test, build (pull_request) Successful in 11s

Details

0db18547c8

A comment that was a picture rendered as either a link or, for a Giphy, the
literal text `![gif](giphy|Ve7wX45gaOFmw8eeEM)`. On r/aww that is most of the
thread.

Reddit writes an inline image as a token rather than an address, in three
shapes: `![gif](giphy|ID)` for a Giphy, `![img](emote|t5_2th52|4358)` for a
subreddit emote, and `![img](jo8gf0ca92zd1)` for an image uploaded straight to
the comment. The useful part is that all three tokens are keys in that same
comment's own `media_metadata`, so this is one lookup and not three special
cases. Nothing in the adapter has to know what Giphy is.

The fourth shape is someone pasting the address of a picture, which on Reddit
is how most images in comments actually arrive -- 117 of them against 21
Giphys in the sample I scanned. Those are shown as pictures too, decided by
the file extension. A link that is not to an image stays a link.

Animated ones take `s.gif` over `s.mp4` even though the MP4 is several times
smaller: a GIF moves on its own in an `<img>`, and an MP4 would need a player
element with autoplay, loop and muted set, for something the size of a
postage stamp.

Everything goes through the `/m/` proxy, like all other media. Without that a
comment thread would have the reader's browser fetch dozens of files straight
from Reddit, which is the one thing this whole app exists to avoid.

Placing the image is the renderer's job, not the Markdown parser's, because
the proxy is a render-time concern and markdown.ts knows nothing about it --
so it takes an optional `ImageRenderer` and, without one, an image stays a
link exactly as before. The parser also learned `![...]` proper: the link rule
was matching from the `[` and stranding the `!` as text.

Verified on r/aww/comments/171dxph, which carries one Giphy and 77 pasted
images: 35 render on the first page, all 35 load, all 35 through the proxy,
no upstream address reaches the page, no token is left unresolved, and
nothing overflows the column or scrolls the page sideways.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_017nMQ2eDKnqALYhAibpTKTu

thatguygriff added 1 commit 2026-08-27 19:19:27 +00:00

Show a picture whose address was typed without a scheme

CI / Typecheck, test, build (pull_request) Successful in 26s

Details

031101c382

`preview.redd.it/lz4drsqh0clh1.jpeg?width=1290&...` was rendering as plain
text -- not a picture, and not even a link. The bare-address rule has always
insisted on `https://`, so anything copied out of an address bar, where the
browser hides the scheme, fell through to nothing at all. That predates the
inline images from the last commit; it just did not matter until pictures
started being worth placing.

The rule is deliberately narrow: a host with a dot, a path, and an image
extension. Widening it to every schemeless address would be the obvious move
and is wrong, because a comment thread is full of dotted, slashed prose --
`src/render/post.ts` would become a link to a website in Tonga, and
`node_modules/foo/bar.js` a website in Jersey. Requiring the extension costs
nothing here, since the only thing worth guessing a scheme for is a picture.

https is assumed. Every host that serves these redirects to it anyway.

Checked both ways: the four address shapes that should become pictures do,
and nine pieces of ordinary prose that must not -- file paths, a Windows
drive letter, a relative path, an email address followed by a filename, a
version number -- still do not.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_017nMQ2eDKnqALYhAibpTKTu

thatguygriff merged commit b9b56e2195 into main

2026-08-27 19:30:00 +00:00

thatguygriff deleted branch reddit-inline-images

2026-08-27 19:30:00 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Unsupervised/antisocial#5