Cloudinary Blog

Automatic visual image enhancement for your web application

Automatic visual image enhancement for web apps

Various factors can have an effect on the visual quality of photos captured by a wide variety of digital cameras. Technical limitations of cameras, coupled with changing conditions in which users take photos, results in a wide range of visual quality. Camera-related limitations arise from a combination of poor optics, noisy sensors, and the modest capabilities of mobile camera phones that are used to take photos in conditions that range from bright daylight to indoor scenes with incandescent light or even dark night scenes.

If you have lots of spare time, one option is to spend hours trying to enhance your images by adjusting brightness and color, restoring sharpness, removing noise, correcting for overexposure or underexposure, etc. Furthermore, the results achieved will not only depend on your training and experience with the photo editing software, but also on the quality, condition and calibration of the monitor used. Manual fine-tuning is also time consuming, and as the amount of image content is constantly growing, there is an obvious need for automatic image enhancement

VIESUS logo

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: fixing dull colors and bad color balance, removing digital noise, adjusting poor sharpness / blurriness, correcting for overexposure or underexposure, and more.

Webinar
How to Optimize for Page Load Speed

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.

Automatically enhancing images

Cloudinary already supports on-the-fly manipulation using URLs for resizing, cropping, applying effects, etc. Now you can also use VIESUS as an effect by setting the effect transformation parameter to viesus_correct (or e_viesus_correct for URLs) which tells Cloudinary to dynamically enhance the image to the best visual quality using the VIESUS add-on.

Take a look at the following photo of the Golden Gate Bridge in San Francisco that was uploaded to Cloudinary's demo account as golden_gate_side.jpg. The original photo on the left has darkened colors, low contrast and poor sharpness, and looks like it was taken on an overcast day. In the VIESUS enhanced photo on the right, the brightness and contrast is increased and the colors appear sharper and more vivid, while the photo now looks like it was taken on a bright sunny day.

Original image

Auto corrected image

Ruby:
Copy to clipboard
cl_image_tag("golden_gate_side.jpg", :effect=>"viesus_correct", :width=>350, :crop=>"scale", :sign_url=>true)
PHP:
Copy to clipboard
cl_image_tag("golden_gate_side.jpg", array("effect"=>"viesus_correct", "width"=>350, "crop"=>"scale", "sign_url"=>true))
Python:
Copy to clipboard
CloudinaryImage("golden_gate_side.jpg").image(effect="viesus_correct", width=350, crop="scale", sign_url=True)
Node.js:
Copy to clipboard
cloudinary.image("golden_gate_side.jpg", {effect: "viesus_correct", width: 350, crop: "scale", sign_url: true})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("viesus_correct").width(350).crop("scale")).signed(true).imageTag("golden_gate_side.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('golden_gate_side.jpg', {effect: "viesus_correct", width: 350, crop: "scale", signUrl: true}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("golden_gate_side.jpg", {effect: "viesus_correct", width: 350, crop: "scale"})
React:
Copy to clipboard
<Image publicId="golden_gate_side.jpg" signUrl="true">
  <Transformation effect="viesus_correct" width="350" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="golden_gate_side.jpg" signUrl="true">
  <cld-transformation effect="viesus_correct" width="350" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="golden_gate_side.jpg" sign-url="true">
  <cl-transformation effect="viesus_correct" width="350" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("viesus_correct").Width(350).Crop("scale")).Signed(true).BuildImageTag("golden_gate_side.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("viesus_correct").width(350).crop("scale")).signed(true).generate("golden_gate_side.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("viesus_correct").setWidth(350).setCrop("scale")).generate("golden_gate_side.jpg", signUrl: true)!, cloudinary: cloudinary)

Further image manipulations

Visual enhancement using the VIESUS add-on can be mixed with any of Cloudinary's rich set of image manipulation capabilities. The VIESUS add-on can also enhance a generated image, so instead of improving the original large photo, you can separately enhance each thumbnail or cropped version you would like to display.

