@webstudio-is/image 0.1.0

package/lib/image-dev.stories.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import type { ComponentMeta, ComponentStory } from "@storybook/react";
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement> & {
+    quality?: number | undefined;
+    optimize?: boolean | undefined;
+    loader: import("./image-optimize").ImageLoader;
+}, "quality" | "loader" | "key" | keyof React.ImgHTMLAttributes<HTMLImageElement> | "optimize"> & React.RefAttributes<HTMLImageElement>>>;
+export default _default;
+/**
+ * Load images depending on image width and device per pixel ratio.
+ **/
+export declare const FixedWidthImage: ComponentStory<React.FunctionComponent>;
+/**
+ * Preserve ratio using object-fit: cover. Load images depending on image width and device per pixel ratio.
+ **/
+export declare const FixedWidthImageCover: ComponentStory<React.FunctionComponent>;
+/**
+ * Load images depending on the viewport width.
+ **/
+export declare const UnknownWidthImage: ComponentStory<React.FunctionComponent>;
+/**
+ * Fit width of the parent container, has own aspect-ratio and object-fit=cover.
+ * Load images depending on the viewport width.
+ **/
+export declare const AspectRatioImage: ComponentStory<React.FunctionComponent>;
+/**
+ * Fill width and height of the relative parent container, object-fit=cover. Load images depending on the viewport width.
+ **/
+export declare const FillParentImage: ComponentStory<React.FunctionComponent>;
+/**
+ * "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.
+ **/
+export declare const HeroImage: ComponentStory<React.FunctionComponent>;
+//# sourceMappingURL=image-dev.stories.d.ts.map

package/lib/image-dev.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-dev.stories.d.ts","sourceRoot":"","sources":["../src/image-dev.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;;;;;;AAQtE,wBAE0C;AA0C1C;;IAEI;AACJ,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAEnE,CAAC;AAEF;;IAEI;AACJ,eAAO,MAAM,oBAAoB,EAAE,cAAc,CAC/C,KAAK,CAAC,iBAAiB,CAQxB,CAAC;AAEF;;IAEI;AACJ,eAAO,MAAM,iBAAiB,EAAE,cAAc,CAC5C,KAAK,CAAC,iBAAiB,CACa,CAAC;AAEvC;;;IAGI;AACJ,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAOpE,CAAC;AAEF;;IAEI;AACJ,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAYnE,CAAC;AAEF;;;IAGI;AACJ,eAAO,MAAM,SAAS,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAU7D,CAAC"}

package/lib/image-dev.stories.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image as ImagePrimitive, loaders } from "./";
+// to not allow include local assets everywhere, just enable it for this file
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import localLogoImage from "../storybook-assets/logo.webp";
+export 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
+    : localLogoImage;
+const imageLoader = USE_CLOUDFLARE_IMAGE_TRANSFORM
+    ? loaders.cloudflareImageLoader({ resizeOrigin: "https://webstudio.is" })
+    : loaders.localImageLoader();
+const ImageBase = (args) => {
+    const style = {
+        maxWidth: "100%",
+        display: "block",
+        ...args.style,
+    };
+    return (_jsx(ImagePrimitive, { ...args, optimize: true, loader: imageLoader, style: style }));
+};
+/**
+ * Load images depending on image width and device per pixel ratio.
+ **/
+export const FixedWidthImage = () => (_jsx(ImageBase, { src: imageSrc, width: "300", height: "400" }));
+/**
+ * Preserve ratio using object-fit: cover. Load images depending on image width and device per pixel ratio.
+ **/
+export const FixedWidthImageCover = () => (_jsx(ImageBase, { src: imageSrc, width: "300", height: "400", style: { objectFit: "cover" } }));
+/**
+ * Load images depending on the viewport width.
+ **/
+export const UnknownWidthImage = () => _jsx(ImageBase, { src: imageSrc });
+/**
+ * Fit width of the parent container, has own aspect-ratio and object-fit=cover.
+ * Load images depending on the viewport width.
+ **/
+export const AspectRatioImage = () => (_jsx("div", { style: { width: "50%" }, children: _jsx(ImageBase, { src: imageSrc, style: { aspectRatio: "2/1", objectFit: "cover", width: "100%" } }) }));
+/**
+ * Fill width and height of the relative parent container, object-fit=cover. Load images depending on the viewport width.
+ **/
+export const FillParentImage = () => (_jsx("div", { style: { width: "50%", aspectRatio: "2/1", position: "relative" }, children: _jsx(ImageBase, { src: imageSrc, style: {
+            objectFit: "cover",
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+        } }) }));
+/**
+ * "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.
+ **/
+export const HeroImage = () => (_jsx(ImageBase, { src: imageSrc, sizes: "100vw", style: {
+        aspectRatio: "3/1",
+        objectFit: "cover",
+        width: "100%",
+    } }));

