Adds a new `<Picture>` component to the image integration (#3866)

* moving all normalization logic out of the Image component

* refactor: only require loaders to provide the image src

* Adding a `<Picture />` component

* fixing types.ts imports

* refactor: moving getImage to it's own file

* updating component types to use astroHTML.JSX

* Revert "updating component types to use astroHTML.JSX"

This reverts commit 6e5f578da8d1d3fd262f3cd9add7549f7580af97.

* going back to letting loaders add extra HTML attributes

* Always use lazy loading and async decoding

* Cleaning up the Picture component

* Adding test coverage for <Picture>

* updating the README

* using JSX types for the Image and Picture elements

* chore: adding changeset

* Update packages/integrations/image/src/get-image.ts

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* allow users to override loading and async on the <img>

* renaming config to constants, exporting getPicture()

* found the right syntax to import astro-jsx

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

1 files changed, 14 insertions, 0 deletions

diff --git a/packages/integrations/image/src/utils.ts b/packages/integrations/image/src/utils.ts
index 95e0fb2a1..44c338cf4 100644
--- a/packages/integrations/image/src/utils.ts
+++ b/packages/integrations/image/src/utils.ts
@@ -58,3 +58,17 @@ export function propsToFilename({ src, width, height, format }: TransformOptions
 
 	return format ? src.replace(ext, format) : src;
 }
+
+export function parseAspectRatio(aspectRatio: TransformOptions['aspectRatio']) {
+	if (!aspectRatio) {
+		return undefined;
+	}
+
+	// parse aspect ratio strings, if required (ex: "16:9")
+	if (typeof aspectRatio === 'number') {
+		return aspectRatio;
+	} else {
+		const [width, height] = aspectRatio.split(':');
+		return parseInt(width) / parseInt(height);
+	}
+}