# 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](https://www.libpixel.com/) and follow the **Create Source** screen.
## 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.
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](https://github.com/libpixel/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](https://docs.aws.amazon.com/AmazonS3/latest/dev/walkthrough1.html).
#### 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](https://dashboard.libpixel.com/sources/new) to go to the **Add New Source** form.
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.
{% hint style="info" %}
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.
{% endhint %}
## 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](https://dashboard.libpixel.com/secure_urls) for this purpose.
{% content-ref url="secure-urls" %}
[secure-urls](https://docs.libpixel.com/setup/secure-urls)
{% endcontent-ref %}
### 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:
```
```
However, to use the services of LibPixel and process it before presentation, you can use the following code and process it as you like:
```
```
**Note:** You have to encode the source URL before using it in the src parameter. You can use this tool provided by [w3school](https://www.w3schools.com/tags/ref_urlencode.ASP) for encoding and decoding of URLs.