Automatically improve the visual quality of your images using Cloudinary. Image improving is done by setting the effect
parameter to improve
(e_improve
in URLs). All images and thumbnails of your website would seamlessly look much clearer and vivid.
With Cloudinary's image improvement filters and effects you can embed better looking images in your websites and mobile apps with ease. You can even mix and match multiple improvement filters together to create cool, "artistic" results.
Tell Cloudinary to retouch images with a fully automated image improvement filter for adjusting image colors, contrast and lightness.
Here's an example of an original image that doesn't look optimal:
Ruby:
cl_image_tag("gray_mountain.jpg")
PHP:
cl_image_tag("gray_mountain.jpg")
Python:
CloudinaryImage("gray_mountain.jpg").image()
Node.js:
cloudinary.image("gray_mountain.jpg")
Java:
cloudinary.url().imageTag("gray_mountain.jpg");
JS:
cloudinary.imageTag('gray_mountain.jpg').toHtml();
jQuery:
$.cloudinary.image("gray_mountain.jpg")
React:
<Image publicId="gray_mountain.jpg" >
</Image>
Vue.js:
<cld-image publicId="gray_mountain.jpg" >
</cld-image>
Angular:
<cl-image public-id="gray_mountain.jpg" >
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("gray_mountain.jpg")
Android:
MediaManager.get().url().generate("gray_mountain.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("gray_mountain.jpg")!, cloudinary: cloudinary)
Applying Cloudinary's cloud-based 'improve' effect makes it look much better:
Ruby:
cl_image_tag("gray_mountain.jpg", :effect=>"improve")
PHP:
cl_image_tag("gray_mountain.jpg", array("effect"=>"improve"))
Python:
CloudinaryImage("gray_mountain.jpg").image(effect="improve")
Node.js:
cloudinary.image("gray_mountain.jpg", {effect: "improve"})
Java:
cloudinary.url().transformation(new Transformation().effect("improve")).imageTag("gray_mountain.jpg");
JS:
cloudinary.imageTag('gray_mountain.jpg', {effect: "improve"}).toHtml();
jQuery:
$.cloudinary.image("gray_mountain.jpg", {effect: "improve"})
React:
<Image publicId="gray_mountain.jpg" >
<Transformation effect="improve" />
</Image>
Vue.js:
<cld-image publicId="gray_mountain.jpg" >
<cld-transformation effect="improve" />
</cld-image>
Angular:
<cl-image public-id="gray_mountain.jpg" >
<cl-transformation effect="improve">
</cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("improve")).BuildImageTag("gray_mountain.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("improve")).generate("gray_mountain.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("improve")).generate("gray_mountain.jpg")!, cloudinary: cloudinary)
Any further cloud-based image manipulations can be applied as well as chained transformations:
Ruby:
cl_image_tag("gray_mountain.jpg", :transformation=>[
{:effect=>"improve"},
{:width=>300, :height=>200, :radius=>"max", :crop=>"scale"},
{:effect=>"shadow"}
])
PHP:
cl_image_tag("gray_mountain.jpg", array("transformation"=>array(
array("effect"=>"improve"),
array("width"=>300, "height"=>200, "radius"=>"max", "crop"=>"scale"),
array("effect"=>"shadow")
)))
Python:
CloudinaryImage("gray_mountain.jpg").image(transformation=[
{'effect': "improve"},
{'width': 300, 'height': 200, 'radius': "max", 'crop': "scale"},
{'effect': "shadow"}
])
Node.js:
cloudinary.image("gray_mountain.jpg", {transformation: [
{effect: "improve"},
{width: 300, height: 200, radius: "max", crop: "scale"},
{effect: "shadow"}
]})
Java:
cloudinary.url().transformation(new Transformation()
.effect("improve").chain()
.width(300).height(200).radius("max").crop("scale").chain()
.effect("shadow")).imageTag("gray_mountain.jpg");
JS:
cloudinary.imageTag('gray_mountain.jpg', {transformation: [
{effect: "improve"},
{width: 300, height: 200, radius: "max", crop: "scale"},
{effect: "shadow"}
]}).toHtml();
jQuery:
$.cloudinary.image("gray_mountain.jpg", {transformation: [
{effect: "improve"},
{width: 300, height: 200, radius: "max", crop: "scale"},
{effect: "shadow"}
]})
React:
<Image publicId="gray_mountain.jpg" >
<Transformation effect="improve" />
<Transformation width="300" height="200" radius="max" crop="scale" />
<Transformation effect="shadow" />
</Image>
Vue.js:
<cld-image publicId="gray_mountain.jpg" >
<cld-transformation effect="improve" />
<cld-transformation width="300" height="200" radius="max" crop="scale" />
<cld-transformation effect="shadow" />
</cld-image>
Angular:
<cl-image public-id="gray_mountain.jpg" >
<cl-transformation effect="improve">
</cl-transformation>
<cl-transformation width="300" height="200" radius="max" crop="scale">
</cl-transformation>
<cl-transformation effect="shadow">
</cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Effect("improve").Chain()
.Width(300).Height(200).Radius("max").Crop("scale").Chain()
.Effect("shadow")).BuildImageTag("gray_mountain.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.effect("improve").chain()
.width(300).height(200).radius("max").crop("scale").chain()
.effect("shadow")).generate("gray_mountain.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setEffect("improve").chain()
.setWidth(300).setHeight(200).setRadius("max").setCrop("scale").chain()
.setEffect("shadow")).generate("gray_mountain.jpg")!, cloudinary: cloudinary)