Image optimization process

demo/astro.config.mjs

@@ -4,5 +4,8 @@ import embed from 'astro-embed/integration';
 
 // https://astro.build/config
 export default defineConfig({
+	image: {
+		domains: ['i.ytimg.com', 'i.vimeocdn.com', 'astro.build'],
+	},
 	integrations: [embed(), mdx()],
 });

docs/src/content/docs/components/link-preview.mdx

@@ -105,6 +105,56 @@ The `<LinkPreview>` component supports the following API for controlling its sty
 - `.link-preview--no-media`: Class applied to the card when it includes no image or video.
 - `.link-preview--no-metadata`: Class applied when metadata scraping failed, or no valid title was found. In this case the only contents of the card is the original URL link.
 
+## Optional props
+
+In addition to the required `id` prop, the following props are available to customise how the `<LinkPreview>` component renders:
+
+### `downloadPoster`
+
+**Type:** `boolean`
+
+Download the poster image and host it on the same server as your website.
+
+This attribute can only be used if the `og:image` metadata exists.
+
+```astro
+<LinkPreview id="https://astro.build/blog/welcome-world/" downloadPoster />
+```
+
+To use the `downloadPoster` attribute, need to add the address of the image server to astro.config.mjs as follows:
+
+```js
+export default defineConfig({
+	image: {
+		domains: ['astro.build'],
+	},
+});
+```
+
+## Poster Image Optimization
+
+To optimize the poster image, you can add the following configuration to your `astro.config.mjs` file to allow remote images:
+
+```js
+export default defineConfig({
+	image: {
+		domains: ['astro.build'],
+	},
+});
+```
+
+If you are using a remote image with the `poster` prop, you will need to adjust the `domains` URL in the `astro.config.mjs` file to match the URL of the remote image.
+
+You can also allow all HTTPS URLs by setting the `remotePatterns` option in the `astro.config.mjs` file.
+
+```js
+export default defineConfig({
+	image: {
+		remotePatterns: [{ protocol: 'https' }],
+	},
+});
+```
+
 ## Standalone installation
 
 If you only need the `<LinkPreview>` component, you can install the package directly instead of the main `astro-embed` package:

docs/src/content/docs/components/vimeo.mdx

