@pylonsync/react 0.22.22 → 0.22.23

package/dist/Image.d.ts

@@ -33,7 +33,8 @@ export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElemen
     quality?: PylonImageQuality;
     /**
      * Override the candidate widths used in `srcset`. By default we
-     * emit 1x and 2x of `width`, capped at 3840px.
+     * emit every allowed width from 256px up to 2x of `width` (rounded
+     * down to an allowed width), plus the 1x width.
      */
     widths?: number[];
     /**
@@ -54,4 +55,19 @@ export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElemen
      */
     unoptimized?: boolean;
 }
+/**
+ * srcset widths for an image displayed at `width` CSS px.
+ *
+ * Every allowed width from MIN_CANDIDATE up to the largest one that does
+ * not exceed 2x, plus the 1x width. The browser then picks by `sizes` and
+ * device pixel ratio, so a small slot gets a small file.
+ *
+ * The 2x candidate rounds DOWN. Rounding up turned a 1200px image's 2x
+ * (2400) into a 3840px request, larger than most sources and several
+ * times the bytes.
+ */
+export declare function imageCandidateWidths(width: number, widths?: number[]): {
+    widths: number[];
+    oneX: number;
+};
 export declare function Image({ src, width, height, alt, quality, widths, sizes, priority, unoptimized, className, style, ...rest }: ImageProps): React.JSX.Element;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.22.22",
+  "version": "0.22.23",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",
@@ -14,9 +14,9 @@
     "prepack": "bun run build"
   },
   "dependencies": {
-    "@pylonsync/realtime": "0.22.22",
-    "@pylonsync/sdk": "0.22.22",
-    "@pylonsync/sync": "0.22.22"
+    "@pylonsync/realtime": "0.22.23",
+    "@pylonsync/sdk": "0.22.23",
+    "@pylonsync/sync": "0.22.23"
   },
   "peerDependencies": {
     "react": ">=19.0.0"

package/src/Image.test.ts

@@ -0,0 +1,31 @@
+import { expect, test } from "bun:test";
+import { imageCandidateWidths } from "./Image";
+
+test("2x rounds down to an allowed width instead of jumping to 3840", () => {
+  const { widths, oneX } = imageCandidateWidths(1200);
+  expect(oneX).toBe(1200);
+  expect(Math.max(...widths)).toBe(2048);
+  expect(widths).not.toContain(3840);
+});
+
+test("offers smaller widths so `sizes` can pick a small file", () => {
+  const { widths } = imageCandidateWidths(452);
+  expect(widths).toEqual([256, 384, 640, 750, 828]);
+});
+
+test("the 1x width is always offered, even when it is above 2x of a tiny image", () => {
+  const { widths, oneX } = imageCandidateWidths(20);
+  expect(oneX).toBe(32);
+  expect(widths).toContain(32);
+});
+
+test("very large images cap at 3840", () => {
+  const { widths, oneX } = imageCandidateWidths(5000);
+  expect(oneX).toBe(3840);
+  expect(Math.max(...widths)).toBe(3840);
+});
+
+test("explicit widths are used as given, deduplicated and sorted", () => {
+  expect(imageCandidateWidths(500, [1080, 640, 640]).widths).toEqual([640, 1080]);
+  expect(imageCandidateWidths(500, [1080, 640]).oneX).toBe(640);
+});

package/src/Image.tsx

@@ -65,7 +65,8 @@ export interface ImageProps
   quality?: PylonImageQuality;
   /**
    * Override the candidate widths used in `srcset`. By default we
-   * emit 1x and 2x of `width`, capped at 3840px.
+   * emit every allowed width from 256px up to 2x of `width` (rounded
+   * down to an allowed width), plus the 1x width.
    */
   widths?: number[];
   /**
@@ -115,6 +116,36 @@ function optimizedUrl(src: string, width: number, quality: number): string {
   return `/_pylon/image?src=${encodeURIComponent(src)}&w=${w}&q=${q}`;
 }
 
+/** Smallest ladder width offered in a default srcset. */
+const MIN_CANDIDATE = 256;
+
+/**
+ * srcset widths for an image displayed at `width` CSS px.
+ *
+ * Every allowed width from MIN_CANDIDATE up to the largest one that does
+ * not exceed 2x, plus the 1x width. The browser then picks by `sizes` and
+ * device pixel ratio, so a small slot gets a small file.
+ *
+ * The 2x candidate rounds DOWN. Rounding up turned a 1200px image's 2x
+ * (2400) into a 3840px request, larger than most sources and several
+ * times the bytes.
+ */
+export function imageCandidateWidths(
+  width: number,
+  widths?: number[],
+): { widths: number[]; oneX: number } {
+  if (widths && widths.length > 0) {
+    const list = Array.from(new Set(widths.map((w) => Math.round(w)))).sort((a, b) => a - b);
+    return { widths: list, oneX: list.find((w) => w >= width) ?? list[list.length - 1] };
+  }
+  const oneX = DEFAULT_WIDTHS.find((w) => w >= width) ?? MAX_WIDTH;
+  const twoXCap = Math.min(width * 2, MAX_WIDTH);
+  const list = DEFAULT_WIDTHS.filter(
+    (w) => w >= Math.min(MIN_CANDIDATE, oneX) && w <= Math.max(oneX, twoXCap),
+  );
+  return { widths: list, oneX };
+}
+
 export function Image({
   src,
   width,
@@ -148,25 +179,10 @@ export function Image({
     );
   }
 
-  // Candidate widths: explicit list, else default ladder filtered
-  // to "smallest that satisfies 1x" through "smallest that
-  // satisfies 2x", picked from DEFAULT_WIDTHS. Picking from the
-  // ladder (rather than [width, width*2]) keeps URLs in the
-  // server's allowed-widths set so we never get back a 400.
-  const candidates = (() => {
-    if (widths && widths.length > 0) {
-      return Array.from(new Set(widths.map((w) => Math.round(w)))).sort(
-        (a, b) => a - b,
-      );
-    }
-    const oneX = DEFAULT_WIDTHS.find((w) => w >= width) ?? MAX_WIDTH;
-    const targetTwoX = Math.min(width * 2, MAX_WIDTH);
-    const twoX = DEFAULT_WIDTHS.find((w) => w >= targetTwoX) ?? MAX_WIDTH;
-    return Array.from(new Set([oneX, twoX])).sort((a, b) => a - b);
-  })();
-
-  const baseSrc = optimizedUrl(src, candidates[candidates.length - 1], quality);
-  const srcSet = candidates
+  const candidates = imageCandidateWidths(width, widths);
+  // The 1x candidate is the fallback for browsers that ignore srcset.
+  const baseSrc = optimizedUrl(src, candidates.oneX, quality);
+  const srcSet = candidates.widths
     .map((w) => `${optimizedUrl(src, w, quality)} ${w}w`)
     .join(", ");