Cloudinary Blog
Learn more...

How to automatically adapt website images to Retina and HiDPI devices

Jul 24, 2014 by Nadav Soferman

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

$.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 $.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.

Automatic image moderation, removing adult or inappropriate photos using WebPurify and Cloudinary

Jul 22, 2014 by Nadav Soferman

WebPurify moderation add-on If your web or mobile application involves user-generated content, you may encounter users who upload inappropriate photos or images to your application. These could be images which offend other users - adult content, violent photos, etc. - or images which cause your site to violate laws or regulations.

There are two ways to identify and remove such images: you can either require approval of each image before it is displayed to your users, or display images immediately after upload, and then quickly remove them from your site as soon as a moderator has found them to be inappropriate.

→ Read the full post

Direct upload made easy, from browser or mobile app to the cloud

Jul 16, 2014 by Nadav Soferman

Unsigned upload Handling user uploaded images on your website can be a time consuming task. In this post, we'll show how Cloudinary's cloud-based image management service can help you turn user uploading into a lightweight operation that bypasses your servers altogether.

How do you handle user uploads today? If images are uploaded directly to your servers, this requires some heavy server-side processing, bandwidth and storage space. One way to offload images is to transfer them to cloud storage. But if you're handling the upload operation on your own servers (and then transferring them to the cloud), this is still wasteful of server resources.

→ Read the full post

Keep.com, releasing the image processing bottleneck

Jul 10, 2014 by Itai Lahan

Keep & Cloudinary Cloudinary is passionate about its users. We built our cloud-based image management features around real-world pain points, and it's gratifying to see our customers use those features to solve major business challenges.

One example is Keep.com, an innovative online commerce startup, which the Huffington Post has called "the only fashion app worth getting". We wanted to share the story of how Keep used Cloudinary to remove a major bottleneck in the development of their website and business.

→ Read the full post

Image manipulation recipes in the cloud. The Cloudinary Cookbook

Jun 26, 2014 by Nadav Soferman

Cloudinary Cookbook How do you crop an image to a custom shape? How do you add a shadow effect to an image with transparency? How do you add text overlay to an image without using HTML?

If you build or maintain a website with a lot of images, you've probably had many questions like these. Most developers who work with images have scripts or tools that can achieve dozens if not hundreds of image manipulations - from basics like crop and resize, to advanced stuff like shadow and transparency, watermarks, face detection, etc. But how do you mix and match these manipulations correctly to solve a problem or achieve a certain effect?

→ Read the full post

Animated WebP - how to convert animated GIF to WebP and save up to 90% bandwidth

Jun 16, 2014 by Nadav Soferman

Animated WebP Fashion isn't something you'd expect to repeat itself in the technology world - technology advances quickly and hardly ever circles back. But where animated GIFs are involved, it seems like the 90s are here again. Animated GIFs are everywhere, and not only on strange, cheezy web sites - they've become mainstream. You now see short videos shared and played as animated GIFs in reputed sites such as Gawker and TechCrunch.

→ Read the full post

Centralized control for image upload - image size, format, thumbnail generation, tagging and more

Jun 09, 2014 by Nadav Soferman

Upload presets There are many options to consider when allowing a user to upload an image to your website or mobile app. You might wish to limit the size and format of the uploaded images. You may want to apply specific manipulations to the images, such as cropping, resizing and adapting the image to your site's look & feel. Beyond that, it's common to create a variety of thumbnails from a newly uploaded image.

→ Read the full post

Optimize your JPEG images without compromising quality with JPEGmini and Cloudinary

May 29, 2014 by Nadav Soferman

JPEGmini Image optimization is an important step to reducing page load times, improving user experience and reducing bandwidth costs. When using the JPEG image format, which is best used for photos, the most common optimization is controlling the JPEG quality level.

By lowering JPEG quality, say to 90%, 80% or even 50%, you'll get much smaller JPEG files. But will image quality be good enough? JPEG optimization is tricky because if quality is too low, you'll get blurry images, pixelation and visible compression artifacts; if it's too high, images will look good but take too long to load.

→ Read the full post

How to overlay text on image easily, pixel perfect and with no CSS/HTML

May 22, 2014 by Nadav Soferman

Dynamic text style

Our customers frequently ask us if we can help them apply dynamic text overlays over images. While a common approach is to add text elements in your pages using HTML elements, CSS or native mobile UI controls, in many cases it's preferable to create images with text layers already included. It makes it simpler to display rich content on different media channels and devices, while ensuring a pixel-perfect result as your graphic designer envisioned.

→ Read the full post

Image moderation made easy using cloud-based UI and API

May 16, 2014 by Nadav Soferman

Manual image moderation Many websites and mobile apps today allow their visitors to share their own photos. Users upload their profile images to dating sites, photos of their personal belongings to second hand market websites and real estate billboards. Users share their personal photos on social networks, and upload images to their favorite e-commerce websites, showcasing and reviewing their latest purchases.

It’s sometimes quite important to moderate these images. You might want to keep out offensive content. You may want to actively reject images that do not answer your website’s needs, for example, make sure there are visible faces in profile images, or that only photos of your brand appear on a shared marketing campaign. You may also want to make sure that photos are of high enough quality before making them available on your website.

→ Read the full post
More posts...