Cloudinary Blog

How to automatically adapt website images to Retina and HiDPI devices

by Nadav Soferman
Adapting website images to Retina/HiDPI/high DPR devices

Web development was much simpler only a few years ago, when we were building HTML pages that included images and photos, and all elements shared the same resolution units. If for example, you aimed at a standard 1024x768 screen, you knew these were exactly the number of pixels available for displaying HTML elements and images.

In 2010, Apple introduced the iPhone 4 with Retina display. In order to simplify things for developers, the logical screen resolution remained the same as previous iPhone models (640x960) while the physical screen resolution was exactly doubled (1280x1920). This means that if, for example, you embed an image tag in your HTML page with width of 200 pixels and height of 300 pixels, and you display a double-size image of 400x600 pixels, the Retina display shows all pixels of the larger image, resulting in a much clearer visual result and without performing browser-side down-scaling.

Since then, most of Apple's devices support this Device Pixel Ratio (DPR) of 2.0 (double physical resolution compared to logical resolution), including iPhone, iPad and Macbook Pro laptops. Android smartphones and tablets followed this trend, but there is a large variety of Android devices with different Device Pixel Ratios. For example, Samsung Galaxy S III has a DPR of 2.0, while the Samsung Galaxy S4 and LG G2 have a DPR of 3.0 (triple physical resolution). Some Android devices have non-round DPR values as well: 1.3, 1.5 and even 0.75.

DPR Illustration

Your website or mobile site is probably accessed by many users with HiDPI devices, or laptops with DPR higher than 1.0, so you should deliver high-resolution images to match the high visual quality your users expect. However, higher resolution images weigh more bytes and take more time to deliver, so you should avoid delivering double resolution images to standard devices of DPR 1.0. If you want to deliver different image resolutions to each type of device, you first need to create multiple versions of an image for each supported DPR, then detect the DPR of the user's current device, and deliver the correct image version.

Creating and dynamically serving images with multiple resolutions, coupled with dynamic DPR detection for correct responsive delivery, can be quite challenging. That's why we introduced Cloudinary's Retina and HiDPI support with dynamic DPR detection and on-the-fly DPR-specific image delivery.

This new feature allows you to provide one image, and have it automatically adapted to the resolution appropriate to each user’s device or screen. Cloudinary will take your one image and automatically create versions of it, matching different resolutions, on the fly. Meaning that users of devices with high pixel density will get a great visual result, while low-DPR users don't have to wait needlessly for larger images to load.

Dynamic image scaling based on Device Pixel Ratio (DPR)

Let's take the following image named 'smiling_man' that was uploaded to Cloudinary's cloud-based image management service. The original image is of 849x565 pixels (below you can see a scaled down sample of 254x169 pixels)

Ruby:
cl_image_tag("smiling_man.jpg")
PHP:
cl_image_tag("smiling_man.jpg")
Python:
CloudinaryImage("smiling_man.jpg").image()
Node.js:
cloudinary.image("smiling_man.jpg")
Java:
cloudinary.url().imageTag("smiling_man.jpg")
jQuery:
$.cloudinary.image("smiling_man.jpg")
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("smiling_man.jpg")
Uploaded smiling man photo

Let's say that in your website or mobile application you need a 100x100 profile picture thumbnail of this uploaded photo. Cloudinary can perform this image manipulation on-the-fly. The following dynamic URL and sample code generates a 100x100 face-detection based version of the photo, by setting the width and height parameters to 100, selecting the fill crop mode with face gravity, for face-detection-based cropping:

Ruby:
cl_image_tag("smiling_man.jpg", :width=>100, :height=>100, :gravity=>"face", :crop=>"fill")
PHP:
cl_image_tag("smiling_man.jpg", array("width"=>100, "height"=>100, "gravity"=>"face", "crop"=>"fill"))
Python:
CloudinaryImage("smiling_man.jpg").image(width=100, height=100, gravity="face", crop="fill")
Node.js:
cloudinary.image("smiling_man.jpg", {width: 100, height: 100, gravity: "face", crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(100).height(100).gravity("face").crop("fill")).imageTag("smiling_man.jpg")
jQuery:
$.cloudinary.image("smiling_man.jpg", {width: 100, height: 100, gravity: "face", crop: "fill"})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(100).Height(100).Gravity("face").Crop("fill")).BuildImageTag("smiling_man.jpg")
100x100 face detection based thumbnail