package/lib/image-loaders.d.ts

@@ -0,0 +1,14 @@
+import { type ImageLoader } from "./image-optimize";
+export declare type CloudflareImageLoaderOptions = {
+    resizeOrigin?: string | null;
+};
+/**
+ * Default image loader in case of no loader provided
+ * https://developers.cloudflare.com/images/image-resizing/url-format/
+ **/
+export declare const cloudflareImageLoader: (ops: CloudflareImageLoaderOptions | null) => ImageLoader;
+/**
+ * Fake pseudo loader for local testing purposes
+ **/
+export declare const localImageLoader: () => ImageLoader;
+//# sourceMappingURL=image-loaders.d.ts.map

package/lib/image-loaders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-loaders.d.ts","sourceRoot":"","sources":["../src/image-loaders.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE9D,oBAAY,4BAA4B,GAAG;IACzC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF;;;IAGI;AACJ,eAAO,MAAM,qBAAqB,EAAE,CAClC,GAAG,EAAE,4BAA4B,GAAG,IAAI,KACrC,WAoBF,CAAC;AAEJ;;IAEI;AACJ,eAAO,MAAM,gBAAgB,EAAE,MAAM,WAQlC,CAAC"}

package/lib/image-loaders.js

@@ -0,0 +1,31 @@
+import warnOnce from "warn-once";
+import { allSizes } from "./image-optimize";
+/**
+ * Default image loader in case of no loader provided
+ * https://developers.cloudflare.com/images/image-resizing/url-format/
+ **/
+export const cloudflareImageLoader = (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 = () => ({ 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.d.ts

@@ -0,0 +1,107 @@
+/**
+ * # Responsive Image component helpers.
+ *
+ * ## Quick summary about img srcset and sizes attributes:
+ *
+ * There are 2 ways to define what image will be loaded in the img property srcset.
+ *
+ * 1. via pixel density descriptor 'x', like `srcset="photo-small.jpg 1x, photo-medium.jpg 1.5x, photo-huge.jpg 2x"`
+ *   src will be selected depending on `device-pixel-ratio`.
+ *
+ * 2. via viewport width descriptor 'w' and sizes property containing source size descriptors, like
+ *   `srcset="photo-small.jpg 320w, photo-medium.jpg 640w, photo-huge.jpg 1280w"`
+ *   `sizes="(max-width: 600px) 400px, (max-width: 1200px) 70vw, 50vw"`
+ *
+ *   The browser finds the first matching media query from source size descriptors,
+ *   then use source size value to generate internally srcset
+ *   with pixel density descriptors dividing width descriptor value by source size value.
+ *
+ *   Using the example above for viewport width 800px.
+ *   The first matching media query is (max-width: 1200px)
+ *   source size value is 70vw  equal to 800px * 0,7 = 560px
+ *
+ *   browser internal srcset will be (we divide `w` descriptor by source size value):
+ *   photo-small.jpg 320/560x, photo-medium.jpg 640/560x, photo-huge.jpg 1280/560x =>
+ *   photo-small.jpg 0.57x, photo-medium.jpg 1.14x, photo-huge.jpg 2.28x
+ *
+ *   Finally same rules as for pixel density descriptor 'x' are applied.
+ *
+ * ## Algorithm (without optimizations):
+ *
+ * We have a predefined array of all supported image sizes allSizes, this is the real width of an image in pixels.
+ * This is good for caching, as we can cache image with specific width and then use it for different devices.
+ *
+ * > allSizes array is a tradeoff between cache and the best possible image size you deliver to the user.
+ * > If allSizes.length is too small, you will deliver too big images to the user,
+ * > if allSizes.length is too big, you will have many caches misses.
+ *
+ * If img has a defined width property.
+ *   1. find the first value from allSizes which is greater or equal to the width property
+ *   2. use found value to generate srcset with pixel density descriptor 'x'
+ *
+ *
+ * If img has no defined width property.
+ *   1. Generate srcset = allSizes.map((w) => `${getImageSrcAtWidth(w)} ${w}w`)
+ *   2. Use sizes property, or if it is not defined use opinionated DEFAULT_SIZES = "(min-width: 1280px) 50vw, 100vw";
+ *
+ * Optimizations applied now:
+ *
+ * - If the sizes property is defined, we can exclude from `srcsets` all images
+ *   which are smaller than the `smallestRatio * smallesDeviceSize`
+ *
+ * Future (not implemented) optimizations and improvements:
+ *
+ * - Knowing image size on different viewport widths we can provide nondefault sizes property
+ * - Knowledge of Image aspect-ratio would allow cropping images serverside.
+ * - Early hints for high priority images https://blog.cloudflare.com/early-hints/
+ * - Slow networks optimizations
+ * - 404 etc processing with CSS - https://bitsofco.de/styling-broken-images/ (has some opinionated issues) or js solution with custom user fallback.
+ *
+ * # Attributions
+ *
+ * The MIT License (MIT)
+ *
+ * applies to:
+ *
+ * - https://github.com/vercel/next.js, Copyright (c) 2022 Vercel, Inc.
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2022 Vercel, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute,
+ * sublicense, and/or sell copies of the Software, and to permit persons to whom the Software
+ * is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies
+ * or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+ * 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;
+}) => 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

package/lib/image-optimize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-optimize.d.ts","sourceRoot":"","sources":["../src/image-optimize.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsFI;AAEJ,oBAAY,WAAW,GAAG,CAAC,KAAK,EAAE;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;CACb,KAAK,MAAM,CAAC;AAQb,eAAO,MAAM,QAAQ,UAAkC,CAAC;AA4GxD,eAAO,MAAM,kBAAkB,UAAW;IACxC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACrC,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACnB,KAAG;IACF,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAuCH,CAAC"}

package/lib/image-optimize.js

@@ -0,0 +1,183 @@
+/**
+ * # Responsive Image component helpers.
+ *
+ * ## Quick summary about img srcset and sizes attributes:
+ *
+ * There are 2 ways to define what image will be loaded in the img property srcset.
+ *
+ * 1. via pixel density descriptor 'x', like `srcset="photo-small.jpg 1x, photo-medium.jpg 1.5x, photo-huge.jpg 2x"`
+ *   src will be selected depending on `device-pixel-ratio`.
+ *
+ * 2. via viewport width descriptor 'w' and sizes property containing source size descriptors, like
+ *   `srcset="photo-small.jpg 320w, photo-medium.jpg 640w, photo-huge.jpg 1280w"`
+ *   `sizes="(max-width: 600px) 400px, (max-width: 1200px) 70vw, 50vw"`
+ *
+ *   The browser finds the first matching media query from source size descriptors,
+ *   then use source size value to generate internally srcset
+ *   with pixel density descriptors dividing width descriptor value by source size value.
+ *
+ *   Using the example above for viewport width 800px.
+ *   The first matching media query is (max-width: 1200px)
+ *   source size value is 70vw  equal to 800px * 0,7 = 560px
+ *
+ *   browser internal srcset will be (we divide `w` descriptor by source size value):
+ *   photo-small.jpg 320/560x, photo-medium.jpg 640/560x, photo-huge.jpg 1280/560x =>
+ *   photo-small.jpg 0.57x, photo-medium.jpg 1.14x, photo-huge.jpg 2.28x
+ *
+ *   Finally same rules as for pixel density descriptor 'x' are applied.
+ *
+ * ## Algorithm (without optimizations):
+ *
+ * We have a predefined array of all supported image sizes allSizes, this is the real width of an image in pixels.
+ * This is good for caching, as we can cache image with specific width and then use it for different devices.
+ *
+ * > allSizes array is a tradeoff between cache and the best possible image size you deliver to the user.
+ * > If allSizes.length is too small, you will deliver too big images to the user,
+ * > if allSizes.length is too big, you will have many caches misses.
+ *
+ * If img has a defined width property.
+ *   1. find the first value from allSizes which is greater or equal to the width property
+ *   2. use found value to generate srcset with pixel density descriptor 'x'
+ *
+ *
+ * If img has no defined width property.
+ *   1. Generate srcset = allSizes.map((w) => `${getImageSrcAtWidth(w)} ${w}w`)
+ *   2. Use sizes property, or if it is not defined use opinionated DEFAULT_SIZES = "(min-width: 1280px) 50vw, 100vw";
+ *
+ * Optimizations applied now:
+ *
+ * - If the sizes property is defined, we can exclude from `srcsets` all images
+ *   which are smaller than the `smallestRatio * smallesDeviceSize`
+ *
+ * Future (not implemented) optimizations and improvements:
+ *
+ * - Knowing image size on different viewport widths we can provide nondefault sizes property
+ * - Knowledge of Image aspect-ratio would allow cropping images serverside.
+ * - Early hints for high priority images https://blog.cloudflare.com/early-hints/
+ * - Slow networks optimizations
+ * - 404 etc processing with CSS - https://bitsofco.de/styling-broken-images/ (has some opinionated issues) or js solution with custom user fallback.
+ *
+ * # Attributions
+ *
+ * The MIT License (MIT)
+ *
+ * applies to:
+ *
+ * - https://github.com/vercel/next.js, Copyright (c) 2022 Vercel, Inc.
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2022 Vercel, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute,
+ * sublicense, and/or sell copies of the Software, and to permit persons to whom the Software
+ * is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies
+ * or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+ * 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.
+ **/
+/**
+ * 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, sizes) => {
+    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, }) => {
+    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) => {
+    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) => {
+    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: props.src };
+        if (props.srcSet != null) {
+            resAttrs.srcSet = props.srcSet;
+        }
+        if (props.sizes != null) {
+            resAttrs.sizes = props.sizes;
+        }
+        return resAttrs;
+    }
+    return null;
+};

package/lib/image-optimize.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=image-optimize.test.d.ts.map

package/lib/image-optimize.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-optimize.test.d.ts","sourceRoot":"","sources":["../src/image-optimize.test.ts"],"names":[],"mappings":""}

package/lib/image-optimize.test.js

@@ -0,0 +1,155 @@
+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(`
+      {
+        "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 }),
+        });
+        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 }),
+        });
+        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",
+            }),
+        });
+        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}`,
+        });
+        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(`
+      {
+        "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 }),
+        });
+        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 }),
+        });
+        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/image.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentProps } from "react";
+import { type ImageLoader } from "./image-optimize";
+declare const defaultTag = "img";
+declare type ImageProps = ComponentProps<typeof defaultTag> & {
+    quality?: number;
+    optimize?: boolean;
+    loader: ImageLoader;
+};
+export declare const Image: import("react").ForwardRefExoticComponent<Pick<ImageProps, "quality" | "loader" | "key" | keyof import("react").ImgHTMLAttributes<HTMLImageElement> | "optimize"> & import("react").RefAttributes<HTMLImageElement>>;
+export {};
+//# sourceMappingURL=image.d.ts.map

package/lib/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../src/image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAExE,QAAA,MAAM,UAAU,QAAQ,CAAC;AAEzB,aAAK,UAAU,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,GAAG;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,KAAK,sNAmBjB,CAAC"}