Introducing imglab

imglab is an on-demand image processing service that simplifies how you work with images in your application.

How it works

imglab works by getting images from a data source, caching them, generating different transformations on the fly, and delivering using our global CDN.

The idea is that your application uploads images with the highest possible resolution to your data store (we support S3, Azure, Google Cloud, and Web folders). By creating sources, imglab will connect to your data store and generate transformations of those images adapted to every device and screen using our Images API.

Images API

After configuring your source on imglab you can start using our Images API.

Every Images API URL has a similar structure:

https://assets.imglab-cdn.net/image.jpeg?width=600&dpr=2&format=png

Images API URLs doesn't need to be generated manually. We offer integration libraries for Javascript, Python, Ruby and Elixir.

A request to the previous URL will be executed by imglab following this flow:

1. The request will be received by our CDN. Because the URL is not part of the CDN cache yet we need to transform the image first.
2. imglab will download the origin file image.jpeg from the source assets and the file will be stored in our file cache. If your source is configured to use a S3 bucket the origin master file will be downloaded from that specific bucket.
3. imglab will use the transformation parameters to generate an image with a width size of 600 pixels width=600, a device pixel ratio of 2 dpr=2, and using PNG format format=png.
4. The generated image will be stored in our global CDN cache so future requests will be served quickly directly from the cache without depending on your users location.

Using Images API URLs

You can use Images API URLs on a HTML <img> element:

<img src="https://assets.imglab-cdn.net/image.jpeg?width=600">

Using srcset attribute to generate responsive images or images switching resolution:

<img srcset="https://assets.imglab-cdn.net/image.jpeg?width=600,
             https://assets.imglab-cdn.net/image.jpeg?width=600&dpr=2 2x,
             https://assets.imglab-cdn.net/image.jpeg?width=600&dpr=3 3x"
     src="https://assets.imglab-cdn.net/image.jpeg?width=600">

And even use the <picture> element to serve the best possible image format:

<picture>
  <source type="image/avif" srcset="https://assets.imglab-cdn.net/image.jpeg?width=600&format=avif">
  <source type="image/webp" srcset="https://assets.imglab-cdn.net/image.jpeg?width=600&format=webp">
  <img src="https://assets.imglab-cdn.net/image.jpeg?width=600">
</picture>