Serving Images with Sources

Source type alters how imglab access your origin images. In this section we will take a look on how Images API URLs works for different types of sources.

S3

For S3 sources, the bucket name and region will determine how origin images are accessed:

https://example.imglab-cdn.net/avatars/user-01.jpeg?width=500

For the following source settings:

• Bucket: my-company-images
• Region: us-west-2

The final origin image will be downloaded from:

https://my-company-images.s3.us-west-2.amazonaws.com/avatars/user-01.jpeg

Specifying a prefix

If a prefix is specified for the source it will be added to the image path.

Let's take the following source settings:

• Bucket: my-company-images
• Region: us-west-2
• Prefix: images

The final origin image will be downloaded from:

https://my-company-images.s3.us-west-2.amazonaws.com/images/avatars/user-01.jpeg

S3 Compatible Services

It is possible to specify a S3 source with an endpoint pointing to a compatible S3 service.

https://example.imglab-cdn.net/avatars/user-01.jpeg?width=500

For the previous URL and the following source settings:

• Bucket: my-company-images
• Region: us-west-2
• Endpoint: https://www.my-server.com

The final origin image will be downloaded from:

https://www.my-server.com/my-company-images/avatars/user-01.jpeg

Specifying a prefix

For S3 compatible services it is possible to specify a prefix.

Let's see how the prefix affect the final URL with the following settings:

• Bucket: my-company-images
• Region: us-west-2
• Endpoint: https://www.my-server.com
• Prefix: images

The final origin image will be downloaded from:

https://www.my-server.com/my-company-images/images/avatars/user-01.jpeg

Google Cloud Storage

For Google Cloud Storage sources the bucket name will be used to generate the final origin URL:

https://example.imglab-cdn.net/avatars/user-01.jpeg?width=500

For the following source settings:

• Bucket: my-company-images

The final origin image will be downloaded from:

https://storage.googleapis.com/my-company-images/avatars/user-01.jpeg

Specifying a prefix

Adding a prefix value to the source will change how the images are accessed. Let's take the following source settings as example:

• Bucket: my-company-images
• Prefix: images

The final origin image will be downloaded from:

https://storage.googleapis.com/my-company-images/images/avatars/user-01.jpeg

Microsoft Azure Storage

For Azure sources the final origin URL will be based in the storage type and container name specified for the source:

https://example.imglab-cdn.net/avatars/user-01.jpeg?width=500

Azure Blob Storage

For the following source settings:

• Storage Type: Blob Storage (Container)
• Container: my-company-images

The final origin image will be downloaded from:

https://my-company-images.blob.core.windows.net/avatars/user-01.jpeg

Azure File Storage

For the following source settings:

• Storage Type: File Storage (Folder)
• Folder: my-company-images

The final origin image will be downloaded from:

https://my-company-images.file.core.windows.net/avatars/user-01.jpeg

Specifying a prefix

It it's possible for both types of Azure storage to use a prefix value.

Having the following source settings:

• Storage Type: Blob Storage (Container)
• Container: my-company-images
• Prefix: images

The final origin image will be downloaded from:

https://my-company-images.blob.core.windows.net/images/avatars/user-01.jpeg

Web

For web sources the specified source base URL will be used to build the Web URL where origin images will be downloaded:

https://example.imglab-cdn.net/avatars/user-01.jpeg?width=500

For the following source settings:

• Base URL: https://www.myapp.com

The final origin image will be downloaded from:

https://www.myapp.com/avatars/user-01.jpeg

Specifying a prefix

If we add a prefix to the previous source settings with:

• Base URL: https://www.myapp.com
• Prefix: images

The final origin image will be downloaded from:

https://www.myapp.com/images/avatars/user-01.jpeg

Proxy

For proxy sources an absolute URL is specified instead of an image path. In this example we are using:

https://www.myapp.com/image.jpeg

The absolute URL needs to be URL encoded to avoid problems with URL reserved characters. signature parameter is mandatory since proxy sources require secured requests:

https://example.imglab-cdn.net/https%3A%2F%2Fwww.myapp.com%2Fimage.jpeg?width=500&signature=XXXXX

With the previous URL the origin image will be downloaded from:

https://www.myapp.com/image.jpeg

Returning a transformation of the original image with a width size of 500 pixels.