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:
Copy to clipboard
cl_image_tag("imagecon_banner_2018_vq2qe9.jpg", :dpr=>2.0, :width=>600, :crop=>"scale")
PHP v1:
Copy to clipboard
cl_image_tag("imagecon_banner_2018_vq2qe9.jpg", array("dpr"=>"2.0", "width"=>600, "crop"=>"scale"))
PHP v2:
Copy to clipboard
(new ImageTag('imagecon_banner_2018_vq2qe9.jpg'))
  ->resize(Resize::scale()->width(600))
  ->delivery(Delivery::dpr(2.0));
Python:
Copy to clipboard
CloudinaryImage("imagecon_banner_2018_vq2qe9.jpg").image(dpr="2.0", width=600, crop="scale")
Node.js:
Copy to clipboard
cloudinary.image("imagecon_banner_2018_vq2qe9.jpg", {dpr: "2.0", width: 600, crop: "scale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().dpr(2.0).width(600).crop("scale")).imageTag("imagecon_banner_2018_vq2qe9.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('imagecon_banner_2018_vq2qe9.jpg', {dpr: "2.0", width: 600, crop: "scale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("imagecon_banner_2018_vq2qe9.jpg", {dpr: "2.0", width: 600, crop: "scale"})
React:
Copy to clipboard
<Image publicId="imagecon_banner_2018_vq2qe9.jpg" >
  <Transformation dpr="2.0" width="600" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="imagecon_banner_2018_vq2qe9.jpg" >
  <cld-transformation dpr="2.0" width="600" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="imagecon_banner_2018_vq2qe9.jpg" >
  <cl-transformation dpr="2.0" width="600" crop="scale">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Dpr(2.0).Width(600).Crop("scale")).BuildImageTag("imagecon_banner_2018_vq2qe9.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().dpr(2.0).width(600).crop("scale")).generate("imagecon_banner_2018_vq2qe9.jpg");
iOS:
Copy to clipboard
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:

Copy to clipboard
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

Create Lightweight Sites With Low-Code and No-Code Technology

Consumers expect modern websites to be mainly visual. But, the more compelling and complex the related media is, the more data is involved, compounding the site’s weight. In today’s content-craving world, delivering unoptimized media can cost you because it leads to sluggish page loads, resulting in visitors abandoning your site in search of a faster alternative. In fact, a page load that takes more than three seconds can cause as many as 40% of your visitors to bounce. Given this competitive, digital-first environment, you can’t afford to lose page views, for time is of the essence.

Read more
A Blueprint for AWS-Secured Webhook Listeners for Cloudinary

tl;dr: An AWS-secured and optimized Cloudinary webhook listener for extending the Cloudinary service

Code: Github

A webhook is a communication medium for sending notifications from one platform to another about events that occurred. In place are user-defined HTTP callbacks that are triggered by specific events. When a triggered event takes place on the source site, the webhook listens to the event, collects the data, and sends it to the URL you specified in the form of an HTTP request.

Read more
New Accessibility Features for Cloudinary’s Product Gallery Widget

Cloudinary’s Product Gallery widget, which launched in 2019, has enabled many brands to effectively and efficiently showcase their products in a sleek and captivating manner, saving countless hours of development time and accelerating release cycles. By adding Cloudinary’s Product Gallery widget with its customizable UI to their product page, retailers reap numerous benefits, often turning visitors into customers in short order.

Read more
Why Successful Businesses Engage With and Convert Audiences With Visual Media

Most business buyers prefer to research purchase options online, as do many shoppers. No wonder online retail sales in the U.S. rose by 32.4% in 2020—an impressive gain of $105 billion.

For B2B and B2C businesses, text-heavy websites are no longer adequate in attracting shoppers. Instead, engaging visual media—spin images, videos, 3D models, augmented reality—are becoming a must for conveying eye-catching details and differentiators about products or services.

Read more
Making User-Generated Content (UGC) Shoppable With Cloudinary

User-generated content (UGC) is a powerful marketing tool. Not only does video complement marketing efforts for e-commerce by enabling customers to explore products in greater detail, but UGC also adds an element of trust. As a bonus, user-generated video is an exceptional opportunity for e-businesses to attract website traffic without their marketing team having to create promotional videos from scratch. User-generated content drives conversions and brand loyalty as a direct result of authentic interaction.

Read more