Overview

Images that you upload to Element451 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 E451 Campaigns, 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.

Video Guide

How Does it Work?

With imgix transformations, all edits happen within an image’s URL. No special tools or editing interface are needed—just add parameters to your image URL.

In Element451, image paths start with http://451.imgix.net/images/.

To apply imgix transformation parameters to a URL:

Append the parameters to the end of the URL after a question mark (?).
Multiple parameters can be added by separating them with an ampersand (&).

Click here to view an example

To get started, check out Adam’s headshot uploaded to Element451:

https://451.imgix.net/training/public/files/K7xnOvgpD82EcOVyYn2J/0Lj6chMrTJ6FakR23WgmVpzb8%253D.png

I want to add an ellipse mask and resize the image. These transformations will help his email signature look better and load faster.

How do we do this?

Append the transformation ?mask=ellipse to the end of the URL above. This will apply the ellipse mask.
Next, I need to add the resize transformation w=400&h=400 . To do this, I need to combine it with the mask transformation I just added. I do this by adding the & between the two. The complete parameter should read as follows:
?mask=ellipse&w=400&h=400.

Take a look at the result here: https://451.imgix.net/training/public/files/K7xnOvgpD82EcOVyYn2J/0Lj6chMrTJ6FakR23WgmVpzb8%253D.png?mask=ellipse&w=400&h=400

Use the imgix sandbox editor to upload an image and apply any of the imgix transformations to see what the final image will look like. This is an extremely useful resource to test parameters.

Click here to view a second example

Let’s look at one of Element451’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:

https://451.imgix.net/images/email-builder/toa-heftiba.jpeg?blend-color=000000&blend-alpha=50&blend-mode=multiply

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

?blend-color=000000&blend-alpha=50&blend-mode=multiply

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 to multiply the color values of overlapping pixels, resulting in a darker image.

Finding Image URLs in Element451

Campaigns

Using the URL field in the email editor, you can apply 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 find the URL field in the Image Settings.

Media Manager

You can also find your image URLs in the Media Manager by navigating to Data + Automations > Documents > All Media. While you can't edit and save URLs here (images can only be transformed in Campaigns), this is great place to grab URLs to practice adding parameters like we did in the example above.

Clearing Transformations

When using transformations in a Campaign, 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.

?fit=crop&w=WIDTHVALUE&h=HEIGHTVALUE

Example:
?fit=crop&w=400&h=400

Face Detection

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

?w=WIDTHVALUE&h=HEIGHTVALUE&fit=facearea&facepad=PADDINGVALUE

Example:
?w=400&h=400&fit=facearea&facepad=3

Masks (e.g., 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.

?mask=ellipse&w=WIDTHVALUE&h=HEIGHTVALUE

Example:
?mask=ellipse&w=400&h=400

Rotations

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

?rot=ROTATIONVALUE

Example:
?rot=90

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.

Lighten

?blend-mode=screen&blend-color=COLORHEXCODE&blend-alpha=AMOUNT

Example:
?blend-mode=screen&blend-color=FFFFFF&blend-alpha=80

Darken

?blend-mode=multiply&blend-color=COLORHEXCODE&blend-alpha=AMOUNT

Example:
?blend-mode=multiply&blend-color=000000&blend-alpha=80

Color Filter

?blend-mode=multiply&blend-color=COLORHEXCODE&blend-alpha=AMOUNT

Example:
?blend-mode=multiply&blend-color=c95f08&blend-alpha=80

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.