Image Sources

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 LibPixel and follow the Create Source screen.

Create Source after making an account

Image Source

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.

URL Image Source

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.

Adding a New URL Source

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.

S3 Image Source

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.

Setting IAM Policy

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:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "LibPixel",
            "Effect": "Allow",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::libpixel-uploader/*"
            ]
        }
    ]
}

If you wish to use the LibPixel Uploader 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.

For the uploads to work, we need the additional permissions s3:PutObject and s3:PutObjectAcl. For example:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "LibPixel",
            "Effect": "Allow",
            "Action": [
                "s3:GetObject",
                "s3:PutObject",
                "s3:PutObjectAcl"
            ],
            "Resource": [
                "arn:aws:s3:::libpixel-uploader/*"
            ]
        }
    ]
}

You can learn more about AWS IAM User Policies using this link.

Creating an S3 Source

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 link to go to the Add New Source form.

Adding a new S3 Source

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.

You can check Enable uploads, if you want to upload images to your bucket. But, make sure your IAM user has the appropriate permissions to upload to the bucket.

The SRC Parameter

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.

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 Secure URL Generator for this purpose.

Secure URLs

Using the SRC Parameter

Suppose you want to process an image with the URL:

https://abcd.somewhere.com/images/header.png

Normally, you would just include this URL in the src tag of an img element like:

<img src="https://abcd.somewhere.com/images/header.png">

However, to use the services of LibPixel and process it before presentation, you can use the following code and process it as you like:

<img src="https://yourdomain.libpx.com/?src=https%3A%2F%2Fabcd.somewhere.com%2Fimages%2Fheader.png&blur=5&signature=5BE46CCBE8525D902F507B299EF98D683441188D"/>

Note: You have to encode the source URL before using it in the src parameter. You can use this tool provided by w3school for encoding and decoding of URLs.