imgix Overview

imgix is an on-demand service that offers three primary features for serving your assets on the web:

• Rendering API: A powerful image processing API that allows you to resize, crop, and adjust images on the fly.
• Video API: A video processing API that allows you to manipulate and optimize videos.
• Management API: An API that allows you to programmatically manage your imgix account and sources.

These features are designed to help you deliver optimized images and videos to your users and manage your assets at scale.

You can see imgix’s solutions by visiting our solutions page.

Connecting Your Assets

The imgix service relies on connecting our service to your Origin (Amazon S3, GCS, or a Web Folder) where your images are already hosted. We fetch assets from the Origin and apply transformations before serving them via our CDN. If an asset is deleted from your Origin, imgix may continue to serve the asset until it is dropped from our cache.

Rendering in Action

For an example of how imgix works, see this example: https://assets.imgix.net/examples/kingfisher.jpg

The example above is hooked up to our S3 source where the image is in an S3 bucket. The bucket has the image in /examples/kingfisher.jpg, so we can access the image via the URL above.

To transform the image, we add parameters:

Edit in Sandbox

This transforms the image to 500 pixels wide and automatically formats and compresses it to optimize it for the web.

Transforming at Scale

To transform images at scale, you can apply the same set of parameters (w=500&auto=format,compress) on any other imgix image to achieve similar effects.

Here’s a more complex example utilizing the mask parameter to create multiple variations of a typography visual:

Edit in Sandbox

Edit in Sandbox

Edit in Sandbox

Edit in Sandbox

Instead of editing each image individually, we add ?mask=mask-shape_sol-surf-co.png&ar=1.06%3A1&w=600&fit=crop to the end of each image URL to apply the same transformation to each image.

You can try this out yourself by uploading an image to your own Source and copying these parameters to the end of any of your image URLs:

?mask=https%3A%2F%2Fassets.imgix.net%2Fexamples%2Fmask-shape_sol-surf-co.png&ar=1.06%3A1&w=600&fit=crop"

Implementing imgix

Implementing imgix on your website or application is as simple as serving images with the imgix URL or domain.

For example, if images on your website were previously served with URL pattern:

https://imgix.assets.sfo3.digitaloceanspaces.com/example/blue-orange.jpg

You would connect imgix to your Origin where your assets are served and modify your website’s URLs to use the imgix hostname instead:

https://yourimages.imgix.net/examples/blue-orange.jpg

Additionally, we offer libraries and SDKs to help you take advantage of pre-built functions and features such as srcsets.

If no relevant library is listed, you can still integrate imgix in your code just by serving images like the examples shown above. Since imgix delivers all of its pictures and transformations via URLs, leveraging our service anywhere is easy as long as you can output a URL.