For example, the following code generates and delivers a version of the uploaded golden_gate_side photo as follows:

  • Crops the photo to a width of 80% and a height of 35% with east gravity, and applies the viesus_correct effect.
  • Adds another uploaded png image named viesus_icon as an overlay. The overlay is resized to a width of 400 pixels, positioned 10 pixels from the top right corner of the containing image and is made 40% semi transparent.
  • The entire image is scaled down to a width of 600 pixels with rounded corners.

Without visual enhancement:

golden_gate_side.jpg cropped to 600 pixels with rounded corners and a logo overlay

With VIESUS visual enhancement:

golden_gate_side.jpg cropped to 600 pixels with rounded corners, enhanced with viesus and a logo overlay

Ruby:
Copy to clipboard
cl_image_tag("golden_gate_side.jpg", :sign_url=>true, :transformation=>[
  {:effect=>"viesus_correct", :gravity=>"east", :height=>0.35, :width=>0.8, :crop=>"crop"},
  {:gravity=>"north_east", :overlay=>"viesus_icon", :opacity=>40, :width=>400, :x=>10, :y=>10, :crop=>"scale"},
  {:radius=>20, :width=>600, :crop=>"scale"}
  ])
PHP:
Copy to clipboard
cl_image_tag("golden_gate_side.jpg", array("sign_url"=>true, "transformation"=>array(
  array("effect"=>"viesus_correct", "gravity"=>"east", "height"=>0.35, "width"=>0.8, "crop"=>"crop"),
  array("gravity"=>"north_east", "overlay"=>"viesus_icon", "opacity"=>40, "width"=>400, "x"=>10, "y"=>10, "crop"=>"scale"),
  array("radius"=>20, "width"=>600, "crop"=>"scale")
  )))
