VIESUS™ Automatic Image Enhancement

Overview

Cloudinary is a cloud-based service that provides an end-to-end image management solution including uploads, storage, manipulations, optimizations and delivery.

VIESUS™ is a software application developed by Imaging Solutions AG that takes everyday digital camera images and enhances them to look more visually attractive. VIESUS™ first analyses the image data then automatically applies any processing steps as needed: adjusting brightness and color, restoring sharpness, removing noise, correcting for overexposure or underexposure, and more. Cloudinary provides an add-on for using VIESUS™'s image enhancement capabilities, fully integrated into Cloudinary's image management and manipulation pipeline. With VIESUS™'s image enhancement add-on, you can extend Cloudinary's powerful image manipulation and optimization capabilities by automatically enhancing images to their best visual quality.

Enhancing images

Take a look at the following photo of a beach that was uploaded to Cloudinary's demo account. The original photo has dark coloring and looks like it was taken on an overcast day, in contrast to the minimal cloud covering visible in the image.

URLRubyPHPPythonNode.jsJavajQuery.NetAll
URL:
http://res.cloudinary.com/demo/image/upload/beach.jpg
Ruby:
cl_image_tag("beach.jpg")
PHP:
cl_image_tag("beach.jpg")
Python:
CloudinaryImage("beach.jpg").image()
Node.js:
cloudinary.image("beach.jpg")
Java:
cloudinary.url().imageTag("beach.jpg")
jQuery:
$.cloudinary.image("beach.jpg")
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("beach.jpg")
Original beach image

Setting the effect transformation parameter to viesus_correct (or e_viesus_correct for URLs) tells Cloudinary to dynamically enhance the image to the best visual quality using the VIESUS™ add-on. The brightness is increased and the colors appear more vivid, while the photo now looks like it was taken on a bright sunny day. The generated image is stored in the cloud and delivered optimized via a fast CDN.

URLRubyPHPPythonNode.jsJavajQuery.NetAll
URL:
http://res.cloudinary.com/demo/image/upload/e_viesus_correct/beach.jpg
Ruby:
cl_image_tag("beach.jpg", :effect=>"viesus_correct")
PHP:
cl_image_tag("beach.jpg", array("effect"=>"viesus_correct"))
Python:
CloudinaryImage("beach.jpg").image(effect="viesus_correct")
Node.js:
cloudinary.image("beach.jpg", {effect: "viesus_correct"})
Java:
cloudinary.url().transformation(new Transformation().effect("viesus_correct")).imageTag("beach.jpg")
jQuery:
$.cloudinary.image("beach.jpg", {effect: "viesus_correct"})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("viesus_correct")).BuildImageTag("beach.jpg")
Auto corrected beach image

Cloudinary's dynamic image manipulation URLs are powerful tools for agile web and mobile development. However, due to the potential costs of users accessing unplanned dynamic URLs with the VIESUS™ enhancement, you need to either sign your image manipulation URLs or eagerly generate the requested derived images using Cloudinary's authenticated API.

Note that if you need to remove this restriction you can contact Cloudinary support.

Signed URLs

A signed Cloudinary image URL is a dynamic URL that will have its signature validated before making it available for view. In order to create a signed Cloudinary URL, simply set the sign_url parameter to true when building a URL or creating an image tag. The following code example generates an image tag for the beach.jpg image with a signed Cloudinary URL, while visually enhancing the image by setting the effect transformation to viesus_correct and scaling the size to a width of 400 pixels:

RubyPHPPythonNode.jsJavajQuery.NetAll
Ruby:
cl_image_tag("beach.jpg", :effect=>"viesus_correct", :width=>400, :crop=>"scale", :sign_url=>true)
PHP:
cl_image_tag("beach.jpg", array("effect"=>"viesus_correct", "width"=>400, "crop"=>"scale", "sign_url"=>true))
Python:
CloudinaryImage("beach.jpg").image(effect="viesus_correct", width=400, crop="scale", sign_url=True)
Node.js:
cloudinary.image("beach.jpg", {effect: "viesus_correct", width: 400, crop: "scale", sign_url: true})
Java:
cloudinary.url().transformation(new Transformation().effect("viesus_correct").width(400).crop("scale")).signed(true).imageTag("beach.jpg")
jQuery:
$.cloudinary.image("beach.jpg", {effect: "viesus_correct", width: 400, crop: "scale"})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("viesus_correct").Width(400).Crop("scale")).Signed(true).BuildImageTag("beach.jpg")
Code for generating viesus enhanced signed URL

The generated Cloudinary URL shown below includes a signature component (s--58dQFhjW--). Only URLs with a valid signature that matches the requested image manipulation will be approved for on-the-fly image manipulation and delivery.

http://res.cloudinary.com/demo/image/upload/s--58dQFhjW--/c_scale,e_viesus_correct,w_400/beach.jpg

For more details on signed URLs, see On-the-fly image manipulations secured with signed URLs.

Eager transformations

As an alternative to signed URLs, you can eagerly generate all converted images during upload. By using Cloudinary's authenticated API for requesting VIESUS™ image enhancement, accessing the generated images thereafter can be done using regular unsigned Cloudinary URLs.

The following code sample uploads a local JPG file to Cloudinary, assigns a public ID of "beach" and eagerly generates a 400 pixel wide image that is visually enhanced using the VIESUS™ add-on (as in the signed-URL example above):

RubyPHPPythonNode.jsJavaAll
Ruby:
Cloudinary::Uploader.upload("local_file.jpg", 
  :public_id => "beach",
  :eager => { :effect => "viesus_correct", :crop => "scale", :width => 400 })
