How to Use the Squish Image Compression API (Step-by-Step)

Squish is built for developers who want a simple, reliable image compression API. In this guide, you will learn how to make your first API request, read the response, and plug Squish into your frontend or backend.

1. Get Your API Key

To access the Squish API, you need a Pro (or higher) account with an API key. Once you are logged in:

1. Go to your dashboard.
2. Open API Keys.
3. Create a new key and copy the value (it starts with something like sq_live_...).

Never commit this key to Git or expose it in public client-side code. Keep it on the server or in secure environment variables.

2. Your First Request with cURL

The fastest way to test Squish is with curl. The /compress/single endpoint takes a file upload and returns a compressed image:

curl -X POST https://api.squish.dev/api/v1/compress/single \
  -H "X-API-Key: sq_live_your_key_here" \
  -F "image=@photo.jpg" \
  -F "quality=80" \
  -F "format=webp"

By default, the API returns a JSON payload with the compressed image as base64, plus statistics:

{
  "success": true,
  "original": { "size": 2457600 },
  "compressed": { "size": 312000 },
  "savings": "87%",
  "image": "base64_encoded_image..."
}

3. Getting a CDN URL Instead of Base64

If you do not want to manage storage yourself, ask Squish to store the image on our CDNand return a ready-to-use URL. Just set output=url:

curl -X POST https://api.squish.dev/api/v1/compress/single \
  -H "X-API-Key: sq_live_your_key_here" \
  -F "image=@photo.jpg" \
  -F "quality=80" \
  -F "format=webp" \
  -F "output=url"

The response now includes a url and downloadUrl, plus an optional expiresAt field:

{
  "success": true,
  "original": { "size": 2457600 },
  "compressed": { "size": 312000 },
  "savings": "87%",
  "url": "https://api.isquish.dev/cdn/abc123",
  "downloadUrl": "https://api.isquish.dev/cdn/abc123/download",
  "expiresAt": "2026-02-01T12:00:00.000Z"
}

You can now drop this CDN URL straight into your HTML, CMS, or frontend app without writing any extra storage logic.

4. Using Squish from a React App

For frontend apps, you can either:

• Call your own backend, which then calls Squish (recommended for security).
• Use Squish directly from the browser for non-sensitive/demo use cases.

Here is a minimal React example that calls a /api/upload route on your backend, which in turn talks to Squish:

function ImageUploader() {
  const [preview, setPreview] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    const formData = new FormData();
    formData.append('image', file);

    setLoading(true);
    try {
      const res = await fetch('/api/upload', { method: 'POST', body: formData });
      const data = await res.json();
      setPreview(data.cdnUrl || data.dataUrl);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleChange} />
      {loading && <p>Compressing…</p>}
      {preview && <img src={preview} alt="Compressed" />}
    </div>
  );
}

5. When Should You Use Base64 vs CDN URLs?

6. Next Steps

Once you have your first request working, you can:

• Wire Squish into your build pipeline to compress assets at deploy time.
• Integrate it into your CMS or admin panel for non‑technical users.
• Use it from background jobs to re‑compress legacy images.