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.

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")
JS:
cl.imageTag('beach.jpg').toHtml();
jQuery:
$.cloudinary.image("beach.jpg")
React:
<Image publicId="beach.jpg" >

</Image>
Angular:
<cl-image public-id="beach.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("beach.jpg")
Android:
MediaManager.get().url().generate("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.

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")
JS:
cl.imageTag('beach.jpg', {effect: "viesus_correct"}).toHtml();
jQuery:
$.cloudinary.image("beach.jpg", {effect: "viesus_correct"})
React:
<Image publicId="beach.jpg" >
  <Transformation effect="viesus_correct" />
</Image>
Angular:
<cl-image public-id="beach.jpg" >
  <cl-transformation effect="viesus_correct">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("viesus_correct")).BuildImageTag("beach.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("viesus_correct")).generate("beach.jpg")
Auto corrected beach image

Furthermore, you can include an additional value to configure the enhancement as follows:

  • e_viesus_correct:no_red_eye - enhances the image without correcting for red eye.
  • e_viesus_correct:skin_saturation - enhances the image and also applies saturation to the skin tones in the image. You can define a value for the saturation by appending an underscore and then the value (e.g., e_viesus_correct:skin_saturation_20 to boost saturation of skin tones by 20). A positive value boosts saturation and a negative value reduces the saturation. Default value: 50. Range: -100 to 100

Signed URLs

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, image manipulation add-on URLs are required (by default) to be signed using Cloudinary's authenticated API or, alternatively, you can eagerly generate the requested derived images using Cloudinary's authenticated API.

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:

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")
JS:
cl.imageTag('beach.jpg', {effect: "viesus_correct", width: 400, crop: "scale", sign_url: true}).toHtml();
jQuery:
$.cloudinary.image("beach.jpg", {effect: "viesus_correct", width: 400, crop: "scale"})
React:
<Image publicId="beach.jpg" sign_url="true">
  <Transformation effect="viesus_correct" width="400" crop="scale" />
</Image>
Angular:
<cl-image public-id="beach.jpg" sign_url="true">
  <cl-transformation effect="viesus_correct" width="400" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("viesus_correct").Width(400).Crop("scale")).Signed(true).BuildImageTag("beach.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("viesus_correct").width(400).crop("scale")).signed(true).generate("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.

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

Note: You can optionally remove the signed URL default requirement for a particular add-on by selecting it in the Allow unsigned add-on transformations section of the Security account settings in the Cloudinary console.

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):

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:

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")
JS:
cl.imageTag('beach.jpg', {effect: "viesus_correct", width: 400, crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("beach.jpg", {effect: "viesus_correct", width: 400, crop: "scale"})
React:
<Image publicId="beach.jpg" >
  <Transformation effect="viesus_correct" width="400" crop="scale" />
</Image>
Angular:
<cl-image public-id="beach.jpg" >
  <cl-transformation effect="viesus_correct" width="400" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("viesus_correct").Width(400).Crop("scale")).BuildImageTag("beach.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("viesus_correct").width(400).crop("scale")).generate("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.

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")
JS:
cl.imageTag('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"}
  ]}).toHtml();
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"}
  ]})
React:
<Image publicId="beach.jpg" sign_url="true">
  <Transformation effect="viesus_correct" gravity="south" radius="20" width="1000" crop="crop" />
  <Transformation gravity="north_east" overlay="viesus_logo" opacity="50" width="100" x="10" y="10" crop="scale" />
  <Transformation width="600" crop="scale" />
</Image>
Angular:
<cl-image public-id="beach.jpg" sign_url="true">
  <cl-transformation effect="viesus_correct" gravity="south" radius="20" width="1000" crop="crop">
  </cl-transformation>
  <cl-transformation gravity="north_east" overlay="viesus_logo" opacity="50" width="100" x="10" y="10" crop="scale">
  </cl-transformation>
  <cl-transformation width="600" crop="scale">
  </cl-transformation>
</cl-image>
.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")
Android:
MediaManager.get().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).generate("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.