Automate image processing on upload

Imagine this: you upload a product photo, walk away, and come back to find it already resized, converted to WebP, and saved in your “optimized” folder. No manual editing. No extra steps. That is exactly what a PixelFiddler workflow does.

A workflow watches for new uploads and processes them automatically. You define the steps once — resize to 1200px wide, convert to WebP at 80% quality, save to a specific folder — and every image you upload from that point forward gets the same treatment, hands-free.

This guide walks you through creating your first workflow from scratch.

Prerequisites

Before you start, make sure you have:

• A PixelFiddler account with at least one space
• A storage already connected (hosted or external)
• At least one image uploaded so you know the process works

Need to set up your storage first? Start here

Step 1: Open the workflow builder

Navigate to Workflows in the sidebar of your space. This is where all your automated pipelines live. If you have not created any workflows yet, the page will be empty.

Click the Create workflow button.

Give your workflow a descriptive name. Something like “resize-for-web” or “optimize-product-photos” works well. The name is just for your reference, so pick whatever helps you remember what this workflow does.

Tip

Use names that describe the end result, not the individual steps. “marketplace-ready” is easier to scan than “resize-convert-save” when you have multiple workflows later on.

Step 2: Understand the canvas

After you name your workflow, the visual editor opens. You will see two main areas:

• Canvas (left side) — This is where you arrange and connect your processing steps
• Side panel (right side) — This is where you configure each step’s settings

The editor starts you off with a File Uploaded trigger node already placed on the canvas. Every workflow begins with a trigger, and right now the only trigger type available is FILE_UPLOADED — which fires whenever a new image lands in your storage.

Your workflow is in DRAFT status at this point. It will not process anything until you enable it later.

Step 3: Configure the trigger

Click on the File Uploaded trigger node on the canvas. Its settings appear in the side panel on the right.

You need to configure two things:

Select which storage to watch. Use the dropdown to pick the storage where you upload your product photos. The workflow will only respond to uploads in this specific storage.

Set a file path pattern (optional). If you want the workflow to process only certain files, enter a pattern. For example, entering *.jpg means the workflow will only fire for JPEG uploads and ignore PNGs or other formats.

Note

If you leave the file path pattern empty, the workflow will process every file uploaded to the selected storage, regardless of format. For your first workflow, leaving it empty is perfectly fine.

Step 4: Add a Transform Image node

Now for the part that does the actual work. You are going to add a node that resizes and optimizes each uploaded image.

1. In the side panel on the right, click Add node
2. From the list of available operations, select Transform Image
3. The node appears on the canvas

Now connect it to the trigger. Drag from the output handle on the File Uploaded node to the input handle on the Transform Image node. A line connects the two, showing that images flow from the trigger into the transform step.

Click on the Transform Image node to open its settings in the side panel. Configure these three options:

• Output format — Select WebP. This modern format produces smaller files than JPEG while keeping the same visual quality, which means faster page loads for your customers.
• Quality — Set this to 80. This is the sweet spot between file size and image clarity for product photos. Your images will look crisp without being unnecessarily large.
• Width — Enter 1200. The height will be calculated automatically to maintain the original aspect ratio, so your images will never look stretched or distorted.

Tip

A width of 1200 pixels works well for most e-commerce product pages. If your marketplace requires a specific size, adjust accordingly. For example, Amazon recommends at least 2000px on the longest side.

Step 5: Add a Save to Storage node

The last step tells PixelFiddler where to put the finished image. Without this, your processed image would have nowhere to go.

1. Click Add node in the side panel
2. Select Save to Storage
3. Connect it to the Transform Image node the same way you connected the previous nodes — drag from output to input

Click the Save to Storage node and configure it:

• Target storage — Select the storage where you want the optimized images saved. This can be the same storage you upload to, or a different one.
• Filename template — Enter {orig_name}-web. The {orig_name} variable preserves the original filename, so a file called “blue-sneaker.jpg” becomes “blue-sneaker-web.webp”. This keeps things organized and avoids overwriting your originals.
• Target directory — Enter optimized/. All processed images will land in this folder, neatly separated from your raw uploads.

Caution

Make sure the target directory and filename template will not overwrite your original images. Using a different folder like “optimized/” or adding a suffix like “-web” to the filename keeps your originals safe.

Step 6: Enable the workflow

Your workflow is complete. The canvas should now show three nodes connected in a chain:

File Uploaded —> Transform Image —> Save to Storage

To activate it, find the Enabled toggle at the top of the editor and switch it on. The workflow status changes from DRAFT to ACTIVE.

From this moment, every image you upload to the selected storage will be automatically resized to 1200px wide, converted to WebP at 80% quality, and saved to your “optimized/” folder.

Step 7: Test your workflow

Time to see it in action. Go to your storage and upload a new product photo — any image will do.

Then check one of these two places to confirm it worked:

The Executions tab. Switch to the Executions tab inside your workflow. You will see a new entry appear with one of the following statuses:

• PENDING — The workflow has received the image and is queued for processing
• RUNNING — Processing is actively happening
• COMPLETED — Everything finished successfully
• FAILED — Something went wrong (click the entry to see the error details)

The target folder. Navigate to the “optimized/” directory in your storage. Your processed image should be there, with the “-web” suffix and .webp extension.

Note

Workflows process images asynchronously, so there may be a few seconds of delay between uploading and seeing the finished result. More complex workflows with multiple steps will naturally take a bit longer.

What you just accomplished

Take a moment to appreciate what is happening now. Every product photo you upload will be automatically optimized for web use — no manual resizing, no format conversion, no dragging files between folders. That is potentially hours saved every week if you list products regularly.

And this is just a three-step workflow. You can add more nodes to remove backgrounds, apply watermarks, resize for multiple marketplaces, or route images based on file type — all in a single pipeline.

Next steps

Now that you have a working workflow, explore what else you can automate:

Explore all operation types See every node type available in the workflow builder, from watermarking to format conversion.

Add AI background removal Automatically remove backgrounds from product photos as part of your workflow.

Route images by file type Set up rules that process different file formats in different ways.

The full marketplace images guide Build an end-to-end pipeline that produces marketplace-ready images for Amazon, Shopify, and more.