Now, in order to generate the same photo, this time for a DPR of 2.0, all you need to do is to set the new dpr transformation parameter to 2.0. As you can see below, setting the dpr parameter to 1.0, 2.0 and 3.0 dynamically generates the same content with 100x100, 200x200 and 300x300 pixels respectively.

Ruby:
cl_image_tag("smiling_man.jpg", :width=>100, :height=>100, :gravity=>"face", :dpr=>2.0, :crop=>"fill")
PHP:
cl_image_tag("smiling_man.jpg", array("width"=>100, "height"=>100, "gravity"=>"face", "dpr"=>2.0, "crop"=>"fill"))
Python:
CloudinaryImage("smiling_man.jpg").image(width=100, height=100, gravity="face", dpr=2.0, crop="fill")
Node.js:
cloudinary.image("smiling_man.jpg", {width: 100, height: 100, gravity: "face", dpr: 2.0, crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(100).height(100).gravity("face").dpr(2.0).crop("fill")).imageTag("smiling_man.jpg")
jQuery:
$.cloudinary.image("smiling_man.jpg", {width: 100, height: 100, gravity: "face", dpr: 2.0, crop: "fill"})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(100).Height(100).Gravity("face").Dpr(2.0).Crop("fill")).BuildImageTag("smiling_man.jpg")

DPR 1.0 thumbnail

DPR 2.0 thumbnail

DPR 3.0 thumbnail

DPR 1.0                   DPR 2.0                                                     DPR 3.0

When embedding these images, in an HTML page for example, you should set the width and height image tag attributes to 100 for all three, although the actual image might have more pixels available, for an optimal visual result on HiDPI devices.

<img width="100" height="100" src="http://res.cloudinary.com/demo/image/upload/c_fill,w_100,h_100,g_face,dpr_2.0/smiling_man.jpg"/>

You can create image tags that have the logical width and height (100x100 in our example), while the URL of the image can be a dynamic image manipulation URL that delivers a larger image according to the given dpr parameter. The three images below are all displayed within a 100x100 logical square, while you see more details and a better visual result for the last two images if you view this post using a HiDPI device.

DPR 1.0 thumbnail in HTML

DPR 2.0 thumbnail in HTML

DPR 3.0 thumbnail in HTML

DPR 1.0 (100x100, 4.6KB)                  DPR 2.0 (200x200, 12.1KB)                DPR 3.0 (300x300, 22.6KB)

Image overlays with dynamic Device Pixel Ratio (DPR) based resizing

Images delivered by web applications and mobile sites might be more complex and involve overlays. If you are already familiar with Cloudinary, you know that Cloudinary supports dynamically generating images with overlays and watermarks of other uploaded image (see this blog post for more details).

When adding overlays, you need the overlay image to be correctly resized according to the required pixel density of the device (along with the containing image). Setting the dpr transformation parameter applies the same resizing rules both to the containing image, and the included overlay.

For example, the following URL dynamically generates a 100x100 face-detection-based circular thumbnail of the same photo, and adds another image named cloudinary_icon as a semi-transparent watermark that fills 90% of the width of the containing image. Setting the dpr value to 1.0, 2.0 or 3.0 generates the following images, while resizing both the containing image and the overlay to match the required DPR.

Ruby:
cl_image_tag("smiling_man.jpg", :transformation=>[
  {:width=>100, :height=>100, :gravity=>"face", :radius=>"max", :crop=>"thumb"},
  {:overlay=>"cloudinary_icon", :effect=>"brightness:200", :flags=>"relative", :width=>0.9, :opacity=>60},
  {:dpr=>2.0}
  ])
PHP:
cl_image_tag("smiling_man.jpg", array("transformation"=>array(
  array("width"=>100, "height"=>100, "gravity"=>"face", "radius"=>"max", "crop"=>"thumb"),
  array("overlay"=>"cloudinary_icon", "effect"=>"brightness:200", "flags"=>"relative", "width"=>0.9, "opacity"=>60),
  array("dpr"=>2.0)
  )))
Python:
CloudinaryImage("smiling_man.jpg").image(transformation=[
  {"width": 100, "height": 100, "gravity": "face", "radius": "max", "crop": "thumb"},
  {"overlay": "cloudinary_icon", "effect": "brightness:200", "flags": "relative", "width": 0.9, "opacity": 60},
  {"dpr": 2.0}
  ])
