Concept Case: Hybrid & Personalized Images

Howdy, Litmus Communers!

Few weeks ago I started exploring the possibilities of hybrid image generation. I believe I have found a small solution that I want to share with you. It has been around a while, but wasn't as accessible. It took me some time to figure this out. Please make sure to give your feedback or any solution you may already be putting to use in this topic. Reminder that this is a trial run.

Creating e-mail content within a design dynamically and efficiently still, at least to us, is painful without necessary enterprise software. It has been impossible so far, to parse an image to a vast visual format or placeholder. We were bound by Photoshop (which required the same, repetitive, actions over and over). A cross-over in HTML has been impossible so far, for us at least.

As a result, we have dug into PHP's capabilities of merging images and the complexity of creating placeholder frames. Not just overlay, but 'under'lay included (mask/clipmask alike). Other than sharing this with you, we would like to gain more insight in some of the concerns we have regarding the way hybrid images are processed in cloud. This is a little on the technical side of things, but we realise we also have developers amongst us here.

What purpose does this serve?

This will allow you to make merging designs. Think of:

  • Pictures that have tags/stickers added in the image (sale/sold out/discount)

  • Dynamic headers and text/image overlay

  • Allow agents to use images inside 'image template'

  • Make static e-mail components dynamic

  • Unlimited options using parameter (extend functionality to your own wishes)

How this works

We have a base image merging script that we will now refer to as engine. The engine generators a collaboration between your input image, delivered in the URL parameters, and an overlay. The output of this query will be your final image, which can be used in e-mail.

Q: Does it support images uploaded in the interface of my ESP?
A: Yes, if your ESP translates images back to URL or offers a parameter to embed the URL in SRC.

Q: Does this support PNG/Transparency?
A: Yes.

Syntax: http://www.yourdomain.com/dynamic_image/?url=http://www.yourdomain.com/profile-picture.jpg

Let's showcase what we are talking about:

1. BASE (mask only)

Base

1. Output

Embedded images sourced by Google Images:

Please respect copyright, portrait and authors.

Only used in illustrative form.

URL A > website.com/?url=stevejobs.jpg
Output #1

URL B > website.com/?url=billgates.jpg
Output #2

Give it a try yourself: CLICK HERE »

A matter of preference, wouldn't you agree?

Githubbed, feel free to use:

Download from Github

(PHP supporting webserver required to run this)

Concerns:

1: What happens after the page goes down?

Images (unless stored in cache) will no longer be able to render through e-mail. Please vision the future. A year from now, your e-mail may still be relevant.

2: Consequences for hosting data plan

Not sure how this will relate to your hosting plans in regards to memory, or size. Especially when your mailing lists reach beyond 'testing' sizes. Please beware of this and do your own test runs!

Discuss!

Did you find this useful, or are you already using an alternative solution for flexible designs? Please share it with me, and the rest of the community!