Streamline Image Processing with Filestack and PictureThing
Handling user-uploaded images can quickly become a complex task—multiple sizes, formats, optimizations for various devices, and the need for fast delivery. If you’re using Filestack to manage your uploads, you’re already ahead. Now, let’s take it a step further with PictureThing, a powerful image transformation API that complements Filestack’s capabilities seamlessly.
Why Combine Filestack with PictureThing?
Filestack excels at uploading and delivering files, offering features like:
- Multi-source uploads: From local devices, cloud services, or URLs.
- Intelligent Ingestion™: Ensures high upload success rates even on unreliable networks.
- CDN-backed delivery: Fast and reliable file access globally.
However, when it comes to advanced image transformations—like dynamic resizing, format conversion, or applying visual effects—PictureThing offers a straightforward, URL-based API that enhances your image handling workflow without adding complexity.
Step 1: Upload Images with Filestack
Start by uploading your images using Filestack’s File Picker or API. Upon successful upload, Filestack provides a unique URL for each file, such as:
https://cdn.filestackcontent.com/your_file_handleThis URL serves as the source for PictureThing’s transformation API.
Step 2: Transform Images with PictureThing
PictureThing operates entirely through URL parameters, allowing you to apply transformations on-the-fly. To resize an image to 400 pixels in width and convert it to WebP format, construct a URL like this:
https://api.picturething.com/convert/width=400,format=webp/https%3A%2F%2Fcdn.filestackcontent.com%2Fyour_file_handleNote: Ensure the Filestack URL is URL-encoded when appending it to the PictureThing API endpoint.
Here are some common parameters you can use:
| Parameter | Description |
|---|---|
width | Set the desired width |
height | Set the desired height |
fit | Define how the image should fit (cover, contain, etc.) |
format | Specify the output format (jpg, png, webp) |
quality | Adjust the image quality (1–100) |
For high-DPI displays, add dpr=2 to serve retina-ready images. Need a square thumbnail? Use fit=cover&width=200&height=200.
Explore more options in our documentation.
Step 3: Integrate into Your Application
With the transformed image URL ready, you can directly use it in your application—be it in <img> tags, CSS backgrounds, or any other context. No additional backend processing is required.
To secure your transformations, append your PictureThing API key to the URL. You can experiment with different transformations using our dynamic URL builder.
Benefits for Your Web App or SaaS
Combining Filestack and PictureThing offers:
- Effortless integration: No need for additional infrastructure or services.
- Real-time transformations: Modify images on-the-fly without re-uploading.
- Optimized delivery: Serve images that are tailored to your users’ devices and network conditions.
- Scalability: Handle growing user bases without compromising performance.
Handling Private Files
If your Filestack files are private, ensure that the URLs you use with PictureThing include the necessary security parameters. PictureThing will fetch the image server-side, apply the transformations, and deliver the processed image securely.
In Summary
- Filestack handles the heavy lifting of file uploads and storage.
- PictureThing adds powerful, real-time image transformations.
- Together, they provide a robust solution for managing and delivering user-generated images efficiently.
Ready to Enhance Your Image Workflow?
Integrate PictureThing with Filestack today and offer your users a seamless, high-performance image experience.
Get Started