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 v1:
cl_image_tag("gray_mountain.jpg")
PHP v2:
(new ImageTag('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 v1:
cl_image_tag("gray_mountain.jpg", array("effect"=>"improve"))
PHP v2:
(new ImageTag('gray_mountain.jpg'))
->adjust(Adjust::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 v1:
cl_image_tag("gray_mountain.jpg", array("transformation"=>array(
array("effect"=>"improve"),
array("width"=>300, "height"=>200, "radius"=>"max", "crop"=>"scale"),
array("effect"=>"shadow")
)))
PHP v2:
(new ImageTag('gray_mountain.jpg'))
->adjust(Adjust::improve())
->resize(Resize::scale()->width(300)->height(200))
->roundCorners(RoundCorners::max())
->effect(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)