Node.js:
cloudinary.image("smiling_man.jpg", {transformation: [
  {width: 100, height: 100, gravity: "face", radius: "max", crop: "thumb"},
  {overlay: "cloudinary_icon", effect: "brightness:200", flags: "relative", width: 0.9, opacity: 60},
  {dpr: 2.0}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(100).height(100).gravity("face").radius("max").crop("thumb").chain()
  .overlay("cloudinary_icon").effect("brightness:200").flags("relative").width(0.9).opacity(60).chain()
  .dpr(2.0)).imageTag("smiling_man.jpg")
jQuery:
$.cloudinary.image("smiling_man.jpg", {transformation: [
  {width: 100, height: 100, gravity: "face", radius: "max", crop: "thumb"},
  {overlay: "cloudinary_icon", effect: "brightness:200", flags: "relative", width: 0.9, opacity: 60},
  {dpr: 2.0}
  ]})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(100).Height(100).Gravity("face").Radius("max").Crop("thumb").Chain()
  .Overlay("cloudinary_icon").Effect("brightness:200").Flags("relative").Width(0.9).Opacity(60).Chain()
  .Dpr(2.0)).BuildImageTag("smiling_man.jpg")

DPR 1.0 circular thumbnail with a watermark

DPR 2.0 circular thumbnail with a watermark

DPR 3.0 circular thumbnail with a watermark

DPR 1.0                   DPR 2.0                                                     DPR 3.0

Now you can create a 100x100 HTML image tag and deliver an image with the resolution that best matches the specified pixel density of your users' devices.

DPR 1.0 circular thumbnail with a watermark in HTML

DPR 2.0 circular thumbnail with a watermark  in HTML

DPR 3.0 circular thumbnail with a watermark in HTML

DPR 1.0 (100x100, 4.8KB)                  DPR 2.0 (200x200, 12.8KB)                DPR 3.0 (300x300, 23.1KB)

Automatic DPR detection and delivery of best image quality using jQuery

In order to automatically serve the correct DPR version of an image to each user, you need to detect the DPR on the user's device. If your web application or mobile site is mostly dynamic and rendered on the server-side, one method is to check the User-Agent request header, and use it to set the correct DPR value of images embedded in your pages.

However, the User-Agent solution can be misleading - for example, the request header could show the user's device is a Macbook Pro Retina which has high DPR, but in fact the actual display is an external HD monitor with low DPR.

Cloudinary's jQuery plugin solves this, with client-side Javascript code that detects the actual device pixel ratio on the user's current display. Then, Cloudinary allows you to dynamically build image URLs with the best matching DPR value, and lazy-load the actual images using Javascript. You can do all this with one line of code.

<img class="cld-hidpi"
     data-src=
"http://res.cloudinary.com/demo/image/upload/c_fill,dpr_auto,h_200,w_150/lupine.jpg"
/>

Let's explain how this works. In the image tag above, the src attribute is not set (you can set it to a placeholder blank image such as /images/blank.gif). The data-src attribute is set to a URL template of a remote image that was uploaded to Cloudinary, while cropping to a 150x200 rectangle. The URL template contains the dpr_auto directive, which allows the jQuery plugin to dynamically generate an actual image with the correct DPR value (e.g., dpr_1.0, dpr_2.0).

So - all you need to do in order to make your site responsive to retina and HiDPI screens, is to include Cloudinary's jQuery plugin in your site (see the plugin's getting started guide) and to add the following Javascript command at the end of the HTML page.

$.cloudinary.responsive();

This method looks for all images in the page that have the cld-hidpi class, detects the device's pixel ratio, and updates the HTML image tags accordingly. Even if a user switches from Retina to non-Retina displays using the same device, correct DPR-based URLs will be generated.

You can also manually update image tags with the correct DPR-based URLs, using custom jQuery selection and applying the cloudinary_update method:

$('img.my_dymamic_images').cloudinary_update();

Server-side rendered pages can still enjoy the automatic device pixel ratio detection on the browser-side, as shown above. When using Cloudinary's view helper methods (e.g., cl_image_tag in Ruby on Rails), you can set the new dpr parameter to auto. This creates an HTML image tag with a blank src attribute while the data-src attribute points to a dynamic image manipulation URL.

When you load Cloudinary's jQuery plugin and call $.cloudinary.responsive(); the image tags are automatically updated, and URLs are replaced with the correct DPR value. You can also set your placeholder image using the responsive_placeholder parameter, or set to the default inline blank image.

Ruby:
<%= cl_image_tag("lupine.jpg", :width => 100, :height => 150, :crop => :fill, 
                 :dpr => :auto, :responsive_placeholder => "blank") %>