@@ -110,6 +110,32 @@ If you want to customise this, for example to match the language of your website
 <Vimeo id="32001208" playlabel="Play the video" />
 ```
 
+## Poster Image Optimization
+
+To optimize the poster image, you can add the following configuration to your `astro.config.mjs` file to allow remote images:
+
+```js
+export default defineConfig({
+	image: {
+		domains: ['i.vimeocdn.com'],
+	},
+});
+```
+
+If you are using a remote image with the `poster` prop, you will need to adjust the `domains` URL in the `astro.config.mjs` file to match the URL of the remote image.
+
+You can also allow all HTTPS URLs by setting the `remotePatterns` option in the `astro.config.mjs` file.
+
+```js
+export default defineConfig({
+	image: {
+		remotePatterns: [{ protocol: 'https' }],
+	},
+});
+```
+
+If you are using a local image with the `poster` prop, the image will not be optimized.
+
 ## Standalone installation
 
 If you only need the `<Vimeo>` component, you can install the package directly instead of the main `astro-embed` package:

docs/src/content/docs/components/youtube.mdx

@@ -128,6 +128,32 @@ Set a visible title to overlay on the video.
 	title="The Astro Community: where contributors find a home"
 />
 
+## Poster Image Optimization
+
+To optimize the poster image, you can add the following configuration to your `astro.config.mjs` file to allow remote images:
+
+```js
+export default defineConfig({
+	image: {
+		domains: ['i.ytimg.com'],
+	},
+});
+```
+
+If you are using a remote image with the `poster` prop, you will need to adjust the `domains` URL in the `astro.config.mjs` file to match the URL of the remote image.
+
+You can also allow all HTTPS URLs by setting the `remotePatterns` option in the `astro.config.mjs` file.
+
+```js
+export default defineConfig({
+	image: {
+		remotePatterns: [{ protocol: 'https' }],
+	},
+});
+```
+
+If you are using a local image with the `poster` prop, the image will not be optimized.
+
 ## Standalone installation
 
 If you only need the `<YouTube>` component, you can install the package directly instead of the main `astro-embed` package:

docs/tsconfig.json

@@ -1,3 +1,3 @@
 {
   "extends": "astro/tsconfigs/strictest"
-}
+}

packages/astro-embed-link-preview/LinkPreview.astro

@@ -1,5 +1,6 @@
 ---
 import { parseOpenGraph } from './lib';
+import { Image } from 'astro:assets';
 
 export interface Props {
 	/** URL to fetch Open Graph data. */
@@ -41,7 +42,7 @@ const domain = meta?.url ? new URL(meta.url).hostname.replace('www.', '') : '';
 				</video>
 			) : (
 				meta.image && (
-					<img
+					<Image
 						src={meta.image}
 						alt={meta.imageAlt || ''}
 						width="1200"

packages/astro-embed-link-preview/lib.ts

@@ -28,6 +28,7 @@ export async function parseOpenGraph(pageUrl: string) {
 			getMetaProperty('og:image:url') ||
 			getMetaProperty('og:image')
 	);
+
 	const imageAlt = getMetaProperty('og:image:alt');
 	const video = urlOrNull(
 		getMetaProperty('og:video:secure_url') ||

packages/astro-embed-vimeo/Vimeo.astro

@@ -2,6 +2,7 @@
 import { safeGet } from '@astro-community/astro-embed-utils';
 import urlMatcher from './matcher';
 import './Vimeo.css';
+import { getImage } from 'astro:assets';
 
 export interface Props extends astroHTML.JSX.HTMLAttributes {
 	/** Vimeo video ID or URL. */
@@ -34,16 +35,38 @@ function extractID(idOrUrl: string) {
 }
 
 const videoid = extractID(id);
-let posterURL = poster;
+let posterURL = poster
+	? poster.startsWith('http')
+		? (
+				await getImage({
+					src: poster,
+					inferSize: true,
+					format: 'webp',
+				})
+		  ).src
+		: poster
+	: null;
 if (!posterURL) {
 	const data = await safeGet(`https://vimeo.com/api/v2/video/${videoid}.json`);
 	const resolution =
 		{ max: 1280, high: 640, default: 480, low: 120 }[posterQuality] || 480;
 	const { thumbnail_large } = data?.[0] || {};
 	if (thumbnail_large.endsWith('d_640')) {
-		posterURL = thumbnail_large.slice(0, -3) + resolution;
+		posterURL = (
+			await getImage({
+				src: thumbnail_large.slice(0, -3) + resolution,
+				inferSize: true,
+				format: 'webp',
+			})
+		).src;
 	} else {
-		posterURL = thumbnail_large;
+		posterURL = (
+			await getImage({
+				src: thumbnail_large,
+				inferSize: true,
+				format: 'webp',
+			})
+		).src;
 	}
 }
 

packages/astro-embed-youtube/YouTube.astro

@@ -1,6 +1,7 @@
 ---
 import 'lite-youtube-embed/src/lite-yt-embed.css';
 import urlMatcher from './matcher';
+import { getImage } from 'astro:assets';
 
 export interface Props extends astroHTML.JSX.HTMLAttributes {
 	id: string;
@@ -33,8 +34,23 @@ const posterFile =
 		default: 'hqdefault',
 		low: 'default',
 	}[posterQuality] || 'hqdefault';
-const posterURL =
-	poster || `https://i.ytimg.com/vi/${videoid}/${posterFile}.jpg`;
+const posterURL = poster
+	? poster.startsWith('http')
+		? (
+				await getImage({
+					src: poster,
+					inferSize: true,
+					format: 'webp',
+				})
+		  ).src
+		: poster
+	: (
+			await getImage({
+				src: `https://i.ytimg.com/vi/${videoid}/${posterFile}.jpg`,
+				inferSize: true,
+				format: 'webp',
+			})
+	  ).src;
 const href = `https://youtube.com/watch?v=${videoid}`;
 ---