#imgaing

[data-and-vision]

[imgix]

Dynamically Blending Images with imgix

Layer blending is an image editing feature commonly used to blend together multiple images, with a variety of possible transformations. imgix now supports the ability to perform such operations with our image URL API. With imgix's blend parameter, it is now possible to dynamically layer and blend images using a variety of options. This powerful ability can be used to create custom effects and image filters.

The blend parameter accepts an image URL or a hexadecimal value for a solid color. Within this post I will highlight some common ways to make use of the blend parameters, as well as provide some practical examples and best practices for use.

Blend mode operations with imgix are standards compliant, compatible with any browser that uses the img tag, and requires less processing power on the front end or for a device to render than a CSS or in–app solution.

Blending Images

To blend an image, give an image URL as a value to theblend parameter. When blending images, there are additional considerations that need to be made regarding the size and placement of the blend image.

Consider the following two images:

original

blend image

The water kettle is my main image, and the coffee cup is the image I want to blend it with. For this example, the screen blend mode will be used as well as blend size (bs=inherit) to give the blend cup the same sizing and crop type as the kettle image. All of these parameters are set in the URL.

coffeepot.jpg? blend=americano.jpg & bm=screen & bs=inherit

As a result of the screen blend mode, the whiter values in the blend image like the white coffee cup are brought forward. Screening black leaves an underlying color unchanged, screening with white produces white.

Blend Sizing & Alignment

In the above example, blend size bs was set to best fit the blend image in lieu of reduntantly applying width, height, and crop parameters already set to the main image with imgix. When set to inherit, blend size will inherit all of the sizing and alignment operations of the main image to the blend image.

If the sizing is not set, it may be necessary to adjust the blend image using additonal parameters to composite it appropriately to the main image. Here is a list of additional imgix parameters within our API documentation to assist in sizing, scaling, and positioning blended images.

blendblend

bmblend mode

bablend align

balphblend alpha

bwblend width

bhblend height

bfblend fit

bpblend padding

bcblend crop

bsblend size

Blending Solid Colors

For a color, you can use a 3, 6, or 8 digit hex value. For example: blend=333, blend=333333, and blend=ff333333 are all the same. The first two digits of the 8 digit hex value represent alpha opacity of the color.

Example 1

Orange & Overlay

coffeepot.jpg? blend=FA653D & bm=overlay

Example 2

Sky Blue & Screen, slightly transparent

coffeepot.jpg? blend=9915c5f7 & bm=screen

Blend Modes

imgix supports a number of different blend modes, each of which has a unique way of blending your original image with its blend target. The most common and useful of which are multiply, screen, overlay and color. All of the available modes may be placed into five groups.

Consider the following image and color:

original

#CF8DCC

Darkening Modes

Transformations that result in darker values.

bm = multiply

bm = darken

bm = burn

Lightening Modes

Transformations that result in lighter values.

bm = screen

bm = lighten

bm = dodge

Contrast Modes

Transformations that mix and adjust highlight and shadow values depending on the blend color or image.

bm = overlay

bm = softlight

bm = hardlight

Component Modes

Transformations involving HSL and color components.

bm = hue

bm = saturation

bm = luminosity

bm = color

Comparison Modes

Inverts and highlights differences in pixel values between the two images.

bm = difference

bm = exclusion

Applied Usage

Here are some examples on potential uses for blend modes with imgix. These explore ways of achieving scalable image filters, textures, and enhancement effects.

Scalable Filters

Blend modes allow for an easy way to create customized image filters. One of the best ways to make a filter that can work on any sized image, is to serve a native vector PDF (using Adobe Illustrator or Sketch) and use it as the blend image. Using vector PDF files as blend composites will give you the flexibility of vector scaling to make complex color filters or gradient effects.

For the following examples I'm using a PDF file with multiple pages http://assets.imgix.net/blog/blog-blends.pdf, and am using the page param with imgix to set each graphic. These graphics are vector, and can scale to any size dynamically, without any degredation to quality to the output when set as blends.

Note: The page parameter is applied to the multipage pdf to select the graphic. When using parameters on an embedded URL its best to use encoded URI values. For example, ?= %3F, /= %2F, := %3A, and == %3D

Split Tone

Using a diagonal gradient with two colors, making use of bs=inherit and a screen blend mode.

original

blend filter pdf

? blend=http%3A%2F%2Fassets.imgix.net%2Fblog%2Fblog%2Fblog-blends.pdf%3Fpage%3D3 & bs=inherit & bm=screen

Text Underlay

A common way to title imagery is use a dark to transparent gradient over a portion where the text overlays. With this example, I am using a black to transparent black gradient graphic, with the multiply blend mode. For this example, the sizing and cropping for the blend image are set manually.

original

blend filter pdf

? blend=http%3A%2F%2Fassets.imgix.net%2Fblog%2Fblog-blends.pdf%3Fpage%3D1 & bc=bottom,center & ba=bottom,center & bf=crop & bh=360 & bw=640

Here are some sample params for adding text. View imgix Text API documentation

& txt=Sample%20Text & txtclr=ffffffff & txtfont=Helvetica,bold & txtalign=bottom,left & txtsize=45 & txtpad=32

Graphic Overlays

You can also use more complex vector graphics over images, think of them as advanced watermarks. Along with a screen blend mode I am layering the imgix logo.

original

blend filter pdf

? blend=http%3A%2F%2Fassets.imgix.net%2Fblog%2Fblog-blends.pdf%3Fpage%3D2 & bs=inherit & bm=screen

Adding Texture

Blend modes make it easy to add texture to images, giving them a bit more character. The ability to add a texture dynamically and non-destructively is quite powerful. In these examples, I am also making use of the invert parameter to vary how the same texture can be applied.

Multiply Texture

When you multiply paper texture, the darker values will show through. In this example, the paper texture image is mostly white, with subtle greys and blacks. When blend multiplying the texture onto the main image, the greys and blacks will show through, providing the texture.

original

texture

Texture image, multiply blend mode.

? blend=texture.jpg & bs=inherit & bm=multiply

Screen Texture

In this example I will use the same texture image and invert it. I will then screen the inverted texture to have the resulting sparse white values show through to produce the texture for the image.

original

texture

Texture image with invert=trueapplied, screen blend mode.

? blend=http%3A%2F%2Fassets.imigx.net%2Fblog%2Ftexture.jpg%3Finvert=true & bs=inherit & bm=screen

Image Enhancement

A common effect used in Adobe Photoshop to enhance the appearance of portraits and photos involves using a duplicate of an image layered above itself with some adjustments. In this example, a portait is used with a screen blend that has been blurred with imgix (blur=40), and reduced opacity (balph=80) to achieve a soft lens effect. Blend sizing (bs=inherit) is used to maintain the same width, height, and alignment for the blend image to match the original image.

original

original, blurred

? blend=http%3A%2F%2Fassets.imgix.net%2Fcoffee.jpg%3Fblur=40 & bs=inherit & bm=screen & balph=80

With imgix, the results of these complex operations is always a standard image that can be set to an img tag. This means all images are compatible with any browser, and quicker to render and less taxing on a destination device. To make use of the imgix service and API, please visit http://www.imgix.com/ .