Compress images prior to uploading to Bluesky

packages/syndicator-bluesky/lib/bluesky.js

@@ -4,6 +4,7 @@ import { getCanonicalUrl, isSameOrigin } from "@indiekit/util";
 
 import {
   createRichText,
+  getPostImage,
   getPostText,
   getPostParts,
   uriToPostUrl,
@@ -184,9 +185,22 @@ export class Bluesky {
         throw await IndiekitError.fromFetch(mediaResponse);
       }
 
-      const blob = await mediaResponse.blob();
+      let blob = await mediaResponse.blob();
+      let encoding = mediaResponse.headers.get("Content-Type");
+
+      // Compress image to meet maximum file size limit
+      if (encoding?.startsWith("image/")) {
+        const buffer = Buffer.from(await blob.arrayBuffer());
+        const image = await getPostImage(buffer, encoding);
+
+        blob = new Blob([new Uint8Array(image.buffer)], {
+          type: image.mimeType,
+        });
+        encoding = image.mimeType;
+      }
+
       const response = await client.com.atproto.repo.uploadBlob(blob, {
-        encoding: mediaResponse.headers.get("Content-Type"),
+        encoding,
       });
 
       return response.data.blob;

packages/syndicator-bluesky/lib/utils.js

@@ -1,6 +1,7 @@
 import { RichText } from "@atproto/api";
 import brevity from "brevity";
 import { htmlToText } from "html-to-text";
+import sharp from "sharp";
 
 const AT_URI = /at:\/\/(?<did>did:[^/]+)\/(?<type>[^/]+)\/(?<rkey>[^/]+)/;
 
@@ -82,6 +83,42 @@ export const getPostText = (properties, includePermalink) => {
   return text;
 };
 
+/**
+ * Constrain image buffer to be under 1MB
+ * @param {Buffer} buffer - Image buffer
+ * @param {number} maxBytes - Maximum byte length
+ * @param {number} [quality] - Image quality
+ * @returns {Promise<Buffer>} Compressed image
+ */
+export async function constrainImage(buffer, maxBytes, quality = 90) {
+  const compressed = await sharp(buffer).jpeg({ quality }).toBuffer();
+
+  if (compressed.byteLength > maxBytes) {
+    return constrainImage(buffer, maxBytes, quality - 5);
+  }
+
+  return compressed;
+}
+
+/**
+ * Compress image buffer to be under 1MB for Bluesky
+ * @param {Buffer} buffer - Image buffer
+ * @param {string} mimeType - Original MIME type
+ * @returns {Promise<{buffer: Buffer, mimeType: string}>} Compressed image
+ */
+export async function getPostImage(buffer, mimeType) {
+  const MAX_SIZE = 1024 * 1024; // 1MB
+
+  // If file size already under 1MB, return unchanged
+  if (buffer.length < MAX_SIZE) {
+    return { buffer, mimeType };
+  }
+
+  const compressed = await constrainImage(buffer, MAX_SIZE);
+
+  return { buffer: compressed, mimeType: "image/jpeg" };
+}
+
 /**
  * Convert HTML to plain text, appending last link href if present
  * @param {string} html - HTML

packages/syndicator-bluesky/package.json

@@ -39,7 +39,8 @@
     "@indiekit/error": "^1.0.0-beta.21",
     "@indiekit/util": "^1.0.0-beta.21",
     "brevity": "^0.2.9",
-    "html-to-text": "^9.0.0"
+    "html-to-text": "^9.0.0",
+    "sharp": "^0.34.5"
   },
   "publishConfig": {
     "access": "public"

packages/syndicator-bluesky/test/unit/utils.js

@@ -3,18 +3,37 @@ import { after, before, describe, it } from "node:test";
 
 import { TestNetworkNoAppView } from "@atproto/dev-env";
 import { getFixture } from "@indiekit-test/fixtures";
+import sharp from "sharp";
 
 import {
   createRichText,
+  constrainImage,
+  getPostImage,
   getPostParts,
   getPostText,
   htmlToStatusText,
   uriToPostUrl,
 } from "../../lib/utils.js";
 
-describe("syndicator-bluesky/lib/utils", () => {
+describe("syndicator-bluesky/lib/utils", async () => {
   let network;
 
+  const largeImage = await sharp({
+    create: {
+      width: 640,
+      height: 640,
+      channels: 4,
+      background: { r: 255, g: 128, b: 0, alpha: 1 },
+      noise: {
+        type: "gaussian",
+        mean: 128,
+        sigma: 30,
+      },
+    },
+  })
+    .png()
+    .toBuffer();
+
   before(async () => {
     network = await TestNetworkNoAppView.create({
       dbPostgresSchema: "api_atp_agent",
@@ -45,6 +64,43 @@ describe("syndicator-bluesky/lib/utils", () => {
     ]);
   });
 
+  it("Returns unconstrained image if already small enough", async () => {
+    const maxBytes = 1024 * 1024; // 1MB
+
+    const smallImage = await sharp({
+      create: {
+        width: 100,
+        height: 100,
+        channels: 3,
+        background: { r: 255, g: 0, b: 0 },
+      },
+    })
+      .jpeg({ quality: 90 })
+      .toBuffer();
+
+    const result = await constrainImage(smallImage, maxBytes);
+
+    assert.deepStrictEqual(result, smallImage);
+  });
+
+  it("Compresses image larger than maximum file size", async () => {
+    const maxBytes = 100 * 1024; // 100KB
+    const result = await constrainImage(largeImage, maxBytes, 90);
+    const metadata = await sharp(result).metadata();
+
+    assert.ok(result.byteLength <= maxBytes);
+    assert.strictEqual(metadata.format, "jpeg");
+  });
+
+  it("Gets resized post image", async () => {
+    const result = await getPostImage(largeImage, "image/png");
+    const metadata = await sharp(result.buffer).metadata();
+    const maxBytes = 1024 * 1024; // 1MB
+
+    assert.ok(metadata.size <= maxBytes);
+    assert.equal(result.mimeType, "image/jpeg");
+  });
+
   it("Gets post parts", () => {
     const result = getPostParts(
       "https://bsky.example/profile/did:plc:ix4srp5t7rswkoachemlkzdt/post/3llped5ya3b22",