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

How to Customize Cloudinary's eCommerce Android App

Recently we added the Cloudinary Demo - eCommerce App to the Google Play Store. This app demonstrates the best practices for optimal delivery of images on a storefront, including category pages, product pages, and a shopping cart. At the time, we published Introducing the Cloudinary Demo Android App, Part 1, which provided an under-the-hood tour of how the eCommerce Android App was designed and how Cloudinary was integrated throughout.

Read more
The New Cloudinary Flexible and Dynamic Website Design

Last month we unveiled a refresh of our website. As with all redesigns, there were numerous drivers behind the rollout. First and foremost, we’re a company that understands the power of visual storytelling, and the ways in which a website must beautifully and clearly convey a brand’s story and offerings. Our website needed to better reflect our brand and our solutions. This post highlights some of the thinking behind our changes.

Read more
Auto-Generate Video Previews with Great Results Every Time

If you are an avid YouTube viewer or a Netflix binger, you might have noticed some fascinating changes in their latest preview thumbnails. They sure are attention grabbing, aren’t they?

Video previews are becoming more and more popular, not the least because they entice viewers, attract clickthroughs and, more often than not, gain a happy and loyal audience. Problem is, the task sounds like an art in itself. Just how can you go about creating appealing video previews without having to rely on movie professionals? Have you ever wished that you could quickly create video previews like those on YouTube and Netflix, but still rest assured that they'll include the good stuff?

Read more