Image Optimizer Powered by Pinata: Secure File Storage Meets Real-Time Customization

This is a submission for the The Pinata Challenge

What I Built

I have built an Image Optimizer web application that integrates Pinata for decentralized file storage using IPFS. This application allows users to upload images, customize optimization settings such as width, height, format (WebP, JPEG, PNG), and quality, and then retrieve the optimized version directly from IPFS via Pinata's gateway.

The app offers an intuitive user interface for uploading an image, previewing both the original and optimized versions, and retrieving a shareable link to the optimized image stored on the decentralized web. It takes advantage of Pinata's powerful IPFS file pinning service, ensuring that the uploaded images are securely stored and can be accessed globally from any IPFS node.

Demo

Demo Link : Click Here

My Code

chintanonweb / pinata-image-optimizer

Image Optimizer with Pinata and React (Vite)

This project is an Image Optimizer built with React (using Vite as the build tool) and integrated with Pinata for decentralized image upload and retrieval via IPFS. The app allows users to upload an image, customize dimensions, quality, and format, and then optimize and retrieve it through Pinata's IPFS gateway.

Features

• Upload images to IPFS using Pinata.
• Customize image width, height, quality, and format (WebP, JPEG, PNG).
• Preview both the original and optimized versions of the image.
• Get the optimized image URL from Pinata's IPFS gateway.

Tech Stack

• Frontend: React with TypeScript
• Build Tool: Vite
• Storage: Pinata (IPFS)

Getting Started

Follow the steps below to run the project locally:

Prerequisites

Make sure you have the following installed:

• Node.js
• Pinata Account (for the API keys)

1. Clone the Repository

git clone https://github.com/chintanonweb/pinata-image-optimizer.git
cd image-optimizer-pinata

2. Install Dependencies

npm install

3.

…

View on GitHub

More Details

How I Used Pinata

1. Pinning Files to IPFS
   • The app uses Pinata's file upload API (pinFileToIPFS) to pin images to the IPFS network. Users can select any image from their local system, and the app seamlessly uploads the image to Pinata, generating an IPFS hash that points to the pinned file. This ensures decentralized storage of the image, making it accessible from any IPFS node worldwide.

• The file upload process leverages Pinata's JWT-based authentication, ensuring that only authorized users can pin files using their own Pinata credentials.

   const response = await fetch('https://api.pinata.cloud/pinning/pinFileToIPFS', {
     method: 'POST',
     body: formData,
     headers: {
       'Authorization': `Bearer ${import.meta.env.VITE_PINATA_JWT}`,
     },
   });

1. Retrieving Images from IPFS
   • Once an image is uploaded, the app constructs a retrievable URL using Pinata’s IPFS gateway (https://gateway.pinata.cloud). The user can customize the image optimization settings (width, height, quality, and format), and these parameters are appended to the Pinata gateway URL to retrieve the optimized version of the image dynamically.

• The app generates a customized URL with image transformations applied via query parameters. For example:
  

   https://gateway.pinata.cloud/ipfs/<IPFS_HASH>?img-width=400&img-height=400&img-quality=80&img-format=webp
  

1. Previewing the Original and Optimized Image

   • The original image is previewed immediately after selection using the local URL.createObjectURL() method. Once the image is uploaded to IPFS and optimized, the optimized version is previewed by loading it from the Pinata gateway with the selected transformations.

2. IPFS Gateway Customization

   • The application allows developers to specify a custom IPFS gateway via environment variables (VITE_GATEWAY_URL). This enables flexibility to use private or faster gateways depending on the needs of the application.

---

This project showcases the power and flexibility of Pinata’s IPFS integration for decentralized file management, using file upload, storage, and optimized content retrieval.