Opening Problem Statement
Meet Lisa, a freelance web designer managing dozens of client websites. Each week, she receives multiple images in JPG and PNG formats that need to be converted to the more efficient WEBP format for faster website loading. Manually downloading, converting, and re-uploading these images is tedious, prone to errors, and takes hours every week—time Lisa could spend on creative work or client communications.
Lisa’s challenge is clear: how can she streamline the conversion of multiple images from JPG or PNG to WEBP, ensure the images are properly stored and organized, and reduce manual errors and time spent? This is exactly the problem tackled by the n8n workflow we’re exploring today.
What This Automation Does
This workflow automates the entire process of converting images from JPG and PNG formats to the WEBP format by leveraging n8n’s powerful automation capabilities alongside APYHub’s image conversion API. Here’s what happens when you run this workflow:
- Reads image URLs from a Google Sheet that Lisa or her team maintains.
- Differentiates between JPG and PNG images to route them through the correct API conversion endpoint.
- Uses APYHub API to convert the images seamlessly without manual downloads.
- Updates the Google Sheet with the new WEBP image URLs and marks each row as “DONE” to track progress.
- Downloads the converted WEBP files directly to n8n for further processing.
- Uploads the converted WEBP images to Google Drive into a designated folder, ensuring organized storage accessible to Lisa and her team.
By automating these steps, Lisa saves countless hours weekly, eliminates human errors in tracking conversions, and improves website performance by using optimized image formats.
Prerequisites ⚙️
- n8n account (cloud or self-hosted, e.g., self-host on Hostinger)
- Google Sheets account with the image URLs listed (in JPG, JPEG, or PNG formats) 📊
- Google Drive account to upload converted images 📁
- APYHub API key for image conversion 🔑
Step-by-Step Guide
1. Manually Trigger the Workflow
Navigate to the n8n editor and start with the Manual Trigger node named “When clicking ‘Test workflow’”. This node allows you to run the entire workflow on demand.
What you do: Click “Execute Workflow” in n8n to start.
Outcome: The workflow initiates the process fetching data from the Google Sheet.
Common mistake: Forgetting to execute manually or set the trigger for automatic scheduling.
2. Set Your APYHub API Key
Use a Set node named “Set API KEY” to inject your APYHub API key into the workflow. This will be used by HTTP request nodes for authentication.
Steps: In the node parameters, set a string called apikey with your actual APYHub API key.
Example: APY**************************************
Outcome: The API key is available for downstream requests.
Common mistake: Not setting or exposing the wrong API key string, causing authentication errors.
3. Retrieve Image URLs from Google Sheets
The Google Sheets node named “Get images” pulls URLs from the sheet where you maintain your image source links.
Navigation: Click on the node → Configure spreadsheet ID and sheet name (linked to your sheet with image URLs).
Outcome: The workflow loads image URLs for processing.
Common mistake: Incorrect sheet or column name selected will cause no data retrieval.
4. Extract File Name and Extension Using Code Node
The Code node called “Get extension” runs JavaScript to extract the filename and extension from each image URL.
Code snippet:
// Loop over input items
for (const item of $input.all()) {
const url = item.json.FROM;
const filenameWithExtension = url.split('/').pop().split(/[#?]/)[0];
const extension = filenameWithExtension.split('.').pop();
const filename = filenameWithExtension.substring(0, filenameWithExtension.length - extension.length - 1);
item.json.FILENAME = filename;
item.json.EXTENSION = extension;
}
return $input.all();
Outcome: Adds filename and extension fields for use in decision making.
Common mistake: Unexpected URL format can cause extraction errors.
5. Route Images Based on Extension Using Switch Node
The Switch node “JPG or PNG?” directs the workflow differently based on the image extension field, allowing separate handling for JPG/JPEG and PNG.
How to configure: Set conditions on field EXTENSION equals “jpg”, “jpeg” or “png” and route accordingly.
Outcome: Ensures each image is converted via the correct API endpoint.
Common mistake: Misspelling extensions or case sensitivity can break the flow.
6. Convert JPG/JPEG Images Using APYHub API
The HTTP Request node named “From JPG to WEBP” sends a POST request to APYHub’s JPG to WEBP conversion API.
Request details:
- Method: POST
- URL:
https://api.apyhub.com/convert/image/jpeg/webp/url?output=test-sample - Headers:
Content-Type: application/jsonandapi-token: - Body (JSON):
{"url":"{{ $json.FROM }}"}
Outcome: Returns a URL to the converted WEBP image.
Common mistake: Forgetting to pass the API key or incorrect URL leads to failed conversion.
7. Convert PNG Images Via APYHub API
This HTTP Request node “PNG to WEBP” works like the JPG one but targets PNG images.
Key difference: The endpoint URL is https://api.apyhub.com/convert/image/png/webp/url?output=test-sample.
Note: Header uses apy-token (a minor inconsistency in this workflow config) but it should match the JPG node for consistency.
Outcome: Converted WEBP image URL returned.
Common mistake: Incorrect header name can cause authentication failure.
8. Update Google Sheet With Conversion Result
The Google Sheets node “Update Sheet” updates the original sheet row with the new WEBP image URL in the “TO” column and marks “DONE” with an “x” to indicate completion.
How to set: Use the row number to match and update accordingly.
Outcome: Sheet reflects conversion status and WEBP URLs.
Common mistake: Not mapping row number correctly leads to wrong row updates.
9. Download the Converted WEBP Image
The HTTP Request node “Get file image” downloads the converted image file for uploading.
Configuration: URL field set to the “TO” field from the updated sheet. Response type set to file.
Outcome: Image file retrieved successfully.
Common mistake: Not setting response to file format leads to improper data handling.
10. Upload Converted Image to Google Drive
The Google Drive node “Upload image” uploads the downloaded WEBP image to a specific folder in Google Drive.
Setup: Map filename based on original file name with “.webp” extension. Choose the drive folder ID you want to save images to.
Outcome: Converted images are stored and accessible in Google Drive.
Common mistake: Incorrect folder ID or missing credentials causes upload failures.
Customizations ✏️
- Change output folder: In the “Upload image” Google Drive node, alter the
folderIdto save converted images to another folder. - Add support for GIF or TIFF: Extend the Switch node “JPG or PNG?” to include new conditions for GIF or TIFF image formats and add corresponding HTTP request nodes using APYHub API.
- Introduce error handling: Add an error workflow to notify via email or Slack if a conversion fails, by branching off from HTTP Request nodes.
- Schedule automatic runs: Replace the Manual Trigger node with a Cron Trigger node to convert images automatically on a schedule.
- Append metadata: Modify the Code node to append additional metadata fields extracted from original URLs or image properties for better tracking.
Troubleshooting 🔧
Problem: “Authentication failed with APYHub API”
Cause: Incorrect API token or header name mismatch.
Solution: Double-check the API key in “Set API KEY” node and ensure headers use the correct key name, e.g., “api-token” consistently.
Problem: “Google Sheets update not working or updating wrong rows”
Cause: Incorrect mapping of row_number or sheet configuration.
Solution: Verify that the “Update Sheet” node uses the correct row_number field and matches the proper sheet and document ID.
Problem: “Converted image not uploading to Google Drive”
Cause: Incorrect folder ID or expired credentials.
Solution: Verify Google Drive folder ID and refresh or reconnect credentials.
Pre-Production Checklist ✅
- Ensure your APYHub API key is active and correctly set in the workflow.
- Verify your Google Sheets document and sheet names match the configuration nodes.
- Populate the “FROM” column in Google Sheets with valid JPG/JPEG/PNG image URLs.
- Set correct folder ID in Google Drive node where webp images will be uploaded.
- Run manual tests by triggering the workflow and confirm images convert and upload properly.
Deployment Guide
Once tested, activate the workflow in n8n by toggling the active status on. Optionally, replace the Manual Trigger with a Cron Trigger to schedule regular image conversions.
Monitor runs in the n8n execution logs and set alerts for failures if needed. Your converted images will continuously be updated into your Google Drive folder automatically.
FAQs
Q: Can I use other image conversion APIs instead of APYHub?
A: Yes. You can replace HTTP Request nodes with other APIs, but you’ll need to adjust request formatting and authentication accordingly.
Q: Will this workflow consume API credits quickly?
A: It depends on your APYHub pricing plan and how many images you convert. Be mindful of limits and usage.
Q: Is data secure while uploading to Google Drive?
A: Yes. All data transmissions are handled securely via Google OAuth and encrypted API calls.
Q: Can the workflow handle hundreds of images at once?
A: It can, but consider API rate limits and workflow execution time. Splitting loads or scheduling batches is recommended.
Conclusion
Congratulations! You’ve just built an efficient n8n automation that radically simplifies converting multiple JPG and PNG images into the optimized WEBP format. By integrating Google Sheets, APYHub API, and Google Drive, you’ve saved time, minimized manual errors, and improved image management for faster websites.
Next, you could enhance this automation with auto-resizing images, adding watermarking steps, or integrating notifications upon each successful conversion. Keep experimenting and refining your workflows — automation is your best friend!