On This Page:

Overview of imgix

Images uploaded to Element in our email builder for one-time communications, campaigns, and templates are hosted by a service called imgix.

imgix is a powerful image management and transformation service that can apply a vast library of edits to an image by appending a parameter to the image’s URL. imgix can apply several simultaneous transformations to images uploaded to Element such as cropping, resizing, color filters, masking, and more.

This guide discusses the basics of using imgix, presents examples of common transformations, and provides links to additional resources for advanced use.

Getting Started

It’s important to understand with imgix transformations, all edits occur within an image's URL. If you look at the URL field of any image used in Element’s email builder, you will notice that the image path starts with http://451.imgix.net/images/...

This means that images hosted in Element are transformed through imgix. To apply a transformation to an image, users must append the correct parameter to the URL path of the image.

For example, let’s look at one of Element’s default CTA components in the email builder.

The picture behind the CTA button is a container background image and the full path of the URL is:


We can see the imgix transformations that are happening to the right of the “?” symbol in this path.


There are several transformations happening at once to this image:

  • blend-color: specifies the color when applying a blend (set by hex code). In this case #000000 or black.

  • blend-alpha: changes the alpha (or transparency) of the blend being applied. This is set to 50%. A higher integer (such as 80) would result in a darker image. A smaller integer would result in a lighter (less altered) image.

  • blend-mode: specifies the blend mode being used. In this case, the blend mode is "multiply" which is used for multiply color values of overlapping pixels, resulting in a darker image.

With imgix, you can apply multiple transformations at once using the "&" symbol between transformations in the URL syntax. imgix also provides a useful resource to test parameters and values. In their sandbox editor, you can upload an image and apply any of the imgix transformations to see what the final image will look like.

Using the URL field in the email editor, you can apply these types of transformations to existing components or upload a new image anywhere in the editor and append the imgix parameter to the end of the image path URL.

You can restore an image to its original state by clicking the "clear transformations" button next to the image URL field.

Common Transformations with Examples

Resize Fit

Resize fit can be used to resize an image based on different types of parameters. Set your image dimensions using pixel values for width and height.



Face Detection

Face detection can be used to automatically center on any faces within an image. This is especially useful for profile photos. Use with the "fit=crop" parameter to specify the final image dimensions and "facepad" parameter to set the padding around the subject in the image.



Masks (such as an ellipse)

Masks can be applied for several shapes (including custom shapes). The most common use case of the mask parameter is for an ellipse transformation.




Rotations are simple transformations to rotate the image according to the value specified (0-360 degrees).



Blend Mode

Blend mode is a powerful transformation that can be used for several use cases, the most common being lightening or darkening an image, or applying a color filter.







Color Filter



Additional imgix Resources

imgix maintains a robust library of documentation with tips and tutorials, a full codex with examples for all of the available transformations, and a sandbox tool for testing.

See Also

Did this answer your question?