From 0a000eeee43b3679a64a5b44800856f17196e888 Mon Sep 17 00:00:00 2001 From: mvm Date: Mon, 8 Jun 2026 17:58:09 -0500 Subject: [PATCH 1/3] fix(media): add image loading hints --- .changeset/gold-maps-promise.md | 5 +++++ packages/core/src/components/EmDashImage.astro | 2 ++ packages/core/src/components/Image.astro | 1 + 3 files changed, 8 insertions(+) create mode 100644 .changeset/gold-maps-promise.md diff --git a/.changeset/gold-maps-promise.md b/.changeset/gold-maps-promise.md new file mode 100644 index 000000000..0fb02c1f5 --- /dev/null +++ b/.changeset/gold-maps-promise.md @@ -0,0 +1,5 @@ +--- +"emdash": patch +--- + +Add fetch priority and early lazy-load marker attributes to EmDash image components so sites can prioritize above-the-fold images and selectively promote deferred lazy images after initial page load. diff --git a/packages/core/src/components/EmDashImage.astro b/packages/core/src/components/EmDashImage.astro index 710c58974..0150216ac 100644 --- a/packages/core/src/components/EmDashImage.astro +++ b/packages/core/src/components/EmDashImage.astro @@ -170,6 +170,8 @@ const imgProps: Record = { height: finalHeight, alt: finalAlt, loading: priority ? "eager" : "lazy", + fetchpriority: priority ? "high" : undefined, + "data-early-lazy-load": priority ? undefined : "", decoding: "async", style: placeholderStyle ? `${baseStyle} ${placeholderStyle}` : baseStyle, ...attrs, diff --git a/packages/core/src/components/Image.astro b/packages/core/src/components/Image.astro index 37cd43416..6d5c1de43 100644 --- a/packages/core/src/components/Image.astro +++ b/packages/core/src/components/Image.astro @@ -160,6 +160,7 @@ const imgStyle = placeholderStyle ? `${baseStyle} ${placeholderStyle}` : baseSty width={renderWidth} height={renderHeight} loading="lazy" + data-early-lazy-load decoding="async" style={imgStyle} /> From 0cf43756390965736b7837c1ad2bbd888dd945ab Mon Sep 17 00:00:00 2001 From: mvm Date: Mon, 8 Jun 2026 18:33:50 -0500 Subject: [PATCH 2/3] chore: rerun CI From f06430c7624f311b7c84479ca82aaf7c132ffb46 Mon Sep 17 00:00:00 2001 From: mvm Date: Mon, 8 Jun 2026 19:07:10 -0500 Subject: [PATCH 3/3] docs(media): clarify image priority hints --- .changeset/gold-maps-promise.md | 2 +- .../src/content/docs/guides/media-library.mdx | 21 +++++-------------- .../content/docs/themes/creating-themes.mdx | 3 +++ .../core/src/components/EmDashImage.astro | 1 - packages/core/src/components/Image.astro | 1 - 5 files changed, 9 insertions(+), 19 deletions(-) diff --git a/.changeset/gold-maps-promise.md b/.changeset/gold-maps-promise.md index 0fb02c1f5..c0c3ab237 100644 --- a/.changeset/gold-maps-promise.md +++ b/.changeset/gold-maps-promise.md @@ -2,4 +2,4 @@ "emdash": patch --- -Add fetch priority and early lazy-load marker attributes to EmDash image components so sites can prioritize above-the-fold images and selectively promote deferred lazy images after initial page load. +Add `fetchpriority="high"` to priority EmDash images so above-the-fold images can be requested eagerly and prioritized by the browser. diff --git a/docs/src/content/docs/guides/media-library.mdx b/docs/src/content/docs/guides/media-library.mdx index 3f6838182..4899f6e3b 100644 --- a/docs/src/content/docs/guides/media-library.mdx +++ b/docs/src/content/docs/guides/media-library.mdx @@ -230,11 +230,11 @@ const { entry: post } = await getEmDashEntry("posts", Astro.params.slug); ### Responsive Images -For responsive images, use Astro's Image component with external URLs: +For EmDash media fields, use the `Image` component from `emdash/ui`: ```astro --- -import { Image } from "astro:assets"; +import { Image } from "emdash/ui"; import { getEmDashEntry } from "emdash"; const { entry: post } = await getEmDashEntry("posts", Astro.params.slug); @@ -242,26 +242,15 @@ const { entry: post } = await getEmDashEntry("posts", Astro.params.slug); {post?.data.featured_image && ( {post.data.featured_image_alt )} ``` - +`priority` is for the primary above-the-fold image. It sets `loading="eager"` and `fetchpriority="high"`: `loading` controls whether loading is deferred, and `fetchpriority` gives the browser a priority hint for the request. ## Deleting Media diff --git a/docs/src/content/docs/themes/creating-themes.mdx b/docs/src/content/docs/themes/creating-themes.mdx index b2a2ecd5f..52b7aa408 100644 --- a/docs/src/content/docs/themes/creating-themes.mdx +++ b/docs/src/content/docs/themes/creating-themes.mdx @@ -294,6 +294,7 @@ const { post } = Astro.props; alt={post.data.featured_image.alt || post.data.title} width={800} height={450} + priority /> )}

{post.data.title}

@@ -306,6 +307,8 @@ const { post } = Astro.props; with `src` and `alt` -- writing `` renders `[object Object]`. +Use `priority` only for the likely above-the-fold image on a page, such as a hero or first card image. It renders the image with `loading="eager"` and `fetchpriority="high"`. `loading` controls whether the browser may defer loading, while `fetchpriority` hints how important the request is once the browser discovers it. + ## Using Menus Query admin-defined menus in your layouts. Never hard-code navigation links: diff --git a/packages/core/src/components/EmDashImage.astro b/packages/core/src/components/EmDashImage.astro index 0150216ac..2d828053f 100644 --- a/packages/core/src/components/EmDashImage.astro +++ b/packages/core/src/components/EmDashImage.astro @@ -171,7 +171,6 @@ const imgProps: Record = { alt: finalAlt, loading: priority ? "eager" : "lazy", fetchpriority: priority ? "high" : undefined, - "data-early-lazy-load": priority ? undefined : "", decoding: "async", style: placeholderStyle ? `${baseStyle} ${placeholderStyle}` : baseStyle, ...attrs, diff --git a/packages/core/src/components/Image.astro b/packages/core/src/components/Image.astro index 6d5c1de43..37cd43416 100644 --- a/packages/core/src/components/Image.astro +++ b/packages/core/src/components/Image.astro @@ -160,7 +160,6 @@ const imgStyle = placeholderStyle ? `${baseStyle} ${placeholderStyle}` : baseSty width={renderWidth} height={renderHeight} loading="lazy" - data-early-lazy-load decoding="async" style={imgStyle} />