Cloudinary Blog
Simplifying the email image conundrum

My email banner looked hideous!

Recently, I was tasked with building an email invite to ImageCon, Cloudinary’s annual image and video management conference. This email was destined for the inboxes of almost our entire database, and as you can tell, it wasn’t going well.

After staring at the preview in disbelief in Marketo for a few seconds, I quickly cycled through the seven stages of grief. Actually, I got stuck on the first one - anger. I mean, just take a look at this monstrosity:

Simplifying the email image conundrum
Not pictured: me throwing things in a fit of rage.

It’s never a good sign when your images make you wonder if you’re long overdue for a trip to the optometrist. Considering this email was going to hundreds of thousands of developers - and we are known for our abilities to deliver optimized images - I needed to seriously improve the email graphics.

On the surface, replacing a banner on an email template should be simple. In Marketo, you should only have to find the URL of the image and replace it with one of equal size. It’s a straightforward swap… or at least it should be.

However, with the explosion in popularity of devices with high-resolution displays like the Galaxy Note 7 (ba-dum-tiss), things have gotten a little more complicated for marketers. Our images need to be optimized for the device on which our users engaging with content, while also loading quickly and efficiently.

Now what does all that have to do with my banner image?

Well, it turns out that, the 600x200 image I was using was being set to a Device Pixel Ratio DPR of 1. That basically means that you get fewer pixels in your image which, when viewed on a high-resolution display, comes out looking like hot garbage extremely blurry. This effect happens because high-resolution displays can fit more pixels in essentially the same amount of visual space.

It fortunately displayed just fine on lower-resolution devices, but that wasn’t much consolation knowing that many individuals receiving the message would be viewing it on high-resolution devices.

Ruby:
cl_image_tag("imagecon_banner_2018_vq2qe9.jpg", :dpr=>2.0, :width=>600, :crop=>"scale")
PHP:
cl_image_tag("imagecon_banner_2018_vq2qe9.jpg", array("dpr"=>2.0, "width"=>600, "crop"=>"scale"))
Python:
CloudinaryImage("imagecon_banner_2018_vq2qe9.jpg").image(dpr=2.0, width=600, crop="scale")
Node.js:
cloudinary.image("imagecon_banner_2018_vq2qe9.jpg", {dpr: "2.0", width: 600, crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().dpr(2.0).width(600).crop("scale")).imageTag("imagecon_banner_2018_vq2qe9.jpg");
JS:
cloudinary.imageTag('imagecon_banner_2018_vq2qe9.jpg', {dpr: "2.0", width: 600, crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("imagecon_banner_2018_vq2qe9.jpg", {dpr: "2.0", width: 600, crop: "scale"})
React:
<Image publicId="imagecon_banner_2018_vq2qe9.jpg" >
  <Transformation dpr="2.0" width="600" crop="scale" />
</Image>
Angular:
<cl-image public-id="imagecon_banner_2018_vq2qe9.jpg" >
  <cl-transformation dpr="2.0" width="600" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Dpr(2.0).Width(600).Crop("scale")).BuildImageTag("imagecon_banner_2018_vq2qe9.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().dpr(2.0).width(600).crop("scale")).generate("imagecon_banner_2018_vq2qe9.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setDpr(2.0).setWidth(600).setCrop("scale")).generate("imagecon_banner_2018_vq2qe9.jpg")!, cloudinary: cloudinary)
ImageCon

So… much… better.

When you can automatically optimize your images for delivery based on the viewing device, that’s great. When you can do it all within the URL - without having to upload multiple images - that’s even better.

With a small addition of dpr_2.0 to the image URL in Cloudinary, I was able to sharpen the image almost instantly:

http://res.cloudinary.com/demo/image/upload/dpr_2.0,w_600/imagecon_banner_2018_vq2qe9.jpg

You are technically able to accomplish the exact same thing by simply doubling the image resolution. However, with this URL in hand, I can repurpose the exact same image and replicate it across any of our assets and site pages via a simple modification of the URL. This saves serious hassles for me, my design team and my developers a huge headache since I don’t have to bug them for multiple copies of the exact same image.

With that easy change to the URL, I now have a new image that I’m content to send out enhance the email I’m planning to send, as well as a replicable asset that I can modify with minuscule effort. Email is done, frustrations have subsided, a plan is in motion for additional ImageCon assets, and all is right in the world.

Life is so much easier when your images look good, isn’t it?

Recent Blog Posts

The Visual Media Report: Visual Engagement and User Experience

With privacy top of mind, we wondered what we might learn from analyzing the large volume of data. What user behaviors would we discover, what regional differences might exist? What insights or early hints from different industries could we extrapolate? These questions guided us as we analyzed millions of anonymous end-user experiences and asset interactions across our platform.

Read more
How a Cloud-native DAM Platform Optimizes Customer Experiences

In today’s digital age, brands rely heavily on rich media to tell stories, foster engagement, and make emotional connections that drive results. Marketers use videos and images, tuned to customers’ interests, to create dynamic visual experiences. Digital campaigns about trips to Florida, for instance, have separate plot lines, depending on audiences’ passions for golf, deep sea fishing, or kid-friendly versus romantic getaways. Marketers expect to detect preferences, produce personalized experiences highlighting different desires, and turn digital prospects into vacationing customers. The ultimate success of a marketing campaign relies on the consistent delivery of these customer experiences, at scale.

Read more
Cloudinary’s Media Developer Experts Program

Cloudinary was founded by developers and developer-centric thinking is in our DNA. Our work with developers helps them better understand all things rich-media management and delivery is crucial to us. Now, in an effort to recognize, support, and reward the innovative leaders in that technical community, we’re excited to introduce a new Media Developer Experts (MDE) program! MDEs will leverage the Cloudinary platform to foster a community of media-management professionals; receive training and certifications to become experts within their field or audience; advance the state of media management, adoption, and best practices; and make the web more accessible.

Read more
An Eye-Opening Talk: Building Apps for the Next Billion Users in Africa

William (iChuloo) Imoh, who hails from Lagos, Nigeria, recently embarked on a U.S. speaking tour, February 20-March 12, during which he powwowed with technical and product teams and communities at such renowned enterprises as Netlify, Pluralsight, Lucidchart, Twilio, and more in Salt Lake City, Dallas, Las Vegas, and San Francisco. On March 5, he gave an enlightening talk, entitled International Developers and Development: Building for the Next Billion Users at Cloudinary in Santa Clara, California. Below is a synopsis. For details, see the related slides.

Read more
The Debut of the Cloudinary Customer Advisory Board

Focus on customers has always been Cloudinary’s mantra. Because we owe them our success, we are constantly reaching out to our customers, not just for feedback on our offerings, but also for their vision, wish list, and buy-in of what Cloudinary can do to meet their needs and make them succeed. About six months ago, it occurred to us that it would be beneficial if we could meet regularly with those who are behind innovation at our key customers—executives, product gurus, developers, content managers—to swap strategies, product roadmaps, best practices, and such. In particular, we’d like to solicit actionable feedback as a foundation for our plans of product enhancements.

Read more