Skip to content
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.

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

Get remote dimensions #6797

Merged
merged 9 commits into from
Feb 15, 2024
22 changes: 19 additions & 3 deletions src/content/docs/en/guides/images.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -139,13 +139,13 @@ Use the required `alt` attribute to provide a string of [descriptive alt text](h

If an image is merely decorative (i.e. doesn't contribute to the understanding of the page), set `alt=""` so that screen readers and other assistive technologies know to ignore the image.

##### width and height (required for `public/` and remote images)
##### width and height (required for images in `public/`)

These properties define the dimensions to use for the image.

When using local images in their original aspect ratio, the `width` and `height` can be automatically inferred from the source file and are optional.
When using images in their original aspect ratio, `width` and `height` are optional. These dimensions can be automatically inferred from image files located in `src/` and from remote images with [`inferSize` set to `true`](#infersize).

However, both of these properties are required for remote images and images stored in your `public/` folder as Astro is unable to analyze these files.
However, both of these properties are required for images stored in your `public/` folder as Astro is unable to analyze these files.

##### densities

Expand Down Expand Up @@ -240,6 +240,22 @@ By default, the `<Image />` component will produce a `.webp` file.
- a preset (`low`, `mid`, `high`, `max`) that is automatically normalized between formats.
- a number from `0` to `100` (interpreted differently between formats).

##### inferSize

<p><Since v="4.4.0" /></p>

Allows you to set the original `width` and `height` of a remote image automatically.

By default, this value is set to `false` and you must manually specify both dimensions for your remote image. If used with an unauthorized remote image, a request will still be made to the image domain, so the dimensions can be fetched.
OliverSpeir marked this conversation as resolved.
Show resolved Hide resolved

Set `inferSize: true` to infer these values from the image content when fetched. This is helpful if you don't know the dimensions of the remote image, or if they might change:

```astro mark="inferSize"
---
import { Image } from 'astro:assets';
---
<Image src="https://example.com/cat.png" inferSize alt="A cat sleeping in the sun.">
OliverSpeir marked this conversation as resolved.
Show resolved Hide resolved
```

##### Additional properties

Expand Down
Loading