PHP:
<?php cl_image_tag("lupine.jpg",  array("width" => 100, "height" => 150, "crop" => "fill",
                   "dpr" => "auto", "responsive_placeholder" => "blank")); ?>
Python:
cloudinary.CloudinaryImage("lupine.jpg").image(width = 100,  height = 150,  crop = "fill", 
                   dpr = "auto", responsive_placeholder = "blank")
Node.js:
cloudinary.image("lupine.jpg",  { width: 100, height: 150, crop: 'fill',
                   dpr: 'auto', responsive_placeholder: 'blank' })

The following HTML image tag is generated by the code samples above:

<img class="cld-hidpi" height="150" width="100"
     data-src=
"http://res.cloudinary.com/demo/image/upload/c_fill,dpr_auto,h_150,w_100/lupine.jpg"
     src=
"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"  
/>

Lupin thumbnail with dynamic DPR

Summary

Web applications and mobile sites need to become more and more responsive to support the growing variety of devices, resolutions, aspect ratios and pixel densities. It's important to deliver images of adequate quality to high resolution devices, while preventing unnecessary delivery of large images to lower resolution devices, which wastes bandwidth and harms user experience by increasing page load times.

Cloudinary's cloud-based image processing makes it easier to support retina and HiDPI devices, by performing on-the-fly generation of images and thumbnails based on a given Device Pixel Ratio. Cloudinary's SDKs for all popular development frameworks, together with client side support using a jQuery plugin, allow automatic detection of the Device Pixel Ratio of users' devices and on-the-fly delivery of images with appropriate resolution - without needing to prepare those images ahead of time.

Retina and HiDPI support is part of the larger Responsive Design challenge, and we have more features coming up that will ease the process of making your sites and apps fully responsive. More details coming soon!

Dynamic DPR detection and cloud-based image resizing is available for all of Cloudinary's plans, including our free plan. Make sure to update your Cloudinary client libraries and jQuery plugin to the latest versions. And as usual, we look forward to your thoughts and feedback on this new feature, as we develop more image management capabilities that make Responsive Design easier to implement.

Recent Blog Posts

Dynamic ZIP files generation with a single line of code

As a developer, you want to allow your users to download multiple files in a single click. An easy way to download multiple files and share them is to generate a ZIP file. When images are involved, you may also want to normalize the original images before including them in the ZIP file, by scaling them down to the same maximum resolution or converting them to the same format.

Read more
How mindbodygreen reduce costs & save development time

mindbodygreen is a digital media brand dedicated to health and wellness. The company’s website bring together leaders in the wellness world, best-selling authors, fitness experts, trusted healers, pioneering doctors, top chefs, celebrities and top-tier journalists to provide readers fresh, expert content and tools to help them live healthy, happy lives. The company was founded in 2009 and is headquartered in Brooklyn, N.Y. 
Read more

Why JPEG is like a photocopier

by Jon Sneyers
Why JPEG is like a photocopier (generation loss)

If you make a copy of a copy of a copy, the quality will deteriorate with every ‘generation’. This problem is called ‘generation loss’. It is not difficult to understand why this happens with actual copier machines. Scanning and printing are not perfect, being based on noisy sensors and physical paper and ink, and the resulting noise will tend to accumulate.

Read more
Apply conditions to dynamically manipulate images.

It's great to have the capability to manipulate images on the fly by using dynamic URLs to customize the images to fit the graphic design of your site or mobile application. However, what if you want to manipulate an image depending on a specific image characteristic (like its width or aspect ratio) or its contents (does it contain a face?). What you need is a way to apply a transformation to an image only if a specific condition is met. Take for example a situation where you have allocated space on your page for a user uploaded image with a width and height of 200 pixels. Furthermore, if the image contains a face you would like to zoom in and focus on the face itself, otherwise you would like to fit the entire image into the available space:

Read more
Moviepilot focus on core business and reduce costs
 
Moviepilot Inc. is a media company that hosts a website and social publishing platform designed to bring together movie and TV fans, and help studios trigger, fuel and amplify positive conversations about entertainment topics. The site invites fans to create content, such as writing articles and producing videos, which are then curated on the site and distributed to more than 30 million fans worldwide. The site boasts more than 20 million unique visitors per month, with 87 percent of visitors accessing the site on mobile devices. The company is headquartered in Venice Beach, Calif., and has an office Berlin, Germany, where it was originally founded.
Read more