Python:
Copy to clipboard
CloudinaryImage("golden_gate_side.jpg").image(sign_url=True, transformation=[
  {'effect': "viesus_correct", 'gravity': "east", 'height': 0.35, 'width': 0.8, 'crop': "crop"},
  {'gravity': "north_east", 'overlay': "viesus_icon", 'opacity': 40, 'width': 400, 'x': 10, 'y': 10, 'crop': "scale"},
  {'radius': 20, 'width': 600, 'crop': "scale"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("golden_gate_side.jpg", {sign_url: true, transformation: [
  {effect: "viesus_correct", gravity: "east", height: "0.35", width: "0.8", crop: "crop"},
  {gravity: "north_east", overlay: "viesus_icon", opacity: 40, width: 400, x: 10, y: 10, crop: "scale"},
  {radius: 20, width: 600, crop: "scale"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("viesus_correct").gravity("east").height(0.35).width(0.8).crop("crop").chain()
  .gravity("north_east").overlay(new Layer().publicId("viesus_icon")).opacity(40).width(400).x(10).y(10).crop("scale").chain()
  .radius(20).width(600).crop("scale")).signed(true).imageTag("golden_gate_side.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('golden_gate_side.jpg', {signUrl: true, transformation: [
  {effect: "viesus_correct", gravity: "east", height: "0.35", width: "0.8", crop: "crop"},
  {gravity: "north_east", overlay: new cloudinary.Layer().publicId("viesus_icon"), opacity: 40, width: 400, x: 10, y: 10, crop: "scale"},
  {radius: 20, width: 600, crop: "scale"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("golden_gate_side.jpg", {transformation: [
  {effect: "viesus_correct", gravity: "east", height: "0.35", width: "0.8", crop: "crop"},
  {gravity: "north_east", overlay: new cloudinary.Layer().publicId("viesus_icon"), opacity: 40, width: 400, x: 10, y: 10, crop: "scale"},
  {radius: 20, width: 600, crop: "scale"}
  ]})
React:
Copy to clipboard
<Image publicId="golden_gate_side.jpg" signUrl="true">
  <Transformation effect="viesus_correct" gravity="east" height="0.35" width="0.8" crop="crop" />
  <Transformation gravity="north_east" overlay="viesus_icon" opacity="40" width="400" x="10" y="10" crop="scale" />
  <Transformation radius="20" width="600" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="golden_gate_side.jpg" signUrl="true">
  <cld-transformation effect="viesus_correct" gravity="east" height="0.35" width="0.8" crop="crop" />
  <cld-transformation gravity="north_east" overlay="viesus_icon" opacity="40" width="400" x="10" y="10" crop="scale" />
  <cld-transformation radius="20" width="600" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="golden_gate_side.jpg" sign-url="true">
  <cl-transformation effect="viesus_correct" gravity="east" height="0.35" width="0.8" crop="crop">
  </cl-transformation>
  <cl-transformation gravity="north_east" overlay="viesus_icon" opacity="40" width="400" x="10" y="10" crop="scale">
  </cl-transformation>
  <cl-transformation radius="20" width="600" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("viesus_correct").Gravity("east").Height(0.35).Width(0.8).Crop("crop").Chain()
  .Gravity("north_east").Overlay(new Layer().PublicId("viesus_icon")).Opacity(40).Width(400).X(10).Y(10).Crop("scale").Chain()
  .Radius(20).Width(600).Crop("scale")).Signed(true).BuildImageTag("golden_gate_side.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .effect("viesus_correct").gravity("east").height(0.35).width(0.8).crop("crop").chain()
  .gravity("north_east").overlay(new Layer().publicId("viesus_icon")).opacity(40).width(400).x(10).y(10).crop("scale").chain()
  .radius(20).width(600).crop("scale")).signed(true).generate("golden_gate_side.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("viesus_correct").setGravity("east").setHeight(0.35).setWidth(0.8).setCrop("crop").chain()
  .setGravity("north_east").setOverlay("viesus_icon").setOpacity(40).setWidth(400).setX(10).setY(10).setCrop("scale").chain()
  .setRadius(20).setWidth(600).setCrop("scale")).generate("golden_gate_side.jpg", signUrl: true)!, cloudinary: cloudinary)

For more detailed information on implementing this automatic visual enhancement to your images, see the VIESUS™ add-on documentation, and for a full list of Cloudinary's image manipulation options, see the Image transformations documentation.

Summary

Enhancing your images and user uploaded photos makes your website look nicer and improves user engagement. The VIESUS add-on is utilized to extend Cloudinary's powerful image manipulation and optimization capabilities by automatically enhancing images to their best visual quality. Simply add a single parameter to your image URLs and everything is done seamlessly, dynamically and automatically for you.

VIESUS automatic visual enhancement  add-on

The free tier of the VIESUS add-on is available to all our free and paid plans. If you don't have a Cloudinary account, you are welcome to sign up to our free account and try it out.

Recent Blog Posts

Laravel File Upload to a Local Server Or to the Cloud

Currently, Laravel is the most renowned PHP framework, boasting of a large developer community; several open-source packages, such as Cashier, Sanctum, Scout, and Telescope; and a host of paid platforms, e.g., Laravel Forge, Envoyer, and Vapor. Laravel Forge & Envoyer ably supports deployment and use of Laravel production-based apps.

Read more
TedsVintageArt.com Automates Generation of Captivating Product Images on Cloudinary

At TedsVintageArt.com, we digitally restore historic maps and sell their art prints on multiple platforms, such as Amazon, Etsy, eBay, and Houzz. As our operations ramped up years ago, it took an inordinately long time to generate custom images for our products. Plus, since we sell art, it behooves us to produce multiple high-quality images for each print, which was another time-consuming task.

Read more
lastminute.com Takes a Vacation From Media-Management Headaches With Cloudinary

As a 20-year online leader in travel and leisure retail, Europe-based public company lastminute.com along with its 1,200 employees are committed to enriching the lives of vacationers through comprehensive and enticing products and services. Beyond flight deals and tours, it's the images and videos, whether of that luxury villa in Greece, romantic Parisian street, or exotic stroll through the Marrakech markets, that attract audiences and boost bookings.

Read more