Add Image Compression to your Xano APIs with TinyPNG

In this guide, we'll explore how to leverage the TinyPNG API in Xano to compress images on-the-fly before storing them in your database. This approach helps you optimize your media storage usage, especially when dealing with large file sizes uploaded by users.

Why Image Compression Matters

As your application grows and users upload more images, your media storage can quickly fill up, leading to increased costs or potential issues with storage limits. Large image file sizes can significantly contribute to this problem, particularly if you don't have a way to restrict file sizes on the client-side.

By compressing images before storing them, you can reduce their file sizes, potentially saving a significant amount of storage space over time. This is especially valuable if you're working with limited media storage or want to minimize costs associated with storage usage.

Setting Up the TinyPNG API

The first step is to sign up for the TinyPNG API at tinypng.com. Follow these steps:

1. Go to tinypng.com and enter your name and email address.
2. You'll receive an API key, which you'll need to use the TinyPNG API.
3. Review the basic documentation and API reference to understand the available options and features.

One of the great things about the TinyPNG API is that it offers a free tier for up to 500 images per month, making it an excellent choice for those just starting out or with low traffic volumes.

Implementing Image Compression in Xano

Now, let's walk through the process of implementing image compression in Xano using the TinyPNG API.

Step 1: Create an API Endpoint

First, create a new API endpoint in Xano. This endpoint will accept an image file and a user ID, which we'll use to associate the image with a specific user.

Step 2: Generate Image Metadata

Use the `create image from file` function to generate metadata for the uploaded image. This step doesn't store the image in your database yet; it simply prepares the image data for further processing.

Step 3: Call the TinyPNG API

Next, we'll call the TinyPNG API to compress the image. Here's how you can set up the API call:

Let's break down this code:

• `url`: The TinyPNG API endpoint for image compression.
• `method`: We're using the `POST` method to send the image data.
• `source.url`: We need to provide the full URL to the image file. We replace `/vault` in the image file path with your Xano instance URL to construct the complete URL.
• `headers`: We set the required `Content-Type` and `Authorization` headers. The API key is base64 encoded.
• `timeout`: Image compression can take some time, so we increase the timeout to 100 seconds (adjust as needed) to prevent the request from timing out prematurely.

Step 4: Create a File Resource

After receiving the compressed image from the TinyPNG API, we need to create a new file resource in Xano to work with the compressed image data.

Step 5: Generate Metadata for the Compressed Image

Use the `create image from file` function again to generate metadata for the compressed image, which will allow us to store it in our database table.

Step 6: Store the Compressed Image

Finally, add a record to your database table with the compressed image and the associated user ID.

Step 7: Test and Observe the Results

Run your API endpoint with a large image file and observe the results. You should see a significant reduction in the file size of the compressed image compared to the original.

In the provided example, a 4MB image was compressed down to approximately 1.7MB, less than 50% of the original size. This kind of compression can make a big difference when dealing with large numbers of images, especially if you're working with limited media storage.

Conclusion

Implementing image compression using the TinyPNG API in Xano is a straightforward process that can help you optimize your media storage usage and potentially save costs associated with storage limits. By compressing images on-the-fly before storing them in your database, you can ensure that your storage space is used more efficiently, even when dealing with large file sizes uploaded by users.

Feel free to incorporate this logic into your existing image upload workflows or create a custom function to reuse this functionality across multiple endpoints. Additionally, explore the TinyPNG API's advanced features, such as metadata preservation and image detection, to further enhance your image processing capabilities.

If you have any questions or need further assistance, don't hesitate to reach out to the Xano community or support team.