Skip to content

Commit

Permalink
Add info about propertiesToHash to image-service-reference.mdx (#9505)
Browse files Browse the repository at this point in the history
* Add info about propertiesToHash to image-service-reference.mdx

Local image services have a property `propertiesToHash` which is missing from the docs. This change adds it along with a short explanation of what it does and what it falls back to if not passed.

* tiny grammar fix

---------

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com>
  • Loading branch information
3 people authored Sep 30, 2024
1 parent 1fe6a0c commit 92e12ba
Showing 1 changed file with 3 additions and 2 deletions.
5 changes: 3 additions & 2 deletions src/content/docs/en/reference/image-service-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -116,12 +116,13 @@ const service: LocalImageService = {
loading: attributes.loading ?? 'lazy',
decoding: attributes.decoding ?? 'async',
};
}
},
propertiesToHash: ['src', 'width', 'height', 'format', 'quality'],
};
export default service;
```
At build time for static sites and pre-rendered routes, both `<Image />` and `getImage(options)` call the `transform()` function. They pass options either through component attributes or an `options` argument, respectively. The transformed images will be built to a `dist/_astro` folder.
At build time for static sites and pre-rendered routes, both `<Image />` and `getImage(options)` call the `transform()` function. They pass options either through component attributes or an `options` argument, respectively. The transformed images will be built to a `dist/_astro` folder. Their file names will contain a hash of the properties passed to `propertiesToHash`. This property is optional and will default to `['src', 'width', 'height', 'format', 'quality']`. If your custom image service has more options that change the generated images, add these to the array.
In dev mode and SSR mode, Astro doesn't know ahead of time which images need to be optimized. Astro uses a GET endpoint (by default, `/_image`) to process the images at runtime. `<Image />` and `getImage()` pass their options to `getURL()`, which will return the endpoint URL. Then, the endpoint calls `parseURL()` and passes the resulting properties to `transform()`.
Expand Down

0 comments on commit 92e12ba

Please sign in to comment.