Image Sources
Last updated
Was this helpful?
Last updated
Was this helpful?
LibPixel supports two modes of fetching original images: pre-defined Image Sources or via a src query string parameter.
You can use both modes simultaneously with a single LibPixel account. To get started, create an account on and follow the Create Source screen.
An Image Source is the perfect solution for when your images have a common base URL. For example, when your images are stored in an S3 bucket or on your dedicated web server.
There are two types of image sources: URL and S3.
The simplest way to use LibPixel is by providing a URL to where your images are located. It can be on a dedicated server, a public S3 storage account or any other source. It just needs to be publicly accessible.
To create a URL Image Source, press on Create Source and select the Type as URL. Now enter the Path and the Base URL and you are ready to start using LibPixel.
In the above image, example.com/images is the route to our private server that hosts our image library. After creating this source, we can access all images that are stored in the images via LibPixel by using the Path defined earlier.
Here it's robor.libpx.com/images and from this Path you can get the images delivered faster and processed according to the parameters you define.
The S3 image source allows you to access private objects inside an S3 bucket, by entering the bucket name and the S3 region where the bucket is located.
You'll need to generate an IAM user for LibPixel with access to the S3 bucket you want to use. Please do not use your own IAM credentials for LibPixel, or those of a user with more permissions than the minimum required.
To be able to fetch your private objects, the only permission we need is s3:GetObject. An example IAM Policy to allow S3:GetObject on a specific bucket (named libpixel-uploads here, which you must modify to your own bucket name) is:
For the uploads to work, we need the additional permissions s3:PutObject and s3:PutObjectAcl. For example:
Provide the path at which your images will be available through LibPixel, insert the bucket name, access key ID and the secret access key to get started with serving images through LibPixel.
Using the src query string parameter makes the most sense when images are fetched from multiple different domains. A good example is an application or website where users submit image URLs, which you wish to resize or modify before displaying them.
The value of the src parameter needs be escaped correctly (e.g. in JavaScript by using encodeURIComponent). But, if you are using any of the LibPixel Client Libraries then you do not have to worry about it since they handle it automatically.
Suppose you want to process an image with the URL:
Normally, you would just include this URL in the src tag of an img element like:
However, to use the services of LibPixel and process it before presentation, you can use the following code and process it as you like:
If you wish to use the library, you must choose "Enable uploads", and set an ACL (Access Control List) for uploaded images. Set to public-read to make uploaded files publicly accessible through S3, or private to make them accessible only through LibPixel.
You can learn more about AWS IAM User Policies using this .
After creating the IAM user, the next and the final step is to create the source through LibPixel dashboard. If you are already logged in the LibPixel website then use this to go to the Add New Source form.
You must sign your URLs when using the src parameter. This is to prevent third parties from using your LibPixel account for their own purposes. You can use for this purpose.
Note: You have to encode the source URL before using it in the src parameter. You can use this tool provided by for encoding and decoding of URLs.
