Update image optimization to remote astro asset loading

src/components/common/Image.astro

@@ -4,15 +4,16 @@ import {
   getImagesOptimized,
   astroAsseetsOptimizer,
   unpicOptimizer,
+  isUnpicCompatible,
   type ImageProps,
-  type AttributesProps
+  type AttributesProps,
 } from '~/utils/images-optimization';
 
 type Props = ImageProps;
 type ImageType = {
   src: string;
   attributes: AttributesProps;
-}
+};
 
 const props = Astro.props;
 
@@ -40,13 +41,21 @@ const _image = await findImage(props.src);
 
 let image: ImageType | undefined = undefined;
 
-if (_image !== null && typeof _image === 'object') {
+if (
-  image = await getImagesOptimized(_image, props, astroAsseetsOptimizer);
+  typeof _image === 'string' &&
-} else if (typeof _image === 'string' && (_image.startsWith('http://') || _image.startsWith('https://'))) {
+  (_image.startsWith('http://') || _image.startsWith('https://')) &&
+  isUnpicCompatible(_image)
+) {
   image = await getImagesOptimized(_image, props, unpicOptimizer);
 } else if (_image) {
-  image = await getImagesOptimized(_image, props);
+  image = await getImagesOptimized(_image, props, astroAsseetsOptimizer);
 }
 ---
 
-{!image ? <Fragment /> : <img src={image.src} crossorigin="anonymous" referrerpolicy="no-referrer" {...image.attributes} />}
+{
+  !image ? (
+    <Fragment />
+  ) : (
+    <img src={image.src} crossorigin="anonymous" referrerpolicy="no-referrer" {...image.attributes} />
+  )
+}

src/utils/images-optimization.ts

@@ -210,14 +210,14 @@ const getBreakpoints = ({
 };
 
 /* ** */
-export const astroAsseetsOptimizer: ImagesOptimizer = async (image, breakpoints) => {
+export const astroAsseetsOptimizer: ImagesOptimizer = async (image, breakpoints, width, height) => {
-  if (!image || typeof image === 'string') {
+  if (!image) {
     return [];
   }
 
   return Promise.all(
     breakpoints.map(async (w: number) => {
-      const url = (await getImage({ src: image, width: w })).src;
+      const url = (await getImage({ src: image, width: w, inferSize: true })).src;
       return {
         src: url,
         width: w,
@@ -226,6 +226,10 @@ export const astroAsseetsOptimizer: ImagesOptimizer = async (image, breakpoints)
   );
 };
 
+export const isUnpicCompatible = (image: string) => {
+  return typeof parseUrl(image) !== 'undefined';
+};
+
 /* ** */
 export const unpicOptimizer: ImagesOptimizer = async (image, breakpoints, width, height) => {
   if (!image || typeof image !== 'string') {