Skip to content

perf: lazy-load images in markdown preview - #136

Open
shrutig-blip wants to merge 1 commit into
Rinava:mainfrom
shrutig-blip:fix/issue-43-lazy-images-clean
Open

perf: lazy-load images in markdown preview#136
shrutig-blip wants to merge 1 commit into
Rinava:mainfrom
shrutig-blip:fix/issue-43-lazy-images-clean

Conversation

@shrutig-blip

Copy link
Copy Markdown
Contributor

Summary

Adds a custom image renderer to the Markdown preview to improve loading performance.

Changes

  • Add a custom img renderer in MarkdownPreview
  • Set loading="lazy" for off-screen images
  • Set decoding="async" for asynchronous image decoding
  • Preserve existing image props (src, title, etc.) by spreading the props
  • Default missing alt text to "" for accessibility
  • Keep using the native <img> element since Markdown images can reference arbitrary user-supplied URLs, making next/image unsuitable

Testing

  • npm run lint
  • npm run build

@vercel

vercel Bot commented Jul 18, 2026

Copy link
Copy Markdown

@shrutig-blip is attempting to deploy a commit to the rinava's projects Team on Vercel.

A member of the Team first needs to authorize it.

@shrutig-blip

Copy link
Copy Markdown
Contributor Author

Hi @Rinava! I've addressed #43 by adding a custom image renderer that lazy-loads Markdown images while preserving the existing props and providing an empty alt fallback. I also kept the native with a scoped lint suppression since the image URLs are arbitrary user-supplied Markdown URLs. I'd appreciate any feedback. Thanks!

@Rinava
Rinava force-pushed the fix/issue-43-lazy-images-clean branch from 93eab57 to 11e43ae Compare August 13, 2026 23:13
@Rinava

Rinava commented Aug 13, 2026

Copy link
Copy Markdown
Owner

@shrutig-blip same story as #135 — took it over the line myself rather than leave it stuck behind the Prettier reformat. Rebuilt on today's main so the diff is just the six lines that matter; everything else in your old branch was the requote, which main already has.

Kept it faithful to what you wrote — a plain lazy <img> with decoding="async" and an empty-alt fallback, and I left the @next/next/no-img-element disable in with a one-line why: next/image's remote-domain allowlist genuinely can't cover the arbitrary user URLs markdown throws at it, so the plain tag is the right call here. The only real change from yours was the indentation — the original would've tripped format:check.

Verified locally and in CI — format:check, lint, 87/87 tests, and build all green. (Red Vercel check is the usual fork-deploy notice; "Lint and build" is the gate that matters, and it passed.)

Heads-up: force-pushed onto your branch, so git fetch + hard-reset to origin before you touch it locally. Thanks @shrutig-blip — nice small perf win, and sorry for the wait.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants