@webstudio-is/image 0.1.0 → 0.15.0

package/src/image-loaders.ts

@@ -0,0 +1,47 @@
+import warnOnce from "warn-once";
+import { allSizes, type ImageLoader } from "./image-optimize";
+
+export type CloudflareImageLoaderOptions = {
+  resizeOrigin?: string | null;
+};
+
+/**
+ * Default image loader in case of no loader provided
+ * https://developers.cloudflare.com/images/image-resizing/url-format/
+ **/
+export const cloudflareImageLoader: (
+  ops: CloudflareImageLoaderOptions | null
+) => ImageLoader =
+  (loaderOptions) =>
+  ({ width, src, quality }) => {
+    if (process.env.NODE_ENV !== "production") {
+      warnOnce(
+        allSizes.includes(width) === false,
+        "Width must be only from allowed values"
+      );
+    }
+
+    const options = `width=${width},quality=${quality},format=auto`;
+    // Cloudflare docs say that we don't need to urlencode the path params
+    const pathname = `/cdn-cgi/image/${options}/${src}`;
+
+    if (loaderOptions?.resizeOrigin != null) {
+      const url = new URL(pathname, loaderOptions.resizeOrigin);
+      return url.href;
+    } else {
+      return pathname;
+    }
+  };
+
+/**
+ * Fake pseudo loader for local testing purposes
+ **/
+export const localImageLoader: () => ImageLoader =
+  () =>
+  ({ width, src, quality }) => {
+    // Just emulate like we really resize the image
+    const params = new URLSearchParams();
+    params.set("width", `${width}`);
+    params.set("quality", `${quality}`);
+    return `${src}?${params.toString()}`;
+  };

package/{lib/image-optimize.test.js → src/image-optimize.test.ts}

@@ -1,155 +1,174 @@
 import { getImageAttributes } from "./image-optimize";
 import { cloudflareImageLoader } from "./image-loaders";
