---
title: Usage with Protected Images
description: Keep private images secure while still benefiting from Storyblok’s Image Service optimizations.
url: https://storyblok.com/docs/api/image-service/usage-with-protected-images
---

# Usage with Protected Images

Follow these steps to use the Image Service with protected images.

1.  Retrieve the signed URL as shown in the [assets concept](/docs/concepts/assets).
2.  Encode the signed URL.
3.  Prepend it with `https://private-img.storyblok.com/` followed by an Image Service operation, e.g. `https://private-img.storyblok.com/200x50/filters:grayscale()`.

> [!TIP]
> All Image Service operations are supported, but make sure to omit the /m parameter.

Find a JavaScript example below.

```js
import { apiPlugin, storyblokInit } from "@storyblok/js";

const { storyblokApi } = storyblokInit({
  accessToken: SPACE_TOKEN,
  use: [apiPlugin],
});

const getSignedUrl = async (filename) => {
  const response = await storyblokApi.get("cdn/assets/me", {
    filename: filename,
    token: ASSET_TOKEN,
  });

  return response.data.asset.signed_url;
};

const assetUrl = await getSignedUrl("https://a.storyblok.com/f/184738/2560x1946/d20c274998/earth.jpg");

const imageServiceOperations = "https://private-img.storyblok.com/200x50/filters:grayscale()/";

const assembledAssetUrl = imageServiceOperations + encodeURIComponent(assetUrl);

document.querySelector("#app").innerHTML = `
 <img src="${assembledAssetUrl}" width="200">
`;
```

## Pagination

-   [Previous: Cache](/docs/api/image-service/cache)
-   [Next: Migration from the previous version](/docs/api/image-service/migration-from-previous-version)