Fix remote image example (#6112)

* 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>

1 files changed, 4 insertions, 8 deletions

diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md
index 89fdbaba8..1cb0d5d4c 100644
--- a/packages/integrations/image/README.md
+++ b/packages/integrations/image/README.md
@@ -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>
@@ -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