+
 describe("Image optimizations applied", () => {
-    test("width is number, create pixel density descriptor 'x'", () => {
-        const imgAttr = getImageAttributes({
-            optimize: true,
-            width: 100,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: undefined,
-            sizes: undefined,
-            quality: 100,
-            loader: cloudflareImageLoader({ resizeOrigin: null }),
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
+  test("width is number, create pixel density descriptor 'x'", () => {
+    const imgAttr = getImageAttributes({
+      optimize: true,
+      width: 100,
+      src: "https://webstudio.is/logo.webp",
+      srcSet: undefined,
+      sizes: undefined,
+      quality: 100,
+      loader: cloudflareImageLoader({ resizeOrigin: null }),
+    });
+
+    expect(imgAttr).toMatchInlineSnapshot(`
       {
         "sizes": undefined,
         "src": "/cdn-cgi/image/width=256,quality=100,format=auto/https://webstudio.is/logo.webp",
         "srcSet": "/cdn-cgi/image/width=128,quality=100,format=auto/https://webstudio.is/logo.webp 1x, /cdn-cgi/image/width=256,quality=100,format=auto/https://webstudio.is/logo.webp 2x",
       }
     `);
+  });
+
+  test("width is undefined, create 'w' descriptor and sizes prop", () => {
+    const imgAttr = getImageAttributes({
+      optimize: true,
+      width: undefined,
+      src: "https://webstudio.is/logo.webp",
+      srcSet: undefined,
+      sizes: undefined,
+      quality: 90,
+      loader: cloudflareImageLoader({ resizeOrigin: null }),
     });
-    test("width is undefined, create 'w' descriptor and sizes prop", () => {
-        const imgAttr = getImageAttributes({
-            optimize: true,
-            width: undefined,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: undefined,
-            sizes: undefined,
-            quality: 90,
-            loader: cloudflareImageLoader({ resizeOrigin: null }),
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
+
+    expect(imgAttr).toMatchInlineSnapshot(`
       {
         "sizes": "(min-width: 1280px) 50vw, 100vw",
         "src": "/cdn-cgi/image/width=3840,quality=90,format=auto/https://webstudio.is/logo.webp",
         "srcSet": "/cdn-cgi/image/width=384,quality=90,format=auto/https://webstudio.is/logo.webp 384w, /cdn-cgi/image/width=640,quality=90,format=auto/https://webstudio.is/logo.webp 640w, /cdn-cgi/image/width=750,quality=90,format=auto/https://webstudio.is/logo.webp 750w, /cdn-cgi/image/width=828,quality=90,format=auto/https://webstudio.is/logo.webp 828w, /cdn-cgi/image/width=1080,quality=90,format=auto/https://webstudio.is/logo.webp 1080w, /cdn-cgi/image/width=1200,quality=90,format=auto/https://webstudio.is/logo.webp 1200w, /cdn-cgi/image/width=1920,quality=90,format=auto/https://webstudio.is/logo.webp 1920w, /cdn-cgi/image/width=2048,quality=90,format=auto/https://webstudio.is/logo.webp 2048w, /cdn-cgi/image/width=3840,quality=90,format=auto/https://webstudio.is/logo.webp 3840w",
       }
     `);
+  });
+
+  test("width is undefined and size defined, creates 'w' descriptor and use input sizes props", () => {
+    const imgAttr = getImageAttributes({
+      optimize: true,
+      width: undefined,
+      src: "https://webstudio.is/logo.webp",
+      srcSet: undefined,
+      sizes: "100vw",
+      quality: 70,
+      loader: cloudflareImageLoader({ resizeOrigin: null }),
     });
-    test("width is undefined and size defined, creates 'w' descriptor and use input sizes props", () => {
-        const imgAttr = getImageAttributes({
-            optimize: true,
-            width: undefined,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: undefined,
-            sizes: "100vw",
-            quality: 70,
-            loader: cloudflareImageLoader({ resizeOrigin: null }),
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
+
+    expect(imgAttr).toMatchInlineSnapshot(`
       {
         "sizes": "100vw",
         "src": "/cdn-cgi/image/width=3840,quality=70,format=auto/https://webstudio.is/logo.webp",
         "srcSet": "/cdn-cgi/image/width=640,quality=70,format=auto/https://webstudio.is/logo.webp 640w, /cdn-cgi/image/width=750,quality=70,format=auto/https://webstudio.is/logo.webp 750w, /cdn-cgi/image/width=828,quality=70,format=auto/https://webstudio.is/logo.webp 828w, /cdn-cgi/image/width=1080,quality=70,format=auto/https://webstudio.is/logo.webp 1080w, /cdn-cgi/image/width=1200,quality=70,format=auto/https://webstudio.is/logo.webp 1200w, /cdn-cgi/image/width=1920,quality=70,format=auto/https://webstudio.is/logo.webp 1920w, /cdn-cgi/image/width=2048,quality=70,format=auto/https://webstudio.is/logo.webp 2048w, /cdn-cgi/image/width=3840,quality=70,format=auto/https://webstudio.is/logo.webp 3840w",
       }
     `);
+  });
+
+  test("width is undefined and size defined, creates 'w' descriptor and use input sizes props, resizeOrigin defined", () => {
+    const imgAttr = getImageAttributes({
+      optimize: true,
+      width: undefined,
+      src: "https://webstudio.is/logo.webp",
+      srcSet: undefined,
+      sizes: "100vw",
+      quality: 70,
+      loader: cloudflareImageLoader({
+        resizeOrigin: "https://resize-origin.is",
+      }),
     });
-    test("width is undefined and size defined, creates 'w' descriptor and use input sizes props, resizeOrigin defined", () => {
-        const imgAttr = getImageAttributes({
-            optimize: true,
-            width: undefined,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: undefined,
-            sizes: "100vw",
-            quality: 70,
-            loader: cloudflareImageLoader({
-                resizeOrigin: "https://resize-origin.is",
-            }),
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
+
+    expect(imgAttr).toMatchInlineSnapshot(`
       {
         "sizes": "100vw",
         "src": "https://resize-origin.is/cdn-cgi/image/width=3840,quality=70,format=auto/https://webstudio.is/logo.webp",
         "srcSet": "https://resize-origin.is/cdn-cgi/image/width=640,quality=70,format=auto/https://webstudio.is/logo.webp 640w, https://resize-origin.is/cdn-cgi/image/width=750,quality=70,format=auto/https://webstudio.is/logo.webp 750w, https://resize-origin.is/cdn-cgi/image/width=828,quality=70,format=auto/https://webstudio.is/logo.webp 828w, https://resize-origin.is/cdn-cgi/image/width=1080,quality=70,format=auto/https://webstudio.is/logo.webp 1080w, https://resize-origin.is/cdn-cgi/image/width=1200,quality=70,format=auto/https://webstudio.is/logo.webp 1200w, https://resize-origin.is/cdn-cgi/image/width=1920,quality=70,format=auto/https://webstudio.is/logo.webp 1920w, https://resize-origin.is/cdn-cgi/image/width=2048,quality=70,format=auto/https://webstudio.is/logo.webp 2048w, https://resize-origin.is/cdn-cgi/image/width=3840,quality=70,format=auto/https://webstudio.is/logo.webp 3840w",
       }
     `);
+  });
+
+  test("custom loader", () => {
+    const imgAttr = getImageAttributes({
+      optimize: true,
+      width: undefined,
+      src: "https://webstudio.is/logo.webp",
+      srcSet: undefined,
+      sizes: "100vw",
+      quality: 70,
+      loader: ({ width, src, quality }) =>
+        `${new URL(src).pathname}?w=${width}&q=${quality}`,
     });
-    test("custom loader", () => {
-        const imgAttr = getImageAttributes({
-            optimize: true,
-            width: undefined,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: undefined,
-            sizes: "100vw",
-            quality: 70,
-            loader: ({ width, src, quality }) => `${new URL(src).pathname}?w=${width}&q=${quality}`,
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
+
+    expect(imgAttr).toMatchInlineSnapshot(`
       {
         "sizes": "100vw",
         "src": "/logo.webp?w=3840&q=70",
         "srcSet": "/logo.webp?w=640&q=70 640w, /logo.webp?w=750&q=70 750w, /logo.webp?w=828&q=70 828w, /logo.webp?w=1080&q=70 1080w, /logo.webp?w=1200&q=70 1200w, /logo.webp?w=1920&q=70 1920w, /logo.webp?w=2048&q=70 2048w, /logo.webp?w=3840&q=70 3840w",
       }
     `);
-    });
+  });
 });
+
 describe("Image optimizations not applied", () => {
-    test("optimize is false", () => {
-        const imgAttr = getImageAttributes({
-            optimize: false,
-            width: 100,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: undefined,
-            sizes: undefined,
-            quality: 100,
-            loader: cloudflareImageLoader({ resizeOrigin: null }),
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
+  test("optimize is false", () => {
+    const imgAttr = getImageAttributes({
+      optimize: false,
+      width: 100,
+      src: "https://webstudio.is/logo.webp",
+      srcSet: undefined,
+      sizes: undefined,
+      quality: 100,
+      loader: cloudflareImageLoader({ resizeOrigin: null }),
+    });
+
+    expect(imgAttr).toMatchInlineSnapshot(`
       {
         "src": "https://webstudio.is/logo.webp",
       }
     `);
+  });
+
+  test("srcSet is defined", () => {
+    const imgAttr = getImageAttributes({
+      optimize: true,
+      width: 100,
+      src: "https://webstudio.is/logo.webp",
+      srcSet: "user-defined-srcset",
+      sizes: undefined,
+      quality: 100,
+      loader: cloudflareImageLoader({ resizeOrigin: null }),
     });
-    test("srcSet is defined", () => {
-        const imgAttr = getImageAttributes({
-            optimize: true,
-            width: 100,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: "user-defined-srcset",
-            sizes: undefined,
-            quality: 100,
-            loader: cloudflareImageLoader({ resizeOrigin: null }),
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
+
+    expect(imgAttr).toMatchInlineSnapshot(`
       {
         "src": "https://webstudio.is/logo.webp",
         "srcSet": "user-defined-srcset",
       }
     `);
+  });
+
+  test("src is empty", () => {
+    const imgAttr = getImageAttributes({
+      optimize: true,
+      width: 100,
+      src: "",
+      srcSet: undefined,
+      sizes: undefined,
+      quality: 100,
+      loader: cloudflareImageLoader({ resizeOrigin: null }),
     });
-    test("src is empty", () => {
-        const imgAttr = getImageAttributes({
-            optimize: true,
-            width: 100,
-            src: "",
-            srcSet: undefined,
-            sizes: undefined,
-            quality: 100,
-            loader: cloudflareImageLoader({ resizeOrigin: null }),
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`null`);
-    });
-    test("src is undefined", () => {
-        const imgAttr = getImageAttributes({
-            optimize: true,
-            width: 100,
-            src: undefined,
-            srcSet: undefined,
-            sizes: undefined,
-            quality: 100,
-            loader: cloudflareImageLoader({ resizeOrigin: null }),
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`null`);
+
+    expect(imgAttr).toMatchInlineSnapshot(`null`);
+  });
+
+  test("src is undefined", () => {
+    const imgAttr = getImageAttributes({
+      optimize: true,
+      width: 100,
+      src: undefined,
+      srcSet: undefined,
+      sizes: undefined,
+      quality: 100,
+      loader: cloudflareImageLoader({ resizeOrigin: null }),
     });
+
+    expect(imgAttr).toMatchInlineSnapshot(`null`);
+  });
 });

package/{lib/cjs/image-optimize.d.ts → src/image-optimize.ts}

@@ -85,23 +85,176 @@
  * DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
  * ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  **/
-export declare type ImageLoader = (props: {
-    width: number;
-    quality: number;
-    src: string;
+
+export type ImageLoader = (props: {
+  width: number;
+  quality: number;
+  src: string;
 }) => string;
-export declare const allSizes: number[];
-export declare const getImageAttributes: (props: {
-    src: string | undefined;
-    srcSet: string | undefined;
-    sizes: string | undefined;
-    width: string | number | undefined;
-    quality: string | number | undefined;
-    loader: ImageLoader;
-    optimize: boolean;
-}) => {
-    src: string;
-    srcSet?: string;
-    sizes?: string;
-} | null;
-//# sourceMappingURL=image-optimize.d.ts.map
+
+/**
+ * max(...imageSizes) must be less then min(...deviceSizes)
+ **/
+const imageSizes = [16, 32, 48, 64, 96, 128, 256, 384];
+const deviceSizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
+
+export const allSizes = [...imageSizes, ...deviceSizes];
+
+/**
+ * https://github.com/vercel/next.js/blob/canary/packages/next/client/image.tsx
+ **/
+const getWidths = (
+  width: number | undefined,
+  sizes: string | undefined
+): { widths: number[]; kind: "w" | "x" } => {
+  if (sizes) {
+    // Find all the "vw" percent sizes used in the sizes prop
+    const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
+    const percentSizes = [];
+    for (let match; (match = viewportWidthRe.exec(sizes)); match) {
+      percentSizes.push(parseInt(match[2], 10));
+    }
+
+    if (percentSizes.length) {
+      // we can exclude from srcSets all images which are smaller than the smallestRatio * smallesDeviceSize
+      const smallestRatio = Math.min(...percentSizes) * 0.01;
+      return {
+        widths: allSizes.filter((s) => s >= deviceSizes[0] * smallestRatio),
+        kind: "w",
+      };
+    }
+    return { widths: allSizes, kind: "w" };
+  }
+
+  if (width == null) {
+    return { widths: deviceSizes, kind: "w" };
+  }
+
+  const widths = [
+    ...new Set(
+      [width, width * 2].map(
+        (w) => allSizes.find((p) => p >= w) || allSizes[allSizes.length - 1]
+      )
+    ),
+  ];
+  return { widths, kind: "x" };
+};
+
+const generateImgAttrs = ({
+  src,
+  width,
+  quality,
+  sizes,
+  loader,
+}: {
+  src: string;
+  quality: number;
+  width: number | undefined;
+  sizes: string | undefined;
+  loader: ImageLoader;
+}): {
+  src: string;
+  srcSet: string | undefined;
+  sizes: string | undefined;
+} => {
+  const { widths, kind } = getWidths(width, sizes);
+
+  return {
+    sizes: !sizes && kind === "w" ? "100vw" : sizes,
+    srcSet: widths
+      .map(
+        (w, i) =>
+          `${loader({ src, quality, width: w })} ${
+            kind === "w" ? w : i + 1
+          }${kind}`
+      )
+      .join(", "),
+
+    // Must be last, to prevent Safari to load images twice
+    src: loader({
+      src,
+      quality,
+      width: widths[widths.length - 1],
+    }),
+  };
+};
+
+const getInt = (value: unknown): number | undefined => {
+  if (typeof value === "number") {
+    return Math.round(value);
+  }
+
+  if (typeof value === "string") {
+    const vNum = Number.parseFloat(value);
+
+    if (!Number.isNaN(vNum)) {
+      return Math.round(vNum);
+    }
+  }
+
+  return undefined;
+};
+
+/**
+ * DEFAULT_SIZES Just an assumption that most images (except hero and icons) are 100% wide on mobile and 50% on desktop.
+ * For icons width are usually set explicitly so DEFAULT_SIZES is not applied.
+ * For hero images, we can allow in UI to select sizes=100vw explicitly.
+ * Anyway, the best would be to calculate this based on canvas data from different breakpoints.
+ * See ../component-utils/image for detailed description
+ **/
+const DEFAULT_SIZES = "(min-width: 1280px) 50vw, 100vw";
+
+const DEFAULT_QUALITY = 80;
+
+export const getImageAttributes = (props: {
+  src: string | undefined;
+  srcSet: string | undefined;
+  sizes: string | undefined;
+  width: string | number | undefined;
+  quality: string | number | undefined;
+  loader: ImageLoader;
+  optimize: boolean;
+}): {
+  src: string;
+  srcSet?: string;
+  sizes?: string;
+} | null => {
+  const width = getInt(props.width);
+  const quality = Math.max(
+    Math.min(getInt(props.quality) ?? DEFAULT_QUALITY, 100),
+    0
+  );
+
+  if (props.src != null && props.src !== "") {
+    if (props.srcSet == null && props.optimize) {
+      const sizes =
+        props.sizes ?? (props.width == null ? DEFAULT_SIZES : undefined);
+
+      return generateImgAttrs({
+        src: props.src,
+        width,
+        quality,
+        sizes,
+        loader: props.loader,
+      });
+    }
+
+    const resAttrs: {
+      src: string;
+      srcSet?: string;
+      sizes?: string;
+    } = { src: props.src };
+
+    if (props.srcSet != null) {
+      resAttrs.srcSet = props.srcSet;
+    }
+
+    if (props.sizes != null) {
+      resAttrs.sizes = props.sizes;
+    }
+
+    return resAttrs;
+  }
+
+  return null;
+};

package/src/image.tsx

@@ -0,0 +1,74 @@
+import { forwardRef, type ElementRef, type ComponentProps } from "react";
+import { getImageAttributes, type ImageLoader } from "./image-optimize";
+
+const defaultTag = "img";
+
+type ImageProps = ComponentProps<typeof defaultTag> & {
+  quality?: number;
+  optimize?: boolean;
+  loader: ImageLoader;
+};
+
+export const Image = forwardRef<ElementRef<typeof defaultTag>, ImageProps>(
+  (
+    {
+      quality,
+      loader,
+      optimize = true,
+      loading = "lazy",
+      decoding = "async",
+      ...imageProps
+    },
+    ref
+  ) => {
+    const imageAttributes = getImageAttributes({
+      src: imageProps.src,
+      srcSet: imageProps.srcSet,
+      sizes: imageProps.sizes,
+      width: imageProps.width,
+      quality,
+      loader,
+      optimize,
+    }) ?? { src: imagePlaceholderSvg };
+
+    return (
+      <img
+        {...imageProps}
+        {...imageAttributes}
+        decoding={decoding}
+        loading={loading}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Image.defaultProps = {
+  src: "",
+};
+
+Image.displayName = "Image";
+
+const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
+  width="140"
+  height="140"
+  viewBox="0 0 600 600"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  >
+  <rect width="600" height="600" fill="#CCCCCC" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M450 170H150C141.716 170 135 176.716 135 185V415C135 423.284 141.716 430 150 430H450C458.284 430 465 423.284 465 415V185C465 176.716 458.284 170 450 170ZM150 145C127.909 145 110 162.909 110 185V415C110 437.091 127.909 455 150 455H450C472.091 455 490 437.091 490 415V185C490 162.909 472.091 145 450 145H150Z"
+    fill="#A2A2A2"
+  />
+  <path
+    d="M237.135 235.012C237.135 255.723 220.345 272.512 199.635 272.512C178.924 272.512 162.135 255.723 162.135 235.012C162.135 214.301 178.924 197.512 199.635 197.512C220.345 197.512 237.135 214.301 237.135 235.012Z"
+    fill="#A2A2A2"
+  />
+  <path
+    d="M160 405V367.205L221.609 306.364L256.552 338.628L358.161 234L440 316.043V405H160Z"
+    fill="#A2A2A2"
+  />
+</svg>`)}`;

package/{lib/cjs/index.d.ts → src/index.ts}

@@ -2,4 +2,3 @@ export { Image } from "./image";
 export type { ImageLoader } from "./image-optimize";
 export * as loaders from "./image-loaders";
 export { default as imageProps } from "./__generated__/image.props.json";
-//# sourceMappingURL=index.d.ts.map

package/lib/cjs/image-dev.stories.cjs

@@ -1,77 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeroImage = exports.FillParentImage = exports.AspectRatioImage = exports.UnknownWidthImage = exports.FixedWidthImageCover = exports.FixedWidthImage = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const _1 = require("./");
-// to not allow include local assets everywhere, just enable it for this file
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-const logo_webp_1 = __importDefault(require("../storybook-assets/logo.webp"));
-exports.default = {
-    title: "Components/ImageDev",
-};
-/**
- * In case you need to test img with real cloudflare trasforms
- * set  USE_CLOUDFLARE_IMAGE_TRANSFORM = true
- **/
-const USE_CLOUDFLARE_IMAGE_TRANSFORM = false;
-// For cloudflare image transform testing, logo should be the most consistent image on the site
-const REMOTE_SELF_DOMAIN_IMAGE = "https://webstudio.is/logo.webp";
-const imageSrc = USE_CLOUDFLARE_IMAGE_TRANSFORM
-    ? REMOTE_SELF_DOMAIN_IMAGE
-    : logo_webp_1.default;
-const imageLoader = USE_CLOUDFLARE_IMAGE_TRANSFORM
-    ? _1.loaders.cloudflareImageLoader({ resizeOrigin: "https://webstudio.is" })
-    : _1.loaders.localImageLoader();
-const ImageBase = (args) => {
-    const style = {
-        maxWidth: "100%",
-        display: "block",
-        ...args.style,
-    };
-    return ((0, jsx_runtime_1.jsx)(_1.Image, { ...args, optimize: true, loader: imageLoader, style: style }));
-};
-/**
- * Load images depending on image width and device per pixel ratio.
- **/
-const FixedWidthImage = () => ((0, jsx_runtime_1.jsx)(ImageBase, { src: imageSrc, width: "300", height: "400" }));
-exports.FixedWidthImage = FixedWidthImage;
-/**
- * Preserve ratio using object-fit: cover. Load images depending on image width and device per pixel ratio.
- **/
-const FixedWidthImageCover = () => ((0, jsx_runtime_1.jsx)(ImageBase, { src: imageSrc, width: "300", height: "400", style: { objectFit: "cover" } }));
-exports.FixedWidthImageCover = FixedWidthImageCover;
-/**
- * Load images depending on the viewport width.
- **/
-const UnknownWidthImage = () => (0, jsx_runtime_1.jsx)(ImageBase, { src: imageSrc });
-exports.UnknownWidthImage = UnknownWidthImage;
-/**
- * Fit width of the parent container, has own aspect-ratio and object-fit=cover.
- * Load images depending on the viewport width.
- **/
-const AspectRatioImage = () => ((0, jsx_runtime_1.jsx)("div", { style: { width: "50%" }, children: (0, jsx_runtime_1.jsx)(ImageBase, { src: imageSrc, style: { aspectRatio: "2/1", objectFit: "cover", width: "100%" } }) }));
-exports.AspectRatioImage = AspectRatioImage;
-/**
- * Fill width and height of the relative parent container, object-fit=cover. Load images depending on the viewport width.
- **/
-const FillParentImage = () => ((0, jsx_runtime_1.jsx)("div", { style: { width: "50%", aspectRatio: "2/1", position: "relative" }, children: (0, jsx_runtime_1.jsx)(ImageBase, { src: imageSrc, style: {
-            objectFit: "cover",
-            position: "absolute",
-            width: "100%",
-            height: "100%",
-        } }) }));
-exports.FillParentImage = FillParentImage;
-/**
- * "sizes" attribute explicitly equal to 100vw allowing to skip the default behavior.
- * See DEFAULT_SIZES in the Image component. Load images depending on the viewport width.
- **/
-const HeroImage = () => ((0, jsx_runtime_1.jsx)(ImageBase, { src: imageSrc, sizes: "100vw", style: {
-        aspectRatio: "3/1",
-        objectFit: "cover",
-        width: "100%",
-    } }));
-exports.HeroImage = HeroImage;