PHP:
\Cloudinary\Uploader::upload("local_file.jpg", 
  array(
    "public_id" = "beach",
    "eager" => 
      array( "effect" => "viesus_correct", "crop" => "scale", "width" => 400 )
));
Python:
cloudinary.uploader.upload("local_file.jpg",
  public_id = "beach",  
  eager = { 'effect': 'viesus_correct', 'crop': "scale", 'width': 400 })
Node.js:
cloudinary.uploader.upload("local_file.jpg", 
  function(result) { console.log(result); }, 
  { public_id: "beach", 
    eager: { effect: "viesus_correct", crop: "scale", width: 400 }});
Java:
cloudinary.uploader().upload("local_file.jpg", 
  Cloudinary.asMap("public_id", "beach", "eager",
    Arrays.asList(new Transformation().effect("viesus_correct").crop("scale").
      width(400))));

The resized and visually enhanced image is available for delivery immediately when the upload request completes. Therefore, the visually enhanced version can be accessed using an unsigned URL as in the example below:

URLRubyPHPPythonNode.jsJavajQuery.NetAll
URL:
http://res.cloudinary.com/demo/image/upload/c_scale,e_viesus_correct,w_400/beach.jpg
Ruby:
cl_image_tag("beach.jpg", :effect=>"viesus_correct", :width=>400, :crop=>"scale")
PHP:
cl_image_tag("beach.jpg", array("effect"=>"viesus_correct", "width"=>400, "crop"=>"scale"))
Python:
CloudinaryImage("beach.jpg").image(effect="viesus_correct", width=400, crop="scale")
Node.js:
cloudinary.image("beach.jpg", {effect: "viesus_correct", width: 400, crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().effect("viesus_correct").width(400).crop("scale")).imageTag("beach.jpg")
jQuery:
$.cloudinary.image("beach.jpg", {effect: "viesus_correct", width: 400, crop: "scale"})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("viesus_correct").Width(400).Crop("scale")).BuildImageTag("beach.jpg")
Correct beach photo

Further image manipulations

Visual enhancement using the VIESUS™ add-on can be mixed with any of Cloudinary's rich set of image manipulation capabilities. For example, the following code first crops the uploaded beach image to a width of 1000 pixels with south gravity, while visually enhancing the derived image with VIESUS™ and rounding its corners. Then another uploaded image named viesus_logo is added as an overlay. The overlay is resized to a width of 100 pixels, positioned 10 pixels from the top right corner of the containing image and is made 50% semi transparent.

URLRubyPHPPythonNode.jsJavajQuery.NetAll
URL:
http://res.cloudinary.com/demo/image/upload/s--Ko8FkC0v--/c_crop,e_viesus_correct,g_south,r_20,w_1000/c_scale,g_north_east,l_viesus_logo,o_50,w_100,x_10,y_10/c_scale,w_600/v1431519366/beach.jpg
Ruby:
cl_image_tag("beach.jpg", :sign_url=>true, :transformation=>[
  {:effect=>"viesus_correct", :gravity=>"south", :radius=>20, :width=>1000, :crop=>"crop"},
  {:gravity=>"north_east", :overlay=>"viesus_logo", :opacity=>50, :width=>100, :x=>10, :y=>10, :crop=>"scale"},
  {:width=>600, :crop=>"scale"}
  ])
PHP:
cl_image_tag("beach.jpg", array("sign_url"=>true, "transformation"=>array(
  array("effect"=>"viesus_correct", "gravity"=>"south", "radius"=>20, "width"=>1000, "crop"=>"crop"),
  array("gravity"=>"north_east", "overlay"=>"viesus_logo", "opacity"=>50, "width"=>100, "x"=>10, "y"=>10, "crop"=>"scale"),
  array("width"=>600, "crop"=>"scale")
  )))
Python:
CloudinaryImage("beach.jpg").image(sign_url=True, transformation=[
  {"effect": "viesus_correct", "gravity": "south", "radius": 20, "width": 1000, "crop": "crop"},
  {"gravity": "north_east", "overlay": "viesus_logo", "opacity": 50, "width": 100, "x": 10, "y": 10, "crop": "scale"},
  {"width": 600, "crop": "scale"}
  ])
Node.js:
cloudinary.image("beach.jpg", {sign_url: true, transformation: [
  {effect: "viesus_correct", gravity: "south", radius: 20, width: 1000, crop: "crop"},
  {gravity: "north_east", overlay: "viesus_logo", opacity: 50, width: 100, x: 10, y: 10, crop: "scale"},
  {width: 600, crop: "scale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .effect("viesus_correct").gravity("south").radius(20).width(1000).crop("crop").chain()
  .gravity("north_east").overlay("viesus_logo").opacity(50).width(100).x(10).y(10).crop("scale").chain()
  .width(600).crop("scale")).signed(true).imageTag("beach.jpg")
jQuery:
$.cloudinary.image("beach.jpg", {transformation: [
  {effect: "viesus_correct", gravity: "south", radius: 20, width: 1000, crop: "crop"},
  {gravity: "north_east", overlay: "viesus_logo", opacity: 50, width: 100, x: 10, y: 10, crop: "scale"},
  {width: 600, crop: "scale"}
  ]})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("viesus_correct").Gravity("south").Radius(20).Width(1000).Crop("crop").Chain()
  .Gravity("north_east").Overlay("viesus_logo").Opacity(50).Width(100).X(10).Y(10).Crop("scale").Chain()
  .Width(600).Crop("scale")).Signed(true).BuildImageTag("beach.jpg")
beach.jpg cropped to 1000 pixels with rounded corners, enhanced with viesus and a logo overlay

For a full list of additional Cloudinary's image manipulation options, see the Image transformations documentation.