Compress Images with Salesforce Function using Node.js

About

This Salesforce function convert large images in common formats to smaller, web-friendly JPEG, PNG, WebP, GIF and AVIF images of varying dimensions. It uses Sharp Node.js module to convert images of the most diverse formats and varied dimensions to a smaller size, without having to worry about the color space, channels and alpha transparency, because all of these are treated correctly.

DemoVideo.mp4

Installation

Prerequisites

Salesforce Resources

1. Sign up for a Salesforce Functions trial org.
2. Enable Dev Hub in your org.
3. Install the Salesforce CLI.
4. Authorize your Dev Hub in the Salesforce CLI.
5. Get Started | Salesforce Functions

sharp - High performance Node.js image processing

Sharp is high speed Node.js module to convert large images in common formats to smaller, web-friendly JPEG, PNG, WebP, GIF and AVIF images of varying dimensions. Colour spaces, embedded ICC profiles and alpha transparency channels are all handled correctly. Lanczos resampling ensures quality is not sacrificed for speed.

As well as image resizing, operations such as rotation, extraction, compositing and gamma correction are available.

This sample function support jpg, jpeg and png compression. You can explore more options here.

Deploy and configure the Salesforce Function

Deploy source to org:

1. Clone the repository:

   git clone https://github.com/thatherahere/sf-image-compression-function.git
   cd sf-image-compression-function

2. Login to your Salesforce Function trail Org.

3. Deploy code to your trail org:

   sfdx force:source:deploy -x manifest/package.xml -l RunSpecifiedTests -r ContentDocumentLinkTriggerTest

Function Deployment to compute environment:

Follow these steps to deploy your function to a compute environment:

1. Log in to Salesforce Functions (you may have to repeat this command later as this will eventually time out)

   sf login functions

2. Create a compute environment:

   sf env create compute -o sf_img_prcess_org -a stimgenv

3. Deploy the Salesforce Function:

   cd functions/sfimagecompression
   sf deploy functions -o sf_img_prcess_org

4. Open the org:

   sfdx force:org:open

5. Navigate to Contacts tab --> Open any Contact record --> Navigate to related list --> Files/Notes & Attachments related list --> Upload image using Upload Files button --> Compare the file size and quality after upload.

Troubleshooting

1. While creating the compute environment if you see below error, Check your sfdx-project.json at the root level. The name of the project must not have -. Please change it to underscore and it should work.

   Creating compute environment for org ID 00DXXXXXXXXXXXXXXX... failed
   Error: Request failed with status code 422
   

2. Monitor Salesforce Function's logs by running:

   sf env log tail -e stimgenv

3. Monitor Salesforce logs by running:

   sfdx force:apex:log:tail -c

Best Practice

Release the Compute Environments: If you no longer need a compute environment, or you wish to disconnect a connected org, use the sf env delete command with the compute environment alias to remove the compute environment and let someone else use these resources for practice :) :

sf env delete -e stimgenv