Skip to content

Update priority prop reference #12052

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ascorbic merged 1 commit into from
Jul 21, 2025
Merged

Update priority prop reference #12052

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 4 additions & 17 deletions src/content/docs/en/reference/modules/astro-assets.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ However, both of these properties are required for images stored in your `public

A list of pixel densities to generate for the image.

The `densities` attribute is not compatible with responsive images using a `layout` property and will be ignored if set.
The `densities` attribute is not compatible with [responsive images](#responsive-image-properties) with a `layout` prop or `image.layout` config set, and will be ignored if set.

If provided, this value will be used to generate a `srcset` attribute on the `<img>` tag. Do not provide a value for `widths` when using this value.

Expand Down Expand Up @@ -293,7 +293,7 @@ import { Image } from 'astro:assets';

`inferSize` can fetch the dimensions of a [remote image from a domain that has not been authorized](/en/guides/images/#authorizing-remote-images), however the image itself will remain unprocessed.

#### priority
##### priority

<p>

Expand All @@ -312,9 +312,9 @@ import myImage from '../assets/my_image.png';
<Image src={myImage} priority alt="A description of my image" />
```

When `priority: true` (or the shorthand syntax `priority`) is added to the `<Image />` or `<Picture />` component, it will add the following attributes to instruct the browser to load the image immediately:
When `priority="true"` (or the shorthand syntax `priority`) is added to the `<Image />` or `<Picture />` component, it will add the following attributes to instruct the browser to load the image immediately:

```
```html
loading="eager"
decoding="sync"
fetchpriority="high"
Expand Down Expand Up @@ -535,19 +535,6 @@ Enabled when the [`layout`](#layout) property is set or configured. Defines the

Values match those of CSS `object-position`. Defaults to `center`, or the value of [`image.objectPosition`](/en/reference/configuration-reference/#imageobjectposition) if set. Can be used to override the default `object-position` styles.

##### priority

<p>

**Type:** `boolean` <br />
**Default:** `false` <br />
<Since v="5.10.0" />
</p>

Enabled when the [`layout`](#layout) property is set or configured. If set, eagerly loads a responsive image. Otherwise, images will be lazy-loaded. Use this for your largest above-the-fold image. Defaults to `false`.



### `getImage()`

<p>
Expand Down