feat: smart image preloading with build-time extraction and runtime scheduling

[troshab]

Summary

• Extract image URLs at parse time from all slide sources (frontmatter image/backgroundImage/background, markdown ![](url), Vue component src/image props, CSS url(...)) and store in images[] on SlideInfoBase - this field survives build-mode content stripping since it's not in the explicit strip list
• Generate <link rel="preload" as="image"> tags in HTML head at build time for all extracted images
• Add runtime composable (usePreloadImages) with navigation-aware scheduling: immediately preloads current + prev + next + configurable look-ahead window, then all remaining slides after 3s

Motivation

Slidev preloads slide components (JS) but not the images inside them. When navigating to a slide with background/embedded images, there's a visible loading flash. PR #2450 addresses this only for image: frontmatter. This PR provides comprehensive coverage of all image sources with both build-time and runtime preloading.

Config API

preloadImages: true              # default — all preloading enabled
preloadImages: false             # disable
preloadImages:
  ahead: 5                       # custom look-ahead window (default: 3)

Files Changed (9 files, ~130 lines added)

File	Change
packages/types/src/types.ts	Add images?: string[] to SlideInfoBase
packages/types/src/frontmatter.ts	Add preloadImages to HeadmatterConfig
packages/parser/src/config.ts	Default preloadImages: true
packages/parser/src/core.ts	extractImages() function + integration in parseSlide()
packages/slidev/node/setups/indexHtml.ts	collectPreloadImages() for <link rel="preload"> tags
packages/client/composables/usePreloadImages.ts	Runtime composable with navigation-aware scheduling
packages/client/internals/SlidesShow.vue	Call usePreloadImages() alongside component preloading
packages/client/constants.ts	Add preloadImages to HEADMATTER_FIELDS
packages/vscode/schema/headmatter.json	VS Code autocomplete schema

Comparison with #2450

Feature	#2450	This PR
Frontmatter image:	Yes	Yes
Markdown 	No	Yes
Vue components (<Background>, <Image>, etc.)	No	Yes
CSS url(...)	No	Yes
<link rel="preload"> tags	Yes	Yes
Runtime smart preloading	No	Yes
Navigation-aware priority	No	Yes
Configurable ahead window	No	Yes
Default enabled	No	Yes

Design Decisions

• Code blocks stripped before extraction — avoids false positives from code examples
• data: URIs and Vue template expressions filtered — prevents invalid preload targets
• background frontmatter filtered by image extension — CSS values like linear-gradient(...) are not preloaded
• Deduplication — both build-time and runtime track loaded URLs to avoid duplicate requests
• Mirrors existing preloading pattern — runtime composable follows the same watchEffect + 3s timeout pattern used for component preloading in SlidesShow.vue

Test Plan

• Dev server: images for current+ahead slides load before navigation (check Network tab)
• Build: <link rel="preload" as="image"> tags present in HTML head
• Build: images[] field exists on meta.slide (content stripped but images preserved)
• preloadImages: false disables both build-time and runtime preloading
• Code blocks excluded from extraction (no false positives)
• No duplicate preload requests for same image across slides

Closes #2450

[netlify]

✅ Deploy Preview for slidev ready!

Name	Link
🔨 Latest commit	f1eca71
🔍 Latest deploy log	https://app.netlify.com/projects/slidev/deploys/698c81acb597510008b26a3e
😎 Deploy Preview	https://deploy-preview-2459--slidev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.