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!

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.

1 participant