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.

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:

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.

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 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 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 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.

Lighten

Darken

Color Filter

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.