Waveform creation
You can create a waveform from every uploaded audio or video (which includes an audio channel) file. Simply use the waveform
flag (fl_waveform
in URLs) and set the file’s extension to any image format you like.
You can create a waveform from every uploaded audio or video (which includes an audio channel) file. Simply use the waveform
flag (fl_waveform
in URLs) and set the file’s extension to any image format you like.
Resize overlays to a given percentage of the main image, either related to width, height or both by setting the flags
parameter to relative
(fl_relative
in URLs) while also setting the width
and/or height
parameters to the percentage value you need, represented by a decimal value (e.g., 0.4
for 40%).
Extract frames from an animated GIF, you can choose which frame to deliver, apply any further image manipulations including resizing, cropping, overlays and much more.
Transform animated GIFs just like any other image. Use Cloudinary's powerful image transformation tools to manipulate your animated GIFs just like you do for other standard still images.
Add your watermark as an overlay on top of any image by setting the overlay
parameter (l
in URLs) as your watermark image's public ID. The overlaid image's size and position is customizable.
Take your base image and use the overlay
parameter (l
in URLs) to add any further images. Set the required width
and height
(w
and h
in URLs) with the required crop mode, and add any further transformations, effects and texts.
cl_image_tag("yellow_tulip.jpg", :transformation=>[ {:width=>220, :height=>140, :crop=>"fill"}, {:overlay=>"brown_sheep", :width=>220, :height=>140, :x=>220, :crop=>"fill"}, {:overlay=>"horses", :width=>220, :height=>140, :y=>140, :x=>-110, :crop=>"fill"}, {:overlay=>"white_chicken", :width=>220, :height=>140, :y=>70, :x=>110, :crop=>"fill"}, {:overlay=>"butterfly.png", :height=>200, :x=>-10, :angle=>10}, {:width=>400, :height=>260, :radius=>20, :crop=>"crop"}, {:overlay=>{:font_family=>"Parisienne", :font_size=>35, :font_weight=>"bold", :text=>"Memories%20from%20our%20trip"}, :color=>"#990C47", :y=>155}, {:effect=>"shadow"} ])
cl_image_tag("yellow_tulip.jpg", array("transformation"=>array( array("width"=>220, "height"=>140, "crop"=>"fill"), array("overlay"=>"brown_sheep", "width"=>220, "height"=>140, "x"=>220, "crop"=>"fill"), array("overlay"=>"horses", "width"=>220, "height"=>140, "y"=>140, "x"=>-110, "crop"=>"fill"), array("overlay"=>"white_chicken", "width"=>220, "height"=>140, "y"=>70, "x"=>110, "crop"=>"fill"), array("overlay"=>"butterfly.png", "height"=>200, "x"=>-10, "angle"=>10), array("width"=>400, "height"=>260, "radius"=>20, "crop"=>"crop"), array("overlay"=>array("font_family"=>"Parisienne", "font_size"=>35, "font_weight"=>"bold", "text"=>"Memories%20from%20our%20trip"), "color"=>"#990C47", "y"=>155), array("effect"=>"shadow") )))
CloudinaryImage("yellow_tulip.jpg").image(transformation=[ {'width': 220, 'height': 140, 'crop': "fill"}, {'overlay': "brown_sheep", 'width': 220, 'height': 140, 'x': 220, 'crop': "fill"}, {'overlay': "horses", 'width': 220, 'height': 140, 'y': 140, 'x': -110, 'crop': "fill"}, {'overlay': "white_chicken", 'width': 220, 'height': 140, 'y': 70, 'x': 110, 'crop': "fill"}, {'overlay': "butterfly.png", 'height': 200, 'x': -10, 'angle': 10}, {'width': 400, 'height': 260, 'radius': 20, 'crop': "crop"}, {'overlay': {'font_family': "Parisienne", 'font_size': 35, 'font_weight': "bold", 'text': "Memories%20from%20our%20trip"}, 'color': "#990C47", 'y': 155}, {'effect': "shadow"} ])
cloudinary.image("yellow_tulip.jpg", {transformation: [ {width: 220, height: 140, crop: "fill"}, {overlay: "brown_sheep", width: 220, height: 140, x: 220, crop: "fill"}, {overlay: "horses", width: 220, height: 140, y: 140, x: -110, crop: "fill"}, {overlay: "white_chicken", width: 220, height: 140, y: 70, x: 110, crop: "fill"}, {overlay: "butterfly.png", height: 200, x: -10, angle: 10}, {width: 400, height: 260, radius: 20, crop: "crop"}, {overlay: {font_family: "Parisienne", font_size: 35, font_weight: "bold", text: "Memories%20from%20our%20trip"}, color: "#990C47", y: 155}, {effect: "shadow"} ]})
cloudinary.url().transformation(new Transformation() .width(220).height(140).crop("fill").chain() .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain() .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain() .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill").chain() .overlay(new Layer().publicId("butterfly.png")).height(200).x(-10).angle(10).chain() .width(400).height(260).radius(20).crop("crop").chain() .overlay(new TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip")).color("#990C47").y(155).chain() .effect("shadow")).imageTag("yellow_tulip.jpg");
cloudinary.imageTag('yellow_tulip.jpg', {transformation: [ {width: 220, height: 140, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("butterfly.png"), height: 200, x: -10, angle: 10}, {width: 400, height: 260, radius: 20, crop: "crop"}, {overlay: new cloudinary.TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip"), color: "#990C47", y: 155}, {effect: "shadow"} ]}).toHtml();
$.cloudinary.image("yellow_tulip.jpg", {transformation: [ {width: 220, height: 140, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("butterfly.png"), height: 200, x: -10, angle: 10}, {width: 400, height: 260, radius: 20, crop: "crop"}, {overlay: new cloudinary.TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip"), color: "#990C47", y: 155}, {effect: "shadow"} ]})
<Image publicId="yellow_tulip.jpg" > <Transformation width="220" height="140" crop="fill" /> <Transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" /> <Transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" /> <Transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" /> <Transformation overlay="butterfly.png" height="200" x="-10" angle="10" /> <Transformation width="400" height="260" radius="20" crop="crop" /> <Transformation overlay={{fontFamily: "Parisienne", fontSize: 35, fontWeight: "bold", text: "Memories%20from%20our%20trip"}} color="#990C47" y="155" /> <Transformation effect="shadow" /> </Image>
<cld-image publicId="yellow_tulip.jpg" > <cld-transformation width="220" height="140" crop="fill" /> <cld-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" /> <cld-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" /> <cld-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" /> <cld-transformation overlay="butterfly.png" height="200" x="-10" angle="10" /> <cld-transformation width="400" height="260" radius="20" crop="crop" /> <cld-transformation overlay={{fontFamily: "Parisienne", fontSize: 35, fontWeight: "bold", text: "Memories%20from%20our%20trip"}} color="#990C47" y="155" /> <cld-transformation effect="shadow" /> </cld-image>
<cl-image public-id="yellow_tulip.jpg" > <cl-transformation width="220" height="140" crop="fill"> </cl-transformation> <cl-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill"> </cl-transformation> <cl-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill"> </cl-transformation> <cl-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill"> </cl-transformation> <cl-transformation overlay="butterfly.png" height="200" x="-10" angle="10"> </cl-transformation> <cl-transformation width="400" height="260" radius="20" crop="crop"> </cl-transformation> <cl-transformation overlay="text:Parisienne_35_bold:Memories%20from%20our%20trip" color="#990C47" y="155"> </cl-transformation> <cl-transformation effect="shadow"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(220).Height(140).Crop("fill").Chain() .Overlay(new Layer().PublicId("brown_sheep")).Width(220).Height(140).X(220).Crop("fill").Chain() .Overlay(new Layer().PublicId("horses")).Width(220).Height(140).Y(140).X(-110).Crop("fill").Chain() .Overlay(new Layer().PublicId("white_chicken")).Width(220).Height(140).Y(70).X(110).Crop("fill").Chain() .Overlay(new Layer().PublicId("butterfly.png")).Height(200).X(-10).Angle(10).Chain() .Width(400).Height(260).Radius(20).Crop("crop").Chain() .Overlay(new TextLayer().FontFamily("Parisienne").FontSize(35).FontWeight("bold").Text("Memories%20from%20our%20trip")).Color("#990C47").Y(155).Chain() .Effect("shadow")).BuildImageTag("yellow_tulip.jpg")
MediaManager.get().url().transformation(new Transformation() .width(220).height(140).crop("fill").chain() .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain() .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain() .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill").chain() .overlay(new Layer().publicId("butterfly.png")).height(200).x(-10).angle(10).chain() .width(400).height(260).radius(20).crop("crop").chain() .overlay(new TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip")).color("#990C47").y(155).chain() .effect("shadow")).generate("yellow_tulip.jpg");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(220).setHeight(140).setCrop("fill").chain() .setOverlay("brown_sheep").setWidth(220).setHeight(140).setX(220).setCrop("fill").chain() .setOverlay("horses").setWidth(220).setHeight(140).setY(140).setX(-110).setCrop("fill").chain() .setOverlay("white_chicken").setWidth(220).setHeight(140).setY(70).setX(110).setCrop("fill").chain() .setOverlay("butterfly.png").setHeight(200).setX(-10).setAngle(10).chain() .setWidth(400).setHeight(260).setRadius(20).setCrop("crop").chain() .setOverlay("text:Parisienne_35_bold:Memories%20from%20our%20trip").setColor("#990C47").setY(155).chain() .setEffect("shadow")).generate("yellow_tulip.jpg")!, cloudinary: cloudinary)
Limit the size of the image by specifying the width
and height
(w
and h
in URLs) while setting the crop
parameter to limit
. This will create an image that does not exceed the given width
and height
. All original image parts remain visible and the aspect ratio of the original image is kept.
Resize your images to fill specified dimensions by setting the width
and height
(w
and h
in URLs), while setting the crop
parameter to fill
(c_fill
in URLs). This will resize and crop the image so an image with the exact specified dimensions is generated. The fill
crop mode keeps the original image's aspect ratio, therefore parts of the images may be cut-off.
To change the image size to fit in given width and height while retaining original proportions, specify the width
and height
parameters (w
and h
in URLs) while setting the crop
parameter to fit
(c_fit
in URLs).
Resize your images by setting the width
and/or height
parameters (w
and h
in URLs). When resizing using Cloudinary's URL-based transformations, Cloudinary will automatically apply the scale
crop mode. Alternatively, you can use any one of our many supported crop modes.
Convert your PDF files to a JPG thumbnail by simply switching the extension of the file to JPG. You can also specify the target thumbnail dimensions using the width
and height
parameters and any available crop mode. If your PDF file has multiple pages, you can specify the specific page to convert using the page
parameter (pg
in URLs). For example:
Multi-page
Whether you've just launched a Shopify site for your latest product, or you're a multibillion dollar retailer with expansive design teams, you probably have significant room to improve and make more efficient the process of how raw photographs are transformed into compelling images on your website’s product pages.