Skip to content

Commit

Permalink
Fix remote image example (#6112)
Browse files Browse the repository at this point in the history
* Fix remote image example

`format` prop is required for remote images

* Specify `format` is only required when using `Squoosh`

- Undo changes / Restore previous content in Remote Image Examples
- Specify `format` is only required for remote images when using Squoosh(default)

* Fix backticks

* remove 'only' and backticks on squoosh

---------

Co-authored-by: BryceRussell <19967622+BryceRussell@users.noreply.github.com>
  • Loading branch information
BryceRussell and BryceRussell authored Feb 6, 2023
1 parent 32abe49 commit 327a76c
Showing 1 changed file with 4 additions and 8 deletions.
12 changes: 4 additions & 8 deletions packages/integrations/image/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -175,8 +175,7 @@ Set to an empty string (`alt=""`) if the image is not a key part of the content

The output format to be used in the optimized image. The original image format will be used if `format` is not provided.

This property is required for remote images only, because the original format cannot be inferred.

This property is required for remote images when using the default image transformer Squoosh, this is because the original format cannot be inferred.
#### quality

<p>
Expand Down Expand Up @@ -565,17 +564,14 @@ Remote images can be transformed with the `<Image />` component. The `<Image />`
---
import { Image } from '@astrojs/image/components';
const imageUrl = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
const imageUrl = 'https://astro.build/assets/press/full-logo-dark.png';
---
// cropping to a specific width and height
<Image src={imageUrl} width={544} height={184} alt="descriptive text" />
<Image src={imageUrl} width={750} height={250} format="avif" alt="descriptive text" />
// height will be recalculated to match the aspect ratio
<Image src={imageUrl} width={300} aspectRatio={16/9} alt="descriptive text" />
// cropping to a specific height and aspect ratio and converting to an avif format
<Image src={imageUrl} height={200} aspectRatio="16:9" format="avif" alt="descriptive text" />
<Image src={imageUrl} width={750} aspectRatio={16/9} format="avif" alt="descriptive text" />
```

### Responsive pictures
Expand Down

0 comments on commit 327a76c

Please sign in to comment.