Image Cropping to a Specific Ratio and Uploading to Php
Image transformations
Whether your spider web or mobile application delivers your organization'south own carefully selected images, images uploaded by your finish users (UGC), or both, you probably need to adjust the originals to fit the graphic design of your website or mobile application.
Cloudinary'due south dynamic URL transformations enable yous to accomplish those goals programmatically and on the wing without the need for graphic designers and fancy editing tools.
Y'all can build these URLs manually in your code, or accept advantage of Cloudinary'due south SDKs, which enable you to write your transformation code using intuitive syntax designed for your preferred programming language or framework and permit the SDK automatically build these URLs for you.
Your account's pricing plan is in part dependent on the full number of transformation operations performed during a billing cycle. These are primarily counted when Cloudinary generates a new 'derived resources' from an asset based on a transformation URL. For complete details, come across How are transformations counted?
Here are just a few examples of some popular use cases that you can attain on the fly by combining Cloudinary transformations. Click each prototype to see the URL parameters applied in each case:
Convert format, round,
modify aspect ratio & ingather to face,
add outlines & shadows 
Place, style, and format
image and text layers 
Apply special effects like
cartoonify and effulgence,
rotate to any bending
Run across as well: Video Transformations
Overview
Cloudinary allows yous to easily transform your images on the wing to any required format, style and dimension, and apply effects and other visual enhancements. You lot can also optimize your images to deliver them with minimal file size aslope high visual quality for an improved user experience and minimal bandwidth. Y'all tin do all of this by implementing dynamic image transformation and delivery URLs. Your transformed images are then delivered to your users through a fast CDN with optimized caching.
With paradigm transformations, yous can:
- Deliver images using the image format that fits your needs.
- Resize and crop your images to the required dimensions using different scaling and cropping techniques, or employ our smart cropping techniques, including face-detection or car-gravity for cropping to focus on the almost relevant parts of a photo.
- Generate a new paradigm by layering other images or text on your base of operations image.
- Apply a variety of effects, filters, and other visual enhancements to help your paradigm reach the desired impact.
The residuum of this page describes the basics of working with Cloudinary image transformations.
The other pages in this guide provide details and utilise instance examples on the various types of epitome transformations you can use to your images.
The Transformation URL API Reference details every transformation parameter available for both images and videos.
- Overview
- Transformation URL syntax
- Chained Transformations
- Named Transformations
- Embedding images in web pages using SDKs
- Image format support
- Image transformation types
- Delivering optimized and responsive media
Quick case
Beneath you can come across the transformation URL and corresponding SDK code for generating an image with several transformation parameters applied. This transformation generates and delivers an epitome that is initially cropped to a 400x400 image that automatically focusses on the face, then rounded to a circle and finally, scaled down to a width of 200 pixels.
Reddish (cloudinary 1.ten):
Re-create to clipboard
cl_image_tag( " lady.jpg " , :transformation=>[ {:gravity=> " face " , :peak=>400, :width=>400, :crop=> " crop " }, {:radius=> " max " }, {:width=>200, :crop=> " scale " } ])
PHP (cloudinary_php two.10):
Copy to clipboard
(new ImageTag( ' lady.jpg ' )) ->resize(Resize::crop()->width(400) ->superlative(400) ->gravity( Gravity::focusOn( FocusOn::confront())) ) ->roundCorners(RoundCorners::max()) ->resize(Resize::calibration()->width(200));
PHP (cloudinary_php 1.10 (legacy)):
Re-create to clipboard
cl_image_tag( " lady.jpg " , array( " transformation " =>assortment( array( " gravity " => " confront " , " height " =>400, " width " =>400, " crop " => " crop " ), array( " radius " => " max " ), array( " width " =>200, " crop " => " scale " ) )))
Python (cloudinary one.10):
Re-create to clipboard
CloudinaryImage( " lady.jpg " ).image(transformation=[ { ' gravity ' : " face up " , ' height ' : 400, ' width ' : 400, ' ingather ' : " crop " }, { ' radius ' : " max " }, { ' width ' : 200, ' crop ' : " scale " } ])
Node.js (cloudinary i.x):
Copy to clipboard
cloudinary.epitome( " lady.jpg " , {transformation: [ {gravity: " face " , superlative: 400, width: 400, ingather: " crop " }, {radius: " max " }, {width: 200, crop: " scale " } ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation() .gravity( " face up " ).elevation(400).width(400).crop( " crop " ).concatenation() .radius( " max " ).chain() .width(200).crop( " calibration " )).imageTag( " lady.jpg " );
JS (@cloudinary/url-gen 1.x):
JS (cloudinary-core 2.10 (legacy)):
Copy to clipboard
cloudinary.imageTag( ' lady.jpg ' , {transformation: [ {gravity: " face " , height: 400, width: 400, crop: " crop " }, {radius: " max " }, {width: 200, crop: " scale " } ]}).toHtml();
jQuery (cloudinary-jquery ii.ten):
Copy to clipboard
$.cloudinary.image( " lady.jpg " , {transformation: [ {gravity: " face up " , top: 400, width: 400, crop: " crop " }, {radius: " max " }, {width: 200, crop: " scale " } ]})
React (@cloudinary/react 1.x):
React (cloudinary-react one.x):
Copy to clipboard
<Paradigm publicId= " lady.jpg " > <Transformation gravity= " face " height= " 400 " width= " 400 " crop= " ingather " /> <Transformation radius= " max " /> <Transformation width= " 200 " crop= " scale " /> </Prototype>
Vue.js (cloudinary-vue 1.10):
Copy to clipboard
<cld-prototype public-id= " lady.jpg " > <cld-transformation gravity= " face " elevation= " 400 " width= " 400 " ingather= " crop " /> <cld-transformation radius= " max " /> <cld-transformation width= " 200 " crop= " scale " /> < / cld-image>
Angular (@cloudinary/ng 1.ten):
Angular (@cloudinary/athwart-5.x 1.10 (legacy)):
Re-create to clipboard
<cl-image public-id= " lady.jpg " > <cl-transformation gravity= " face " height= " 400 " width= " 400 " ingather= " ingather " > < / cl-transformation> <cl-transformation radius="max"> < / cl-transformation> <cl-transformation width= " 200 " crop= " scale " > < / cl-transformation> < / cl-prototype>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Gravity( " face " ).Pinnacle(400).Width(400).Ingather( " ingather " ).Chain() .Radius( " max " ).Chain() .Width(200).Crop( " scale " )).BuildImageTag( " lady.jpg " )
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setGravity( " face " ).setHeight(400).setWidth(400).setCrop( " crop " ).chain() .setRadius( " max " ).chain() .setWidth(200).setCrop( " calibration " )).generate( " lady.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Re-create to clipboard
MediaManager.become().url().transformation(new Transformation() .gravity( " face " ).height(400).width(400).crop( " crop " ).concatenation() .radius( " max " ).concatenation() .width(200).crop( " scale " )).generate( " lady.jpg " );
Kotlin (kotlin-url-gen 1.ten):
Original 
Transformed image
Transformation URL syntax
Your Cloudinary media assets are accessed using simple delivery HTTP or HTTPS URLs, which are then delivered to users via a worldwide fast CDN. The URL contains the public ID of the requested asset plus any optional transformation parameters. The public ID is the unique identifier of the asset and is either defined when uploading the asset to your Cloudinary account, or automatically assigned by Cloudinary (see Uploading Assets for more details on the various options for specifying the public ID).
Generating transformation URLs with Cloudinary SDKs
Cloudinary'due south SDKs automatically build the transformation URL for yous. They allow you to continue working in your preferred developer framework and also provide helper methods to simplify building prototype tags and image transformation URLs.
Yous tin can besides create your transformation URLs using the Transformation Editor, or accept one of our Cookbook recipes as a starting bespeak and then farther modify information technology in the Transformation Editor to fit your needs. The editor generates the URL and SDK lawmaking for the transformation you define so that you tin can copy it in the linguistic communication you require.
Transformation URL structure
The default Cloudinary asset delivery URL has the following structure:
https://res.cloudinary.com/<cloud_name>/ <asset_type>/<delivery_type>/ <transformations>/ <version>/<public_id>.<extension>
| element | description |
|---|---|
| cloud_name | The proper name of your Cloudinary account, a unique public identifier for URL building and API access. Notation: Paid customers on the Advanced plan or higher can asking to apply a private CDN or CNAME to customize the domain proper name used for your commitment URLs. |
| asset_type | The type of asset to deliver. Valid values: paradigm, video, or raw.
|
| delivery_type | The storage or delivery type. For details on all possible types, see Commitment types. |
| transformations | Optional. One or more comma-separated transformation parameters in a single URL component, or a set of chained transformations in multiple URL components (separated by slashes). When the transformation URL is first accessed, the derived media file is created on the fly and delivered to your user. The derived file is likewise buried on the CDN and is immediately available to all subsequent users requesting the same asset. |
| version | Optional. You can include the version in your commitment URL to featherbed the cached version on the CDN and force commitment of the latest asset (in the example that an asset has been overwritten with a newer file). For simplicity, the version component is generally not included in the example URLs on this page. For details, see Nugget versions. |
| public_id | The unique identifier of the asset, including the folder structure if relevant. |
| extension | Optional. The file extension of the requested delivery format for the asset. Default: The originally uploaded format or the format determined by f_auto, when used. |
In the most general case of but delivering images that were uploaded to your Cloudinary business relationship without any transformations, the commitment URL will exist in the format:
https://res.cloudinary.com/<cloud_name>/image/upload/<public_id>.<extension>
For instance, delivering the epitome with a public ID of: sample , uploaded to Cloudinary's demo business relationship in jpg format:
Carmine (cloudinary 1.x):
Copy to clipboard
cl_image_tag( " sample.jpg " ) PHP (cloudinary_php 2.x):
Re-create to clipboard
(new ImageTag( ' sample.jpg ' ));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag( " sample.jpg " ) Python (cloudinary ane.x):
Copy to clipboard
CloudinaryImage( " sample.jpg " ).image() Node.js (cloudinary ane.ten):
Copy to clipboard
cloudinary.image( " sample.jpg " ) Java (cloudinary 1.10):
Copy to clipboard
cloudinary.url().transformation(new Transformation().imageTag( " sample.jpg " );
JS (@cloudinary/url-gen one.x):
Copy to clipboard
new CloudinaryImage( " sample.jpg " );
JS (cloudinary-core 2.x (legacy)):
Re-create to clipboard
cloudinary.imageTag( ' sample.jpg ' ).toHtml(); jQuery (cloudinary-jquery two.x):
Copy to clipboard
$.cloudinary.image( " sample.jpg " )
React (@cloudinary/react 1.x):
Re-create to clipboard
new CloudinaryImage( " sample.jpg " );
React (cloudinary-react 1.x):
Copy to clipboard
<Prototype publicId= " sample.jpg " > </Image>
Vue.js (cloudinary-vue 1.ten):
Re-create to clipboard
<cld-image public-id= " sample.jpg " > < / cld-image>
Angular (@cloudinary/ng one.x):
Re-create to clipboard
new CloudinaryImage( " sample.jpg " );
Angular (@cloudinary/angular-5.x one.x (legacy)):
Copy to clipboard
<cl-image public-id= " sample.jpg " > < / cl-image>
.NET (CloudinaryDotNet ane.ten):
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag( " sample.jpg " ) iOS (cloudinary 3.ten):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate( " sample.jpg " )!, cloudinary: cloudinary) Android (cloudinary-android 1.ten):
Copy to clipboard
MediaManager.become().url().transformation(new Transformation().generate( " sample.jpg " );
Kotlin (kotlin-url-gen 1.ten):
Copy to clipboard
cloudinary.image { publicId( " sample.jpg " ) }.generate() 
The post-obit shows an case of delivering the same image with transformation parameters, where the image is scaled and cropped to make full a 250x300 pixel size and a blurring event is applied:
Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag( " sample.jpg " , :transformation=>[ {:peak=>300, :width=>250, :crop=> " fill " }, {:outcome=> " blur:300 " } ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag( ' sample.jpg ' )) ->resize(Resize::fill()->width(250) ->superlative(300)) ->effect(Effect::mistiness()->strength(300));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag( " sample.jpg " , assortment( " transformation " =>array( array( " peak " =>300, " width " =>250, " crop " => " make full " ), array( " effect " => " blur:300 " ) )))
Python (cloudinary i.x):
Copy to clipboard
CloudinaryImage( " sample.jpg " ).epitome(transformation=[ { ' elevation ' : 300, ' width ' : 250, ' ingather ' : " make full " }, { ' effect ' : " mistiness:300 " } ])
Node.js (cloudinary 1.x):
Re-create to clipboard
cloudinary.paradigm( " sample.jpg " , {transformation: [ {acme: 300, width: 250, crop: " make full " }, {event: " blur:300 " } ]})
Coffee (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation() .superlative(300).width(250).crop( " make full " ).chain() .effect( " blur:300 " )).imageTag( " sample.jpg " );
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage( " sample.jpg " ) .resize(fill().width(250).height(300)) .effect(blur().strength(300));
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag( ' sample.jpg ' , {transformation: [ {elevation: 300, width: 250, crop: " fill " }, {issue: " blur:300 " } ]}).toHtml();
jQuery (cloudinary-jquery ii.10):
Copy to clipboard
$.cloudinary.image( " sample.jpg " , {transformation: [ {height: 300, width: 250, ingather: " fill up " }, {effect: " blur:300 " } ]})
React (@cloudinary/react 1.x):
Copy to clipboard
new CloudinaryImage( " sample.jpg " ) .resize(make full().width(250).top(300)) .result(blur().force(300));
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId= " sample.jpg " > <Transformation height= " 300 " width= " 250 " ingather= " fill " /> <Transformation upshot= " blur:300 " /> </Paradigm>
Vue.js (cloudinary-vue 1.ten):
Copy to clipboard
<cld-image public-id= " sample.jpg " > <cld-transformation height= " 300 " width= " 250 " crop= " fill " /> <cld-transformation event= " mistiness:300 " /> < / cld-image>
Athwart (@cloudinary/ng 1.x):
Copy to clipboard
new CloudinaryImage( " sample.jpg " ) .resize(fill().width(250).summit(300)) .result(blur().force(300));
Angular (@cloudinary/angular-5.x i.x (legacy)):
Re-create to clipboard
<cl-paradigm public-id= " sample.jpg " > <cl-transformation elevation= " 300 " width= " 250 " crop= " fill " > < / cl-transformation> <cl-transformation effect="blur:300"> < / cl-transformation> < / cl-image>
.Net (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Acme(300).Width(250).Crop( " fill " ).Chain() .Effect( " blur:300 " )).BuildImageTag( " sample.jpg " )
iOS (cloudinary 3.ten):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setHeight(300).setWidth(250).setCrop( " fill " ).concatenation() .setEffect( " mistiness:300 " )).generate( " sample.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android one.x):
Copy to clipboard
MediaManager.become().url().transformation(new Transformation() .height(300).width(250).crop( " fill " ).chain() .effect( " blur:300 " )).generate( " sample.jpg " );
Kotlin (kotlin-url-gen i.10):
Transformation URL tips
- For customers with a Custom Domain Name (CNAME) - available for Cloudinary'south Avant-garde plan and in a higher place - the basic prototype commitment URL becomes:
https://<custom domain name>/image/upload.... - Y'all can convert and deliver your image in other supported paradigm formats by simply changing the image format file extension. For details, see Delivering in a different format.
-
You tin can append an SEO-friendly suffix to your URL by replacing the
image/uploadelement of the URL withimagesthen appending the desired suffix with a slash (/) subsequently the public ID and before the extension. For instance, if you have a cooking paradigm with a random public ID like:abc1def2, you can deliver your image as:https://res.cloudinary.com/<cloud_name>/images/upload/a12345/cooking.jpgFor more details, see Dynamic SEO suffixes.
-
Yous tin can too use shortcut URLs when specifically delivering paradigm files using the default
uploadtype. With Cloudinary's Root Path URL characteristic, the<asset_type>and<delivery_type>elements tin can be omitted from the URL (they automatically default to the valuesparadigmanduploadrespectively). For example, the Root Path shortcut delivery URL for the cropped image higher up is:https://res.cloudinary.com/demo/c_crop,h_200,w_300/sample.jpg
Transformation URL video tutorial
The following video provides a quick demonstration of how dynamic transformation URLs piece of work with both images and videos.
Delivery types
The delivery type chemical element of the URL provides an indication about the manner the asset volition be delivered, although in most cases, the commitment type value is adamant at the time that the asset is stored in your account.
The post-obit delivery type values are supported:
| Delivery type | Description | Learn more |
|---|---|---|
| upload | The default commitment type for uploaded assets. In most cases, this delivery type indicates that the asset is publicly available. However, there are options you tin can use to restrict access to avails with an upload delivery type. This includes strict transformations and access mode settings) | Upload API |
| private | The URL for the original asset can be accessed but with a signed URL. Transformed versions of the asset are publicly available (unless strict transformations are besides divers). | Uploading private avails |
| authenticated | Both original and transformed versions of the asset can be accessed but with a signed URL or an authentication token. | Uploading authenticated assets Delivering authenticated assets |
| list | Generates a listing of assets that have a specified tag. Note: This isn't a delivery blazon in the classic sense, in that information technology doesn't chronicle to an individual asset. However, to use this feature, you lot specify list in the delivery type element of the URL. | Client-side asset lists |
| fetch | Enables transforming and delivering remote images on the fly. | Fetch remote images |
| facebook twitter_name gravatar | Fetches a contour picture show from Facebook, Twitter, or other specified social delivery type based on a specified ID or name. | Social media profile pictures |
| youtube hulu vimeo animoto worldstarhiphop dailymotion | Delivers a thumbnail image generated from the specified video from a public video site. | Fetching thumbnails of public videos |
| multi | Enables you to deliver a single animated image (GIF, PNG or WebP) from all image assets that have been assigned a specified tag. | Multi method Creating animated images |
| text | Enables you to generate an image in your account from a specified textual string along with fashion parameters for use as an epitome overlay. | Text method |
| nugget | Relevant but for the Scarlet on Track SDK. Delivers files that were uploaded using the sync_static command. | Static files |
You can search for avails by delivery type using the Advanced Search in the Media Library. The well-nigh mutual types can be selected directly in the Type department of the General search tab. All other types can be selected from the More types list.
Parameter types
There are 2 types of transformation parameters:
- Action parameters: Parameters that perform a specific transformation on the asset.
- Qualifier parameters: Parameters that exercise not perform an action on their own, just rather alter the default behavior or otherwise adjust the consequence of the respective action parameter.
It's best exercise to include simply one action parameter per URL component.
If you want to apply multiple actions in a single transformation URL, apply them in divide chained components, where each action is performed on the upshot of the previous one.
In some of the Cloudinary SDKs, this action separation dominion is enforced.
In contrast, qualifier parameters must be included in the component with the action parameter they qualify.
- Most qualifiers are optional, pregnant the related action parameter can be used independently, but yous tin can add optional qualifiers to modify the default behavior.
- In some cases, an action parameter requires ane or more qualifiers to fully ascertain the transformation behavior.
- There are a few parameters that can be used independently every bit action parameters, but can also be used in other scenarios as a qualifier for some other action.
For example, the transformation below includes a crop action, a rounding action, and 2 event actions. The qualifier transformations included in each action define additional adjustments on the transformation activeness'south behavior:
Ruby (cloudinary one.x):
Copy to clipboard
cl_image_tag( " thespian.png " , :transformation=>[ {:aspect_ratio=> " 1.0 " , :gravity=> " face " , :width=>0.6, :zoom=>0.7, :crop=> " thumb " }, {:radius=> " max " }, {:color=> " brown " , :effect=> " outline " }, {:color=> " grey " , :effect=> " shadow " , :x=>xxx, :y=>55} ])
PHP (cloudinary_php ii.x):
Copy to clipboard
(new ImageTag( ' actor.png ' )) ->resize(Resize::thumbnail()->width(0.6) ->aspectRatio(i.0) ->zoom(0.7) ->gravity( Gravity::focusOn( FocusOn::face())) ) ->roundCorners(RoundCorners::max()) ->effect(Event::outline() ->color(Color::Brownish) ) ->effect(Effect::shadow() ->color(Color::Grey) ->offsetX(xxx) ->offsetY(55));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag( " player.png " , assortment( " transformation " =>assortment( array( " aspect_ratio " => " 1.0 " , " gravity " => " confront " , " width " => " 0.6 " , " zoom " => " 0.7 " , " ingather " => " pollex " ), assortment( " radius " => " max " ), array( " color " => " brownish " , " effect " => " outline " ), array( " colour " => " grayness " , " effect " => " shadow " , " 10 " =>xxx, " y " =>55) )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage( " actor.png " ).prototype(transformation=[ { ' aspect_ratio ' : " one.0 " , ' gravity ' : " confront " , ' width ' : " 0.6 " , ' zoom ' : " 0.7 " , ' crop ' : " thumb " }, { ' radius ' : " max " }, { ' color ' : " brown " , ' consequence ' : " outline " }, { ' color ' : " grey " , ' issue ' : " shadow " , ' x ' : 30, ' y ' : 55} ])
Node.js (cloudinary 1.10):
Copy to clipboard
cloudinary.prototype( " role player.png " , {transformation: [ {aspect_ratio: " 1.0 " , gravity: " face " , width: " 0.6 " , zoom: " 0.7 " , crop: " thumb " }, {radius: " max " }, {color: " brown " , effect: " outline " }, {colour: " grey " , effect: " shadow " , x: xxx, y: 55} ]})
Java (cloudinary 1.10):
Re-create to clipboard
cloudinary.url().transformation(new Transformation() .aspectRatio( " 1.0 " ).gravity( " confront " ).width(0.half dozen).zoom(0.7).crop( " thumb " ).chain() .radius( " max " ).chain() .colour( " brown " ).event( " outline " ).concatenation() .colour( " grey " ).upshot( " shadow " ).x(30).y(55)).imageTag( " actor.png " );
JS (@cloudinary/url-gen 1.ten):
JS (cloudinary-core 2.x (legacy)):
Re-create to clipboard
cloudinary.imageTag( ' role player.png ' , {transformation: [ {aspectRatio: " i.0 " , gravity: " face " , width: " 0.6 " , zoom: " 0.7 " , crop: " thumb " }, {radius: " max " }, {color: " chocolate-brown " , effect: " outline " }, {color: " gray " , effect: " shadow " , x: 30, y: 55} ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Re-create to clipboard
$.cloudinary.image( " thespian.png " , {transformation: [ {aspect_ratio: " 1.0 " , gravity: " face " , width: " 0.half-dozen " , zoom: " 0.7 " , crop: " thumb " }, {radius: " max " }, {color: " chocolate-brown " , effect: " outline " }, {color: " greyness " , effect: " shadow " , x: 30, y: 55} ]})
React (@cloudinary/react 1.x):
React (cloudinary-react ane.x):
Copy to clipboard
<Image publicId= " actor.png " > <Transformation aspectRatio= " i.0 " gravity= " face " width= " 0.6 " zoom= " 0.7 " ingather= " thumb " /> <Transformation radius= " max " /> <Transformation colour= " brown " upshot= " outline " /> <Transformation color= " grey " effect= " shadow " x= " 30 " y= " 55 " /> </Image>
Vue.js (cloudinary-vue ane.x):
Copy to clipboard
<cld-prototype public-id= " actor.png " > <cld-transformation aspect-ratio= " one.0 " gravity= " confront " width= " 0.half-dozen " zoom= " 0.7 " ingather= " pollex " /> <cld-transformation radius= " max " /> <cld-transformation color= " brown " effect= " outline " /> <cld-transformation color= " grayness " event= " shadow " 10= " 30 " y= " 55 " /> < / cld-image>
Athwart (@cloudinary/ng 1.ten):
Angular (@cloudinary/angular-five.x one.x (legacy)):
Copy to clipboard
<cl-prototype public-id= " actor.png " > <cl-transformation aspect-ratio= " one.0 " gravity= " face " width= " 0.vi " zoom= " 0.7 " crop= " thumb " > < / cl-transformation> <cl-transformation radius="max"> < / cl-transformation> <cl-transformation color= " dark-brown " consequence= " outline " > < / cl-transformation> <cl-transformation colour="greyness" effect="shadow" x="thirty" y="55"> < / cl-transformation> < / cl-image>
.Cyberspace (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation() .AspectRatio( " one.0 " ).Gravity( " face " ).Width(0.half dozen).Zoom(0.7).Crop( " pollex " ).Chain() .Radius( " max " ).Chain() .Colour( " brownish " ).Effect( " outline " ).Concatenation() .Colour( " grey " ).Consequence( " shadow " ).X(30).Y(55)).BuildImageTag( " histrion.png " )
iOS (cloudinary three.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setAspectRatio( " 1.0 " ).setGravity( " face " ).setWidth(0.6).setZoom(0.7).setCrop( " thumb " ).chain() .setRadius( " max " ).concatenation() .setColor( " brownish " ).setEffect( " outline " ).concatenation() .setColor( " gray " ).setEffect( " shadow " ).setX(30).setY(55)).generate( " actor.png " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.become().url().transformation(new Transformation() .aspectRatio( " 1.0 " ).gravity( " face " ).width(0.6).zoom(0.7).crop( " thumb " ).chain() .radius( " max " ).chain() .colour( " brown " ).effect( " outline " ).chain() .color( " grey " ).effect( " shadow " ).10(30).y(55)).generate( " actor.png " );
Kotlin (kotlin-url-gen 1.x):
The URL tab above shows the URL equally it looks when generated by an SDK. SDKs ever generate the parameters within a specific URL component in alphabetical guild (thus some qualifiers in the URL may come before the activity that they qualify).
In this transformation:
- The width, aspect ratio, gravity, and zoom qualifiers control the way the thumbnail crop action will exist performed.
- The rounding action does not have any qualifiers.
- The color qualifier overrides the default color of the outline effect action.
- The x and y qualifiers conform the placement of the shadow outcome and the color qualifier overrides the default shadow colour.
Transformation flags
Transformation flags change default transformation behavior. In some cases, they alter the default beliefs of the transformation URL as a whole. In other cases, they alter the behavior of one or more than specific transformation parameters that must be used together in the same URL component.
In general, tens of flags are available that tin alter delivery and format, cropping and positioning, overlays, metadata and color profiles, likewise equally PDF and text behaviors, just to proper noun a few.
For instance:
-
fl_attachment alters the normal behavior of the overall transformation. Instead of delivering an asset in a web page, it causes the transformed media file to be downloaded as an attachment. This flag can exist used independently of other transformations.
-
fl_relative modifies the way overlay resize parameters are evaluated. This flag can only be used in conjunction with the overlay (
l_) parameter. -
fl_layer_apply tells Cloudinary to employ all chained transformations, until a transformation component that includes this flag, on the last added overlay or underlay asset instead of applying them on the base asset. This flag acts every bit an indictor to close the layer section of the transformation, like to a closing bracket. Placement definitions for how the layer should be applied, such as gravity and offsets are also defined in the component with this flag.
For details on all available transformation flags, see the flag section of the Transformation Reference.
Generating secure HTTPS URLs using SDKs
For backward compatibility reasons, many of Cloudinary'southward earlier SDK major versions generate http URLs by default. When using one of these SDKs, you lot can instruct the SDK to generate https URLs by setting the secure parameter to true, either globally as part of your SDK configuration, or locally in each transformation operation. For example, delivering the sample image with HTTPS:
Blood-red (cloudinary 1.x):
Copy to clipboard
cl_image_tag( " sample.jpg " , :secure=>truthful)
PHP (cloudinary_php two.x):
Re-create to clipboard
(new ImageTag( ' sample.jpg ' ));
PHP (cloudinary_php i.x (legacy)):
Copy to clipboard
cl_image_tag( " sample.jpg " , array( " secure " =>truthful))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage( " sample.jpg " ).image(secure=True)
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image( " sample.jpg " , {secure: true})
Coffee (cloudinary 1.ten):
Copy to clipboard
cloudinary.url().transformation(new Transformation().secure(true).imageTag( " sample.jpg " );
JS (@cloudinary/url-gen one.x):
Copy to clipboard
new CloudinaryImage( " sample.jpg " );
JS (cloudinary-core two.x (legacy)):
Copy to clipboard
cloudinary.imageTag( ' sample.jpg ' , {secure: truthful}).toHtml();
jQuery (cloudinary-jquery two.x):
Copy to clipboard
$.cloudinary.image( " sample.jpg " , {secure: true})
React (@cloudinary/react i.ten):
Re-create to clipboard
new CloudinaryImage( " sample.jpg " );
React (cloudinary-react 1.ten):
Copy to clipboard
<Image publicId= " sample.jpg " secure= " true " > </Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id= " sample.jpg " secure= " truthful " > < / cld-prototype>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
new CloudinaryImage( " sample.jpg " );
Athwart (@cloudinary/angular-5.ten 1.x (legacy)):
Re-create to clipboard
<cl-image public-id= " sample.jpg " secure= " true " > < / cl-image>
.NET (CloudinaryDotNet 1.x):
Re-create to clipboard
cloudinary.Api.UrlImgUp.Secure(true).BuildImageTag( " sample.jpg " )
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate( " sample.jpg " )!, cloudinary: cloudinary) Android (cloudinary-android ane.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().secure(true).generate( " sample.jpg " );
Kotlin (kotlin-url-gen one.ten):
Copy to clipboard
cloudinary.image { publicId( " sample.jpg " ) }.generate()
For SDK major versions showtime released in 2020 or later, the secure parameter is true by default.
Verbose vs non-verbose syntax
Some transformation parameters with multiple options offer two culling syntaxes for defining the option values:
- Verbose, unordered: Each option of the transformation (whether required or optional) is specified in the verbose format
name_valueand each choice is separated by a colon (:).The options can be specified in any club, and yous only demand to include those that you want (or are required) to define.
With this syntax, you tin also cull to specify only the options for which you don't desire to use default values and default values volition be practical for the others.
- Non-verbose, ordered: Transformation options are specified merely past values, and must be entered in the pre-divers option order for that transformation. All values from the syntax to the left of the value you desire to supply must also be entered.
Transformations that support both verbose and not-verbose URL syntax are indicated as such in the Transformation Reference. When both are supported, SDKs always output the verbose syntax.
Verbose vs not-verbose instance
The theme effect supports the color and photosensitivity options, but you can specify them in a unlike order using verbose syntax. For instance:
e_theme:photosensitivity_110:color_black
However, when using non-verbose syntax, you must specify the parameters in lodge. Therefore, even if yous merely want to change the default beliefs of the photosensitivity (last) pick, yous must all the same specify the value to employ for the color (first) choice:
e_theme:blackness:110
Chained Transformations
Cloudinary supports powerful transformations that are applied on the fly using dynamic URLs. You tin can combine multiple transformation actions together every bit part of a single delivery request, eastward.chiliad., crop an image and then add a border to it.
In general, it'south all-time practice to chain each transformation activeness in your URL as a dissever component in the chain.
To support chained transformations, Cloudinary'southward transformation URLs permit yous to include multiple transformation components, each separated by a slash (/), where each of the transformation components is executed on the upshot of the previous one. Cloudinary'southward SDKs can employ multiple transformation components past specifying the transformation parameter and setting information technology to an array of transformation maps.
Examples with the uploaded JPG image named flower:
-
Two chained transformations: fill to a 150px square and then circular to a circle:
Ruby (cloudinary one.x):
Copy to clipboard
cl_image_tag( " blossom.jpg " , :transformation=>[ {:aspect_ratio=> " 1.0 " , :width=>150, :crop=> " fill " }, {:radius=> " max " } ])
PHP (cloudinary_php 2.10):
Copy to clipboard
(new ImageTag( ' blossom.jpg ' )) ->resize(Resize::fill()->width(150) ->aspectRatio(ane.0)) ->roundCorners(RoundCorners::max());
PHP (cloudinary_php one.x (legacy)):
Copy to clipboard
cl_image_tag( " flower.jpg " , assortment( " transformation " =>array( assortment( " aspect_ratio " => " 1.0 " , " width " =>150, " crop " => " make full " ), array( " radius " => " max " ) )))
Python (cloudinary 1.x):
Re-create to clipboard
CloudinaryImage( " blossom.jpg " ).image(transformation=[ { ' aspect_ratio ' : " one.0 " , ' width ' : 150, ' crop ' : " fill " }, { ' radius ' : " max " } ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image( " flower.jpg " , {transformation: [ {aspect_ratio: " i.0 " , width: 150, crop: " fill up " }, {radius: " max " } ]})
Coffee (cloudinary one.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation() .aspectRatio( " 1.0 " ).width(150).ingather( " fill " ).concatenation() .radius( " max " )).imageTag( " flower.jpg " );
JS (@cloudinary/url-gen 1.x):
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag( ' flower.jpg ' , {transformation: [ {aspectRatio: " 1.0 " , width: 150, ingather: " fill " }, {radius: " max " } ]}).toHtml();
jQuery (cloudinary-jquery 2.10):
Copy to clipboard
$.cloudinary.epitome( " flower.jpg " , {transformation: [ {aspect_ratio: " ane.0 " , width: 150, crop: " fill " }, {radius: " max " } ]})
React (@cloudinary/react 1.x):
React (cloudinary-react 1.ten):
Copy to clipboard
<Image publicId= " flower.jpg " > <Transformation aspectRatio= " 1.0 " width= " 150 " crop= " fill " /> <Transformation radius= " max " /> </Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id= " blossom.jpg " > <cld-transformation aspect-ratio= " 1.0 " width= " 150 " crop= " make full " /> <cld-transformation radius= " max " /> < / cld-prototype>
Angular (@cloudinary/ng 1.x):
Angular (@cloudinary/angular-five.10 one.x (legacy)):
Re-create to clipboard
<cl-image public-id= " flower.jpg " > <cl-transformation aspect-ratio= " i.0 " width= " 150 " ingather= " fill " > < / cl-transformation> <cl-transformation radius="max"> < / cl-transformation> < / cl-image>
.Cyberspace (CloudinaryDotNet 1.x):
Re-create to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation() .AspectRatio( " 1.0 " ).Width(150).Crop( " fill " ).Chain() .Radius( " max " )).BuildImageTag( " flower.jpg " )
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setAspectRatio( " i.0 " ).setWidth(150).setCrop( " fill " ).chain() .setRadius( " max " )).generate( " flower.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation() .aspectRatio( " 1.0 " ).width(150).ingather( " fill " ).chain() .radius( " max " )).generate( " flower.jpg " );
Kotlin (kotlin-url-gen 1.x):
-
Four chained transformations: crop to 150x100 with a custom first from the center, fill ingather to 130x100, rotate by xx degrees, and so scale down to eighty%:
Cherry-red (cloudinary 1.ten):
Copy to clipboard
cl_image_tag( " flower.jpg " , :transformation=>[ {:meridian=>100, :width=>150, :x=>380, :y=>250, :ingather=> " ingather " }, {:height=>100, :width=>130, :crop=> " make full " }, {:angle=>twenty}, {:width=>0.8, :crop=> " scale " } ])
PHP (cloudinary_php two.x):
Copy to clipboard
(new ImageTag( ' blossom.jpg ' )) ->resize(Resize::crop()->width(150) ->elevation(100) ->x(380) ->y(250)) ->resize(Resize::fill()->width(130) ->acme(100)) ->rotate(Rotate::byAngle(twenty)) ->resize(Resize::calibration()->width(0.8));
PHP (cloudinary_php 1.x (legacy)):
Re-create to clipboard
cl_image_tag( " flower.jpg " , array( " transformation " =>array( array( " height " =>100, " width " =>150, " 10 " =>380, " y " =>250, " crop " => " crop " ), array( " height " =>100, " width " =>130, " crop " => " fill " ), assortment( " angle " =>20), assortment( " width " => " 0.eight " , " crop " => " scale " ) )))
Python (cloudinary 1.ten):
Re-create to clipboard
CloudinaryImage( " flower.jpg " ).image(transformation=[ { ' acme ' : 100, ' width ' : 150, ' x ' : 380, ' y ' : 250, ' ingather ' : " crop " }, { ' height ' : 100, ' width ' : 130, ' ingather ' : " fill " }, { ' angle ' : xx}, { ' width ' : " 0.8 " , ' crop ' : " scale " } ])
Node.js (cloudinary 1.x):
Re-create to clipboard
cloudinary.image( " flower.jpg " , {transformation: [ {top: 100, width: 150, x: 380, y: 250, crop: " crop " }, {summit: 100, width: 130, crop: " fill " }, {angle: twenty}, {width: " 0.8 " , crop: " scale " } ]})
Java (cloudinary i.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation() .height(100).width(150).ten(380).y(250).crop( " crop " ).concatenation() .tiptop(100).width(130).crop( " fill " ).chain() .angle(20).concatenation() .width(0.8).ingather( " calibration " )).imageTag( " bloom.jpg " );
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage( " blossom.jpg " ) .resize(ingather().width(150).top(100).x(380).y(250)) .resize(fill().width(130).height(100)) .rotate(byAngle(20)) .resize(scale().width(0.8));
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag( ' blossom.jpg ' , {transformation: [ {tiptop: 100, width: 150, ten: 380, y: 250, crop: " ingather " }, {height: 100, width: 130, crop: " fill " }, {bending: 20}, {width: " 0.8 " , crop: " calibration " } ]}).toHtml();
jQuery (cloudinary-jquery two.x):
Copy to clipboard
$.cloudinary.image( " flower.jpg " , {transformation: [ {height: 100, width: 150, x: 380, y: 250, ingather: " crop " }, {peak: 100, width: 130, crop: " fill up " }, {angle: twenty}, {width: " 0.8 " , crop: " scale " } ]})
React (@cloudinary/react i.x):
Re-create to clipboard
new CloudinaryImage( " blossom.jpg " ) .resize(crop().width(150).height(100).ten(380).y(250)) .resize(fill up().width(130).pinnacle(100)) .rotate(byAngle(twenty)) .resize(scale().width(0.8));
React (cloudinary-react one.x):
Copy to clipboard
<Image publicId= " flower.jpg " > <Transformation height= " 100 " width= " 150 " 10= " 380 " y= " 250 " crop= " crop " /> <Transformation tiptop= " 100 " width= " 130 " crop= " make full " /> <Transformation angle= " 20 " /> <Transformation width= " 0.8 " crop= " calibration " /> </Image>
Vue.js (cloudinary-vue 1.x):
Re-create to clipboard
<cld-paradigm public-id= " flower.jpg " > <cld-transformation superlative= " 100 " width= " 150 " x= " 380 " y= " 250 " ingather= " crop " /> <cld-transformation elevation= " 100 " width= " 130 " crop= " fill " /> <cld-transformation angle= " 20 " /> <cld-transformation width= " 0.8 " ingather= " scale " /> < / cld-image>
Athwart (@cloudinary/ng one.10):
Copy to clipboard
new CloudinaryImage( " bloom.jpg " ) .resize(crop().width(150).top(100).ten(380).y(250)) .resize(fill().width(130).top(100)) .rotate(byAngle(20)) .resize(scale().width(0.8));
Athwart (@cloudinary/angular-5.x i.ten (legacy)):
Copy to clipboard
<cl-image public-id= " flower.jpg " > <cl-transformation peak= " 100 " width= " 150 " x= " 380 " y= " 250 " crop= " crop " > < / cl-transformation> <cl-transformation superlative="100" width="130" ingather="make full"> < / cl-transformation> <cl-transformation angle= " twenty " > < / cl-transformation> <cl-transformation width="0.eight" crop="scale"> < / cl-transformation> < / cl-prototype>
.Cyberspace (CloudinaryDotNet i.10):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Meridian(100).Width(150).10(380).Y(250).Crop( " ingather " ).Concatenation() .Summit(100).Width(130).Crop( " fill " ).Concatenation() .Angle(20).Chain() .Width(0.8).Crop( " calibration " )).BuildImageTag( " bloom.jpg " )
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setHeight(100).setWidth(150).setX(380).setY(250).setCrop( " crop " ).chain() .setHeight(100).setWidth(130).setCrop( " make full " ).chain() .setAngle(twenty).chain() .setWidth(0.8).setCrop( " scale " )).generate( " bloom.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.go().url().transformation(new Transformation() .height(100).width(150).x(380).y(250).crop( " crop " ).chain() .height(100).width(130).crop( " fill " ).chain() .bending(xx).chain() .width(0.8).ingather( " calibration " )).generate( " flower.jpg " );
Kotlin (kotlin-url-gen 1.x):
Named Transformations
A named transformation is a pre-defined set of transformation parameters that has been given a custom name for easy reference. Instead of applying each of the required transformations separately to an asset, you tin can utilize a single named transformation to apply all the transformations defined for it. This makes it easy to:
- Reuse transformations on multiple assets
- Shorten complex transformation URLs
- Hide the details of a transformation in your commitment URL.
- Simplify the enabling/disabling of transformations in Strict Transformations manner.
Named transformations tin can include other named transformations, which allows yous to define a chain of transformations to run on multiple avails more easily.
You tin create and manage named transformations via the API or in the console UI.
Once the named transformation has been defined, yous can transform an nugget with the transformation parameter (t for URLs) and the proper noun of your named transformation. For case t_instagram-automobile-crop.
You tin can include user-defined variables in your named transformations, and then pass the value for the user-defined variable into the transformation from an external source. This enables creating a named transformation 'template' with a lot of flexibility.
For example, yous could define a complex named transformation that includes a text overlay as a named transformation, using a user-defined variable for the text string value.
For more details, meet user-defined variables. For a use-case example demonstrating named transformations with user-divers variables, see Named transformation with a user-defined variable.
You tin can also set up named transformations as transformation presets, which enables y'all to preview how assets from your Media Library will look with different named transformations practical.
Keep in mind that named transformation may be applied to avails by other users and not all asset formats are supported for transformations. If an asset'southward original format doesn't support transformations, applying a named transformation to it volition result in an error. See a list of supported image formats.
Updating the transformation definition for a named transformation via the Admin API does not automatically update assets that were already derived/delivered with that named transformation. To apply the new definition to whatever already derived avails that apply that named transformation, you lot must specifically invalidate those transformations or otherwise modify the other parameters in that delivery URL, and then that the asset will be re-derived using the new definition.
However, when updating the transformation definition of a named transformation via the Direction Console, if the named transformation is used in fewer than 1000 existing derived assets, those avails are automatically invalidated and will use the new named transformation definition the adjacent time they are requested. If more 1000 existing derived assets use the named transformation, then existing derived assets are not updated and only newly generated derived avails will use the new definition.
Creating named transformations
You can create a named transformation programmatically or using the Transformations UI in your Cloudinary panel:
To create a named transformation programmatically, use the Transformations Admin API method. The following example defines a named transformation called small_profile_thumbnail that uses automatic cropping to resize avails to the required size for a item application'south thumbnail display:
Ruby (cloudinary ane.ten):
Copy to clipboard
Cloudinary::Api.create_transformation( ' small_profile_thumbnail ' , {:width => 100, :acme => 150, :crop => :fill up, :gravity=>:automobile})
PHP (cloudinary_php 2.x):
Copy to clipboard
$api->createTransformation( " small_profile_thumbnail " , [resize(Resize::fill up()->width(200)->height(300)->gravity(Gravity::autoGravity()]);
PHP (cloudinary_php ane.x (legacy)):
Copy to clipboard
$api->create_transformation( " small_profile_thumbnail " , [ " width " => 100, " height " => 150, " crop " => " fill " , " gravity " => " machine " ]);
Python (cloudinary 1.x):
Copy to clipboard
cloudinary.api.create_transformation( " small_profile_thumbnail " , dict(width = 100, height = 150, crop = " fill " , " gravity " = " auto " ))
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.v2.api.create_transformation( ' small_profile_thumbnail ' , { width: 100, summit: 150, crop: ' make full ' , gravity: ' motorcar ' }, role(error, result) {console.log(result, error); });
Java (cloudinary ane.x):
Copy to clipboard
api.createTransformation( " small_profile_thumbnail " , new Transformation().width(150).pinnacle(100).crop( " fill up " ).gravity( " auto " ).generate(), ObjectUtils.emptyMap());
.Cyberspace (CloudinaryDotNet i.x):
Copy to clipboard
var createTransformParams = new CreateTransformParams(){ Proper name = " small_profile_thumbnail " , Transformation = new Transformation().Width(100).Height(150).Crop( " fill " ).Gravity( " auto " )}; cloudinary.CreateTransform(createTransformParams);
Go (cloudinary-go 1.ten):
Re-create to clipboard
resp, err := cld.Admin.CreateTransformation(ctx, admin.CreateTransformationParams{ Name: " small_profile_thumbnail " , Transformation: " c_fill,g_auto,h_150,w_100 " }) curl:
Copy to clipboard
curl \ -d 'transformation=w_100,h_150,c_fill,g_auto' \ -X Post \ https://<API_KEY>:<API_SECRET>@api.cloudinary.com/v1_1/<CLOUD_NAME>/transformations/small_profile_thumbnail
cli:
Re-create to clipboard
cld admin create_transformation "small_profile_thumbnail" '{"width": 150, "pinnacle": 100, "crop": "fill", "gravity": "car"}' For more details and examples, come across the Create Transformation method in the Admin API Reference.
To create a named transformation using the console, you take a few options:
- Start with a cookbook recipe as a template and refine information technology to your needs before saving it with your called name.
- View a list of all your dynamic transformations (those you generated and delivered on the wing) and save one of those with your chosen name.
- Create a new transformation from scratch using the transformation editor and save with your chosen proper noun.
Names used for named transformations:
- Must incorporate valid UTF8 characters but
- Must not contain more than 1024 characters
- Must not contain any of these characters:
\,/,?,&,#,%,.,,,<,>
Once you've saved your named transformations, you tin can view a listing of them on the Named Transformations page of the console. From here, you can edit, copy, or enable/disable Strict Transformations.
Yous can also select to include a transformation as a preset in the Media Library Asset Management page.
Named transformation examples
Below are some examples of using the following named transformations that accept been defined for the Cloudinary demo business relationship:
-
jpg_with_quality_30: Convert the image to a JPEG with 30% quality. -
crop_400x400: Crop the paradigm to 400x400 with center gravity. -
fit_100x150: Fit the paradigm into a 100x150 rectangle.
To create a version of the sample paradigm based on the fit_100x150 transformation:
Ruby (cloudinary ane.x):
Copy to clipboard
cl_image_tag( " sample.jpg " , :transformation=>[ " fit_100x150 " ])
PHP (cloudinary_php ii.x):
Copy to clipboard
(new ImageTag( ' sample.jpg ' )) ->namedTransformation(NamedTransformation::name( " fit_100x150 " ));
PHP (cloudinary_php ane.x (legacy)):
Copy to clipboard
cl_image_tag( " sample.jpg " , array( " transformation " =>array( " fit_100x150 " )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage( " sample.jpg " ).paradigm(transformation=[ " fit_100x150 " ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.epitome( " sample.jpg " , {transformation: [ " fit_100x150 " ]})
Coffee (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().named( " fit_100x150 " )).imageTag( " sample.jpg " );
JS (@cloudinary/url-gen 1.ten):
Copy to clipboard
new CloudinaryImage( " sample.jpg " ).namedTransformation(name( " fit_100x150 " ));
JS (cloudinary-cadre 2.10 (legacy)):
Copy to clipboard
cloudinary.imageTag( ' sample.jpg ' , {transformation: [ " fit_100x150 " ]}).toHtml();
jQuery (cloudinary-jquery 2.ten):
Copy to clipboard
$.cloudinary.image( " sample.jpg " , {transformation: [ " fit_100x150 " ]})
React (@cloudinary/react ane.x):
Copy to clipboard
new CloudinaryImage( " sample.jpg " ).namedTransformation(name( " fit_100x150 " ));
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId= " sample.jpg " > <Transformation transformation={ [ " fit_100x150 " ] } /> </Image>
Vue.js (cloudinary-vue 1.ten):
Copy to clipboard
<cld-prototype public-id= " sample.jpg " > <cld-transformation transformation={ [ " fit_100x150 " ] } /> < / cld-image>
Athwart (@cloudinary/ng one.x):
Copy to clipboard
new CloudinaryImage( " sample.jpg " ).namedTransformation(proper name( " fit_100x150 " ));
Angular (@cloudinary/athwart-5.ten ane.x (legacy)):
Copy to clipboard
<cl-epitome public-id= " sample.jpg " > <cl-transformation transformation={{[ " fit_100x150 " ]}}> < / cl-transformation> < / cl-epitome>
.Cyberspace (CloudinaryDotNet one.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Named( " fit_100x150 " )).BuildImageTag( " sample.jpg " )
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setNamed( " fit_100x150 " )).generate( " sample.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().named( " fit_100x150 " )).generate( " sample.jpg " );
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.image { publicId( " sample.jpg " ) namedTransformation(NamedTransformation.proper noun( " fit_100x150 " )) }.generate() 
To create a transformation that applies additional transformations to the jpg_with_quality_30 named transformation, such as fitting it to a 100 pixel width and a 50 pixel superlative:
Crimson (cloudinary 1.x):
Copy to clipboard
cl_image_tag( " sample.jpg " , :transformation=>[ {:transformation=>[ " jpg_with_quality_30 " ]}, {:meridian=>fifty, :width=>100, :crop=> " fit " } ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag( ' sample.jpg ' )) ->namedTransformation(NamedTransformation::name( " jpg_with_quality_30 " )) ->resize(Resize::fit()->width(100) ->height(50));
PHP (cloudinary_php one.x (legacy)):
Re-create to clipboard
cl_image_tag( " sample.jpg " , array( " transformation " =>array( assortment( " transformation " =>array( " jpg_with_quality_30 " )), assortment( " height " =>50, " width " =>100, " crop " => " fit " ) )))
Python (cloudinary i.x):
Copy to clipboard
CloudinaryImage( " sample.jpg " ).image(transformation=[ { ' transformation ' : [ " jpg_with_quality_30 " ]}, { ' pinnacle ' : 50, ' width ' : 100, ' crop ' : " fit " } ])
Node.js (cloudinary 1.10):
Copy to clipboard
cloudinary.paradigm( " sample.jpg " , {transformation: [ {transformation: [ " jpg_with_quality_30 " ]}, {peak: fifty, width: 100, ingather: " fit " } ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation() .named( " jpg_with_quality_30 " ).chain() .height(50).width(100).crop( " fit " )).imageTag( " sample.jpg " );
JS (@cloudinary/url-gen i.x):
Re-create to clipboard
new CloudinaryImage( " sample.jpg " ) .namedTransformation(name( " jpg_with_quality_30 " )) .resize(fit().width(100).pinnacle(l));
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag( ' sample.jpg ' , {transformation: [ {transformation: [ " jpg_with_quality_30 " ]}, {superlative: 50, width: 100, ingather: " fit " } ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image( " sample.jpg " , {transformation: [ {transformation: [ " jpg_with_quality_30 " ]}, {height: 50, width: 100, ingather: " fit " } ]})
React (@cloudinary/react 1.x):
Copy to clipboard
new CloudinaryImage( " sample.jpg " ) .namedTransformation(proper name( " jpg_with_quality_30 " )) .resize(fit().width(100).height(l));
React (cloudinary-react ane.ten):
Copy to clipboard
<Image publicId= " sample.jpg " > <Transformation transformation={ [ " jpg_with_quality_30 " ] } /> <Transformation height= " 50 " width= " 100 " ingather= " fit " /> </Image>
Vue.js (cloudinary-vue 1.x):
Re-create to clipboard
<cld-image public-id= " sample.jpg " > <cld-transformation transformation={ [ " jpg_with_quality_30 " ] } /> <cld-transformation height= " 50 " width= " 100 " crop= " fit " /> < / cld-paradigm>
Athwart (@cloudinary/ng 1.x):
Copy to clipboard
new CloudinaryImage( " sample.jpg " ) .namedTransformation(name( " jpg_with_quality_30 " )) .resize(fit().width(100).meridian(50));
Athwart (@cloudinary/angular-5.10 1.10 (legacy)):
Copy to clipboard
<cl-image public-id= " sample.jpg " > <cl-transformation transformation={{[ " jpg_with_quality_30 " ]}}> < / cl-transformation> <cl-transformation height="50" width="100" ingather="fit"> < / cl-transformation> < / cl-epitome>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Named( " jpg_with_quality_30 " ).Chain() .Peak(l).Width(100).Crop( " fit " )).BuildImageTag( " sample.jpg " )
iOS (cloudinary 3.x):
Re-create to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setNamed( " jpg_with_quality_30 " ).chain() .setHeight(50).setWidth(100).setCrop( " fit " )).generate( " sample.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Re-create to clipboard
MediaManager.become().url().transformation(new Transformation() .named( " jpg_with_quality_30 " ).chain() .height(50).width(100).crop( " fit " )).generate( " sample.jpg " );
Kotlin (kotlin-url-gen i.ten):
Copy to clipboard
cloudinary.image { publicId( " sample.jpg " ) namedTransformation(NamedTransformation.proper noun( " jpg_with_quality_30 " )) resize(Resize.fit() { width(100) height(l) }) }.generate() 
Chaining named transformations
Yous can also chain multiple named transformations. For example, to chain the three named transformations nosotros divers to a higher place:
Ruby (cloudinary 1.x):
Re-create to clipboard
cl_image_tag( " sample.jpg " , :transformation=>[ {:transformation=>[ " jpg_with_quality_30 " ]}, {:transformation=>[ " crop_400x400 " ]}, {:transformation=>[ " fit_100x150 " ]} ])
PHP (cloudinary_php ii.x):
Re-create to clipboard
(new ImageTag( ' sample.jpg ' )) ->namedTransformation(NamedTransformation::name( " jpg_with_quality_30 " )) ->namedTransformation(NamedTransformation::name( " crop_400x400 " )) ->namedTransformation(NamedTransformation::proper noun( " fit_100x150 " ));
PHP (cloudinary_php one.x (legacy)):
Copy to clipboard
cl_image_tag( " sample.jpg " , assortment( " transformation " =>array( array( " transformation " =>assortment( " jpg_with_quality_30 " )), array( " transformation " =>array( " crop_400x400 " )), array( " transformation " =>array( " fit_100x150 " )) )))
Python (cloudinary 1.ten):
Copy to clipboard
CloudinaryImage( " sample.jpg " ).image(transformation=[ { ' transformation ' : [ " jpg_with_quality_30 " ]}, { ' transformation ' : [ " crop_400x400 " ]}, { ' transformation ' : [ " fit_100x150 " ]} ])
Node.js (cloudinary ane.x):
Copy to clipboard
cloudinary.image( " sample.jpg " , {transformation: [ {transformation: [ " jpg_with_quality_30 " ]}, {transformation: [ " crop_400x400 " ]}, {transformation: [ " fit_100x150 " ]} ]})
Coffee (cloudinary i.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation() .named( " jpg_with_quality_30 " ).chain() .named( " crop_400x400 " ).concatenation() .named( " fit_100x150 " )).imageTag( " sample.jpg " );
JS (@cloudinary/url-gen 1.ten):
Copy to clipboard
new CloudinaryImage( " sample.jpg " ) .namedTransformation(name( " jpg_with_quality_30 " )) .namedTransformation(proper noun( " crop_400x400 " )) .namedTransformation(name( " fit_100x150 " ));
JS (cloudinary-core ii.10 (legacy)):
Copy to clipboard
cloudinary.imageTag( ' sample.jpg ' , {transformation: [ {transformation: [ " jpg_with_quality_30 " ]}, {transformation: [ " crop_400x400 " ]}, {transformation: [ " fit_100x150 " ]} ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.paradigm( " sample.jpg " , {transformation: [ {transformation: [ " jpg_with_quality_30 " ]}, {transformation: [ " crop_400x400 " ]}, {transformation: [ " fit_100x150 " ]} ]})
React (@cloudinary/react i.x):
Copy to clipboard
new CloudinaryImage( " sample.jpg " ) .namedTransformation(name( " jpg_with_quality_30 " )) .namedTransformation(name( " crop_400x400 " )) .namedTransformation(name( " fit_100x150 " ));
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId= " sample.jpg " > <Transformation transformation={ [ " jpg_with_quality_30 " ] } /> <Transformation transformation={ [ " crop_400x400 " ] } /> <Transformation transformation={ [ " fit_100x150 " ] } /> </Prototype>
Vue.js (cloudinary-vue ane.x):
Re-create to clipboard
<cld-image public-id= " sample.jpg " > <cld-transformation transformation={ [ " jpg_with_quality_30 " ] } /> <cld-transformation transformation={ [ " crop_400x400 " ] } /> <cld-transformation transformation={ [ " fit_100x150 " ] } /> < / cld-image>
Angular (@cloudinary/ng i.x):
Copy to clipboard
new CloudinaryImage( " sample.jpg " ) .namedTransformation(name( " jpg_with_quality_30 " )) .namedTransformation(name( " crop_400x400 " )) .namedTransformation(proper name( " fit_100x150 " ));
Angular (@cloudinary/angular-5.10 1.x (legacy)):
Copy to clipboard
<cl-image public-id= " sample.jpg " > <cl-transformation transformation={{[ " jpg_with_quality_30 " ]}}> < / cl-transformation> <cl-transformation transformation={{["crop_400x400"]}}> < / cl-transformation> <cl-transformation transformation={{[ " fit_100x150 " ]}}> < / cl-transformation> < / cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Named( " jpg_with_quality_30 " ).Chain() .Named( " crop_400x400 " ).Chain() .Named( " fit_100x150 " )).BuildImageTag( " sample.jpg " )
iOS (cloudinary three.x):
Re-create to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setNamed( " jpg_with_quality_30 " ).chain() .setNamed( " crop_400x400 " ).chain() .setNamed( " fit_100x150 " )).generate( " sample.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android i.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation() .named( " jpg_with_quality_30 " ).chain() .named( " crop_400x400 " ).chain() .named( " fit_100x150 " )).generate( " sample.jpg " );
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.image { publicId( " sample.jpg " ) namedTransformation(NamedTransformation.name( " jpg_with_quality_30 " )) namedTransformation(NamedTransformation.name( " crop_400x400 " )) namedTransformation(NamedTransformation.proper noun( " fit_100x150 " )) }.generate() Chaining transformations can create long URLs, so instead you could ascertain a named transformation that includes a chain of other transformations, including other named transformations. For case, nosotros can create a named transformation that is a blended of the 3 named transformations described above. It is now simple to specify a single named transformation instead:
Cherry (cloudinary 1.x):
Copy to clipboard
cl_image_tag( " sample.jpg " , :transformation=>[ " demo_combined " ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag( ' sample.jpg ' )) ->namedTransformation(NamedTransformation::proper name( " demo_combined " ));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag( " sample.jpg " , array( " transformation " =>array( " demo_combined " )))
Python (cloudinary i.ten):
Re-create to clipboard
CloudinaryImage( " sample.jpg " ).image(transformation=[ " demo_combined " ])
Node.js (cloudinary one.x):
Re-create to clipboard
cloudinary.image( " sample.jpg " , {transformation: [ " demo_combined " ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().named( " demo_combined " )).imageTag( " sample.jpg " );
JS (@cloudinary/url-gen i.x):
Re-create to clipboard
new CloudinaryImage( " sample.jpg " ).namedTransformation(proper noun( " demo_combined " ));
JS (cloudinary-cadre ii.x (legacy)):
Copy to clipboard
cloudinary.imageTag( ' sample.jpg ' , {transformation: [ " demo_combined " ]}).toHtml();
jQuery (cloudinary-jquery ii.ten):
Copy to clipboard
$.cloudinary.image( " sample.jpg " , {transformation: [ " demo_combined " ]})
React (@cloudinary/react 1.ten):
Re-create to clipboard
new CloudinaryImage( " sample.jpg " ).namedTransformation(proper name( " demo_combined " ));
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId= " sample.jpg " > <Transformation transformation={ [ " demo_combined " ] } /> </Image>
Vue.js (cloudinary-vue i.10):
Re-create to clipboard
<cld-image public-id= " sample.jpg " > <cld-transformation transformation={ [ " demo_combined " ] } /> < / cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
new CloudinaryImage( " sample.jpg " ).namedTransformation(name( " demo_combined " ));
Angular (@cloudinary/athwart-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id= " sample.jpg " > <cl-transformation transformation={{[ " demo_combined " ]}}> < / cl-transformation> < / cl-image>
.Internet (CloudinaryDotNet ane.10):
Re-create to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Named( " demo_combined " )).BuildImageTag( " sample.jpg " )
iOS (cloudinary 3.10):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setNamed( " demo_combined " )).generate( " sample.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android i.x):
Copy to clipboard
MediaManager.go().url().transformation(new Transformation().named( " demo_combined " )).generate( " sample.jpg " );
Kotlin (kotlin-url-gen i.x):
Copy to clipboard
cloudinary.image { publicId( " sample.jpg " ) namedTransformation(NamedTransformation.name( " demo_combined " )) }.generate() 
Where t_demo_combined is defined as: t_jpg_with_quality_30/t_crop_400x400/t_fit_100x150.
Embedding images in web pages using SDKs
You lot access uploaded images or their derived transformations with URLs. These URLs can be used as the <src> of the <img> tags in your HTML code or other frontend functions to deliver your media assets.
But the easiest way to deliver them is using Cloudinary'due south framework SDKs to automatically generate transformation URLs and embed them using HTML prototype tags. The SDKs offer two primary helper methods: the URL helper and the image tag helper.
Cloudinary URL helper method
The Cloudinary URL helper method (e.g., cloudinary_url in Ruby on Rails) automatically generates the image source URL itself. For case, using the URL helper method to return the URL of the sample image, padded to a scaled width and summit of 300 pixels with a blue groundwork for the padding:
Red (cloudinary ane.x):
Copy to clipboard
cloudinary_url( " sample.jpg " , :background=> " blue " , :height=>300, :width=>300, :crop=> " pad " )
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag( ' sample.jpg ' )) ->resize(Resize::pad()->width(300) ->height(300) ->background( Background::color(Colour::Blueish)) );
PHP (cloudinary_php ane.10 (legacy)):
Copy to clipboard
Cloudinary::cloudinary_url( " sample.jpg " , array( " background " => " blue " , " height " =>300, " width " =>300, " ingather " => " pad " ))
Python (cloudinary ane.x):
Copy to clipboard
cloudinary.utils.cloudinary_url( " sample.jpg " , background= " blue " , tiptop=300, width=300, crop= " pad " )
Node.js (cloudinary i.ten):
Copy to clipboard
cloudinary.url( " sample.jpg " , {background: " blue " , superlative: 300, width: 300, crop: " pad " })
Java (cloudinary ane.x):
Re-create to clipboard
cloudinary.url().transformation(new Transformation().background( " blueish " ).peak(300).width(300).ingather( " pad " )).generate( " sample.jpg " )
JS (@cloudinary/url-gen 1.ten):
Copy to clipboard
new CloudinaryImage( " sample.jpg " ).resize( pad() .width(300) .height(300) .background(colour( " blue " )) );
JS (cloudinary-core ii.x (legacy)):
Copy to clipboard
cloudinary.url( ' sample.jpg ' , {background: " blue " , pinnacle: 300, width: 300, crop: " pad " });
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.url( " sample.jpg " , {background: " blueish " , peak: 300, width: 300, ingather: " pad " })
React (@cloudinary/react ane.10):
Copy to clipboard
new CloudinaryImage( " sample.jpg " ).resize( pad() .width(300) .height(300) .background(color( " blueish " )) );
React (cloudinary-react 1.x):
Copy to clipboard
cloudinary.url( ' sample.jpg ' , {background: " blue " , summit: 300, width: 300, crop: " pad " });
Vue.js (cloudinary-vue 1.10):
Copy to clipboard
cloudinary.url( ' sample.jpg ' , {background: " blue " , height: 300, width: 300, crop: " pad " });
Angular (@cloudinary/ng ane.x):
Re-create to clipboard
new CloudinaryImage( " sample.jpg " ).resize( pad() .width(300) .height(300) .groundwork(colour( " blue " )) );
Angular (@cloudinary/angular-five.ten 1.x (legacy)):
Re-create to clipboard
cloudinary.url( ' sample.jpg ' , {background: " blue " , height: 300, width: 300, crop: " pad " });
.NET (CloudinaryDotNet one.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background( " blue " ).Acme(300).Width(300).Crop( " pad " )).BuildUrl( " sample.jpg " )
iOS (cloudinary iii.10):
Re-create to clipboard
cloudinary.createUrl().setTransformation(CLDTransformation().setBackground( " blue " ).setHeight(300).setWidth(300).setCrop( " pad " )).generate( " sample.jpg " )
Android (cloudinary-android 1.10):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().background( " blueish " ).height(300).width(300).crop( " pad " )).generate( " sample.jpg " );
Kotlin (kotlin-url-gen 1.10):
Copy to clipboard
cloudinary.image { publicId( " sample.jpg " ) resize(Resize.pad() { width(300) height(300) background( Background.color(Color.Bluish)) }) }.generate() This SDK code outputs the URL:
Cloudinary paradigm tag helper method
By default, the Cloudinary image tag helper method (e.g., cl_image_tag in Cherry-red on Rails) automatically generates an HTML image tag including the prototype source URL.
The post-obit shows the same transformations every bit in a higher place, merely this fourth dimension using the image tag to generate a complete HTML image tag.
Ruby (cloudinary 1.10):
Copy to clipboard
cl_image_tag( " sample.jpg " , :meridian=>100, :width=>300, :crop=> " scale " )
PHP (cloudinary_php two.x):
Copy to clipboard
(new ImageTag( ' sample.jpg ' )) ->resize(Resize::scale()->width(300) ->summit(100));
PHP (cloudinary_php ane.x (legacy)):
Copy to clipboard
cl_image_tag( " sample.jpg " , array( " peak " =>100, " width " =>300, " crop " => " scale " ))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage( " sample.jpg " ).image(peak=100, width=300, crop= " calibration " )
Node.js (cloudinary 1.x):
Re-create to clipboard
cloudinary.image( " sample.jpg " , {top: 100, width: 300, crop: " scale " })
Coffee (cloudinary 1.ten):
Re-create to clipboard
cloudinary.url().transformation(new Transformation().height(100).width(300).crop( " scale " )).imageTag( " sample.jpg " );
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage( " sample.jpg " ).resize(calibration().width(300).height(100));
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag( ' sample.jpg ' , {height: 100, width: 300, crop: " scale " }).toHtml();
jQuery (cloudinary-jquery 2.x):
Re-create to clipboard
$.cloudinary.image( " sample.jpg " , {height: 100, width: 300, ingather: " scale " })
React (@cloudinary/react ane.10):
Copy to clipboard
new CloudinaryImage( " sample.jpg " ).resize(scale().width(300).height(100));
React (cloudinary-react 1.x):
Copy to clipboard
<Epitome publicId= " sample.jpg " > <Transformation height= " 100 " width= " 300 " crop= " calibration " /> </Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id= " sample.jpg " > <cld-transformation height= " 100 " width= " 300 " crop= " scale " /> < / cld-image>
Athwart (@cloudinary/ng 1.10):
Copy to clipboard
new CloudinaryImage( " sample.jpg " ).resize(scale().width(300).top(100));
Angular (@cloudinary/angular-5.ten i.x (legacy)):
Re-create to clipboard
<cl-paradigm public-id= " sample.jpg " > <cl-transformation summit= " 100 " width= " 300 " crop= " scale " > < / cl-transformation> < / cl-image>
.Net (CloudinaryDotNet 1.ten):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(100).Width(300).Ingather( " calibration " )).BuildImageTag( " sample.jpg " )
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(100).setWidth(300).setCrop( " scale " )).generate( " sample.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Re-create to clipboard
MediaManager.go().url().transformation(new Transformation().superlative(100).width(300).crop( " calibration " )).generate( " sample.jpg " );
Kotlin (kotlin-url-gen ane.10):
Copy to clipboard
cloudinary.epitome { publicId( " sample.jpg " ) resize(Resize.calibration() { width(300) summit(100) }) }.generate() This SDK code will output the following HTML lawmaking:
Copy to clipboard
<img src="https://res.cloudinary.com/demo/paradigm/upload/c_scale,h_100,w_300/sample.jpg" >
The Cloudinary Image Tag helper method allows you to not only specify any Cloudinary transformations parameters, simply also to specify regular HTML image tag attributes (due east.chiliad., alt, title, width, height). For example, using the Image Tag helper method to create an HTML epitome tag for the sample image, with the 'alt' attribute prepare to "A sample photo" and the 'className' attribute set to "Samples":
Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag( " sample.jpg " , :alt=> " A sample photograph " , :className=> " Samples " )
PHP (cloudinary_php 2.x):
Re-create to clipboard
ImageTag::fromParams( " sample.jpg " , [ " alt " => " A sample photo " , " className " => " Samples " ])
PHP (cloudinary_php i.x (legacy)):
Copy to clipboard
cl_image_tag( " sample.jpg " , [ " alt " => " A sample photo " , " className " => " Samples " ])
Python (cloudinary 1.x):
Re-create to clipboard
CloudinaryImage( " sample.jpg " ).epitome(alt= " A sample photo " , className= " Samples " )
Node.js (cloudinary i.x):
Copy to clipboard
cloudinary.paradigm( " sample.jpg " , {alt: " A sample photo " , className: " Samples " })
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().imageTag( " sample.jpg " , ObjectUtils.asMap( " alt " , " A sample photograph " , " className " , " Samples " ));
JS (cloudinary-core ii.ten (legacy)):
Copy to clipboard
cl.imageTag( ' sample.jpg ' , {alt: " A sample photograph " , className: " Samples " }).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image( " sample.jpg " , {alt: " A sample photograph " , className: " Samples " })
React (cloudinary-react ane.x):
Copy to clipboard
<Image publicId= " sample.jpg " alt= " A sample photo " className= " Samples " > </Image>
Vue.js (cloudinary-vue 1.x):
Re-create to clipboard
<CLDImage publicId= " sample.jpg " alt= " A sample photo " className= " Samples " > </CLDImage>
Athwart (@cloudinary/athwart-5.x one.10 (legacy)):
Copy to clipboard
<cl-image public-id= " sample.jpg " alt= " A sample photo " className= " Samples " > < / cl-image>
.Cyberspace (CloudinaryDotNet 1.x):
Copy to clipboard
@Model.Cloudinary.Api.UrlImgUp.BuildImageTag( " sample.jpg " , new CloudinaryDotNet.StringDictionary( " alt=A sample photo " , " className=Samples " ));
Go (cloudinary-get one.x):
Copy to clipboard
Not supported past this SDK
For more information on these SDK helper methods, see the transformation documentation in the relevant SDK guide.
In general, when using an SDK, yous will probably take advantage of the SDK parameter names for improved readability and maintenance of your code. Withal, y'all can likewise optionally pass a raw transformation parameter, whose value is a literal URL transformation definition. Annotation that the string y'all pass as the raw transformation value will exist appended as is (with no processing or validation) to the end of whatsoever other transformation parameters passed in the aforementioned component of the transformation concatenation.
For example:
Scarlet (cloudinary ane.x):
Copy to clipboard
cl_image_tag( " blossom.jpg " , :transformation=>[{:raw_transformation=> " o_90,w_1000,c_fill,g_south_east/l_my_image,fl_relative,w_1.0 " }])
PHP (cloudinary_php 1.10 (legacy)):
Copy to clipboard
cl_image_tag( " sample.jpg " , [ " raw_transformation " => " w_400,c_pad " ]);
Python (cloudinary i.x):
Copy to clipboard
CloudinaryImage( " sample.jpg " ).image( transformation=[{ " raw_transformation " : " w_400,c_pad " }])
Node.js (cloudinary 1.ten):
Copy to clipboard
cloudinary.image( " sample.jpg " , { transformation: { raw_transformation: " w_400,c_pad " }})
Java (cloudinary ane.10):
Copy to clipboard
<cl:image src= " sample.jpg " raw_transformation= " w_100,h_150,c_fill " /> cloudinary.url() .transformation(new Transformation().rawTransformation( " w_100,h_150,c_fill " )) .imageTag( " sample.jpg " );
JS (cloudinary-cadre 2.x (legacy)):
Copy to clipboard
cl.imageTag( " sample.jpg " , { raw_transformation: " w_400,c_pad " }}).toHtml();
jQuery (cloudinary-jquery 2.ten):
Copy to clipboard
$.cloudinary.imageTag( " sample.jpg " , { raw_transformation: " w_400,c_pad " }}).toHtml();
React (cloudinary-react 1.x):
Re-create to clipboard
<Epitome publicId= " mypic " > <Transformation rawTransformation= " h_150,w_150,c_fill,e_sepia,r_20 " /> </Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<CLDImage publicId= " sample.jpg " rawTransformation= " w_150,h_150,c_fill " > </CLDImage>
Athwart (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-epitome public-id= " mypic " class= " thumbnail inline " format= " jpg " raw-transformation= " w_150,h_150,c_fill " > < / cl-prototype>
.Internet (CloudinaryDotNet one.x):
Re-create to clipboard
@Model.Cloudinary.Api.UrlImgUp.Transform( new Transformation().RawTransformation( " w_100,h_150,c_fill " )).BuildImageTag( " sample.jpg " );
Go (cloudinary-go one.10):
Copy to clipboard
img, err := cld.Prototype( " sample.jpg " ) img.Transformation = " w_400,c_pad " url, err := img.String()
Epitome format support
Images can be uploaded to Cloudinary in various formats (input formats), and you lot can easily convert these images to other formats for displaying in your web site or application (output formats). Examples of situations where you might want to change the delivered image format:
- Delivering JPEGs for photos that you want to load speedily (or AVIF or WebP if your users are on a browser that supports these or on a mobile app you control).
- Delivering a PNG (24 flake) for high quality illustrations with a transparent background.
- Delivering an image where the original format is non supported for delivery past the browser. For example, you could deliver a Photoshop (.psd) image as a JPG.
Delivering in a different format
Y'all can catechumen and deliver images in a different format past specifying the required format as the file extension of the commitment URL. When using an SDK to build the URL, y'all can either suspend the extension of the new format to the asset's public ID or apply the format parameter.
For example, to display a GIF version of the uploaded sample JPEG file:
Blood-red (cloudinary 1.x):
Re-create to clipboard
cl_image_tag( " sample.gif " ) PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag( ' sample.gif ' ));
PHP (cloudinary_php 1.ten (legacy)):
Copy to clipboard
cl_image_tag( " sample.gif " ) Python (cloudinary 1.10):
Copy to clipboard
CloudinaryImage( " sample.gif " ).epitome() Node.js (cloudinary i.x):
Re-create to clipboard
cloudinary.image( " sample.gif " ) Java (cloudinary 1.x):
Re-create to clipboard
cloudinary.url().transformation(new Transformation().imageTag( " sample.gif " );
JS (@cloudinary/url-gen one.x):
Copy to clipboard
new CloudinaryImage( " sample.gif " );
JS (cloudinary-core two.x (legacy)):
Copy to clipboard
cloudinary.imageTag( ' sample.gif ' ).toHtml(); jQuery (cloudinary-jquery 2.x):
Re-create to clipboard
$.cloudinary.image( " sample.gif " )
React (@cloudinary/react 1.x):
Copy to clipboard
new CloudinaryImage( " sample.gif " );
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId= " sample.gif " > </Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id= " sample.gif " > < / cld-image>
Angular (@cloudinary/ng one.x):
Copy to clipboard
new CloudinaryImage( " sample.gif " );
Angular (@cloudinary/athwart-5.x 1.ten (legacy)):
Re-create to clipboard
<cl-prototype public-id= " sample.gif " > < / cl-paradigm>
.NET (CloudinaryDotNet i.ten):
Re-create to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag( " sample.gif " ) iOS (cloudinary 3.10):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate( " sample.gif " )!, cloudinary: cloudinary) Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().generate( " sample.gif " );
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.prototype { publicId( " sample.gif " ) }.generate() 
You lot tin combine other image transformations with format conversion. Just make certain the format you apply is supported for transformations, equally per the Supported image formats table. For case, to evangelize a scaled down 150x100 GIF version of the sample image:
Red (cloudinary 1.x):
Copy to clipboard
cl_image_tag( " sample.gif " , :pinnacle=>100, :width=>150, :crop=> " scale " )
PHP (cloudinary_php ii.x):
Re-create to clipboard
(new ImageTag( ' sample.gif ' )) ->resize(Resize::scale()->width(150) ->tiptop(100));
PHP (cloudinary_php one.ten (legacy)):
Copy to clipboard
cl_image_tag( " sample.gif " , array( " height " =>100, " width " =>150, " crop " => " calibration " ))
Python (cloudinary 1.10):
Copy to clipboard
CloudinaryImage( " sample.gif " ).image(height=100, width=150, ingather= " calibration " )
Node.js (cloudinary 1.x):
Re-create to clipboard
cloudinary.image( " sample.gif " , {height: 100, width: 150, crop: " scale " })
Java (cloudinary one.10):
Copy to clipboard
cloudinary.url().transformation(new Transformation().meridian(100).width(150).crop( " scale " )).imageTag( " sample.gif " );
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage( " sample.gif " ).resize(scale().width(150).height(100));
JS (cloudinary-cadre 2.x (legacy)):
Re-create to clipboard
cloudinary.imageTag( ' sample.gif ' , {summit: 100, width: 150, crop: " scale " }).toHtml();
jQuery (cloudinary-jquery ii.x):
Copy to clipboard
$.cloudinary.image( " sample.gif " , {height: 100, width: 150, crop: " scale " })
React (@cloudinary/react ane.ten):
Copy to clipboard
new CloudinaryImage( " sample.gif " ).resize(calibration().width(150).superlative(100));
React (cloudinary-react 1.x):
Copy to clipboard
<Prototype publicId= " sample.gif " > <Transformation height= " 100 " width= " 150 " ingather= " scale " /> </Image>
Vue.js (cloudinary-vue 1.ten):
Copy to clipboard
<cld-image public-id= " sample.gif " > <cld-transformation height= " 100 " width= " 150 " crop= " scale " /> < / cld-image>
Athwart (@cloudinary/ng one.x):
Copy to clipboard
new CloudinaryImage( " sample.gif " ).resize(scale().width(150).height(100));
Athwart (@cloudinary/angular-five.ten 1.x (legacy)):
Copy to clipboard
<cl-epitome public-id= " sample.gif " > <cl-transformation height= " 100 " width= " 150 " crop= " scale " > < / cl-transformation> < / cl-prototype>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Top(100).Width(150).Crop( " calibration " )).BuildImageTag( " sample.gif " )
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(100).setWidth(150).setCrop( " scale " )).generate( " sample.gif " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.become().url().transformation(new Transformation().pinnacle(100).width(150).crop( " scale " )).generate( " sample.gif " );
Kotlin (kotlin-url-gen i.10):
Copy to clipboard
cloudinary.image { publicId( " sample.gif " ) resize(Resize.scale() { width(150) peak(100) }) }.generate() 
Another option for irresolute the format is to explicitly call the fetch_format transformation parameter (f in URLs). This tin be useful in situations where you cannot change the file extension, for example, when fetching remote images that already accept a different file extension (format) as part of their URLs.
For case, to fetch a remote image from Wikimedia in PNG format, and deliver the image in JPG format (also scaled downwardly to a width of 400 pixels):
Red (cloudinary 1.x):
Copy to clipboard
cl_image_tag( " https://upload.wikimedia.org/wikipedia/eatables/i/xiii/Benedict_Cumberbatch_2011.png " , :type=> " fetch " , :transformation=>[ {:height=>400, :crop=> " scale " }, {:fetch_format=> " jpg " } ])
PHP (cloudinary_php 2.10):
Copy to clipboard
(new ImageTag( ' https://upload.wikimedia.org/wikipedia/commons/ane/thirteen/Benedict_Cumberbatch_2011.png ' )) ->resize(Resize::scale()->height(400)) ->delivery(Delivery::format( Format::jpg())) ->deliveryType( " fetch " );
PHP (cloudinary_php 1.10 (legacy)):
Copy to clipboard
cl_image_tag( " https://upload.wikimedia.org/wikipedia/eatables/ane/13/Benedict_Cumberbatch_2011.png " , array( " type " => " fetch " , " transformation " =>array( assortment( " height " =>400, " crop " => " scale " ), array( " fetch_format " => " jpg " ) )))
Python (cloudinary i.x):
Copy to clipboard
CloudinaryImage( " https://upload.wikimedia.org/wikipedia/eatables/ane/thirteen/Benedict_Cumberbatch_2011.png " ).image(type= " fetch " , transformation=[ { ' height ' : 400, ' crop ' : " scale " }, { ' fetch_format ' : " jpg " } ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.prototype( " https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png " , {type: " fetch " , transformation: [ {acme: 400, ingather: " scale " }, {fetch_format: " jpg " } ]})
Java (cloudinary 1.ten):
Copy to clipboard
cloudinary.url().transformation(new Transformation() .pinnacle(400).crop( " scale " ).chain() .fetchFormat( " jpg " )).type( " fetch " ).imageTag( " https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png " );
JS (@cloudinary/url-gen ane.x):
Copy to clipboard
new CloudinaryImage( " https://upload.wikimedia.org/wikipedia/eatables/1/13/Benedict_Cumberbatch_2011.png " ) .resize(calibration().tiptop(400)) .delivery(format(jpg())) .setDeliveryType( " fetch " );
JS (cloudinary-core 2.ten (legacy)):
Copy to clipboard
cloudinary.imageTag( ' https://upload.wikimedia.org/wikipedia/commons/i/13/Benedict_Cumberbatch_2011.png ' , {blazon: " fetch " , transformation: [ {summit: 400, crop: " scale " }, {fetchFormat: " jpg " } ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Re-create to clipboard
$.cloudinary.prototype( " https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png " , {blazon: " fetch " , transformation: [ {height: 400, ingather: " calibration " }, {fetch_format: " jpg " } ]})
React (@cloudinary/react 1.x):
Copy to clipboard
new CloudinaryImage( " https://upload.wikimedia.org/wikipedia/commons/one/13/Benedict_Cumberbatch_2011.png " ) .resize(calibration().height(400)) .delivery(format(jpg())) .setDeliveryType( " fetch " );
React (cloudinary-react one.ten):
Copy to clipboard
<Image publicId= " https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png " type= " fetch " > <Transformation peak= " 400 " crop= " scale " /> <Transformation fetchFormat= " jpg " /> </Image>
Vue.js (cloudinary-vue 1.10):
Copy to clipboard
<cld-prototype public-id= " https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png " blazon= " fetch " > <cld-transformation height= " 400 " crop= " calibration " /> <cld-transformation fetch-format= " jpg " /> < / cld-image>
Athwart (@cloudinary/ng ane.x):
Copy to clipboard
new CloudinaryImage( " https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png " ) .resize(scale().height(400)) .delivery(format(jpg())) .setDeliveryType( " fetch " );
Angular (@cloudinary/angular-5.ten 1.x (legacy)):
Re-create to clipboard
<cl-paradigm public-id= " https://upload.wikimedia.org/wikipedia/commons/one/13/Benedict_Cumberbatch_2011.png " blazon= " fetch " > <cl-transformation height= " 400 " crop= " scale " > < / cl-transformation> <cl-transformation fetch-format="jpg"> < / cl-transformation> < / cl-image>
.Net (CloudinaryDotNet ane.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Height(400).Crop( " calibration " ).Chain() .FetchFormat( " jpg " )).Action( " fetch " ).BuildImageTag( " https://upload.wikimedia.org/wikipedia/eatables/1/13/Benedict_Cumberbatch_2011.png " )
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( " fetch " ).setTransformation(CLDTransformation() .setHeight(400).setCrop( " scale " ).chain() .setFetchFormat( " jpg " )).generate( " https://upload.wikimedia.org/wikipedia/commons/one/13/Benedict_Cumberbatch_2011.png " )!, cloudinary: cloudinary)
Android (cloudinary-android ane.x):
Re-create to clipboard
MediaManager.get().url().transformation(new Transformation() .height(400).crop( " scale " ).chain() .fetchFormat( " jpg " )).type( " fetch " ).generate( " https://upload.wikimedia.org/wikipedia/commons/one/13/Benedict_Cumberbatch_2011.png " );
Kotlin (kotlin-url-gen i.x):
Re-create to clipboard
cloudinary.image { publicId( " https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png " ) resize(Resize.scale() { pinnacle(400) }) delivery(Delivery.format( Format.jpg())) deliveryType( " fetch " ) }.generate() 
- If the file extension is omitted in a commitment URL, the file is delivered in the originally uploaded format unless a specific format (or the car format is requested using the
fetch_format(f_) transformation parameter). - When converting from one multi-folio or multi-layer image format (PDF, GIF, WebP, TIFF, PSD) to some other, merely the start 100 pages are included in the new file.
- SDK major versions with initial release later than January 2020 have a
formattransformation parameter, instead of thefetch_formatparameter. Run into f (format) in the transformation reference.
f_auto
You tin take advantage of Cloudinary's automatic format selection (f_auto) transformation to automatically evangelize images in the almost optimized format that'due south supported past the requesting browser.
For instance, if you evangelize a JPG image with f_auto, Cloudinary might generate and deliver the epitome equally a WebP, AVIF or JPEG-2000 file, depending on the requesting browser and your business relationship settings. The f_auto algorithm volition similarly deliver the best format when the original nugget is a PNG (with or without transparency), an animated GIF, etc.
For details, see Automatic format selection (f_auto) and Tips and considerations for using f_auto.
Supported epitome formats
The tabular array beneath summarizes the supported image formats.
| Format | Extensions | Supported for Upload i | Supported for Transformations 2 |
|---|---|---|---|
| AI (Adobe Illustrator) | .ai | Yes | Yes |
| animated GIF | .gif | Yes | Yes |
| animated PNG | .png | Yes | Yep |
| animated WebP | .webp | Yes | Yes |
| AVIF | .avif | Yes | Yes 9 |
| BMP | .bmp | Yes | Yes |
| DjVu | .djvu | Yes | No |
| EPS (Encapsulated PostScript) | .ps, .ept, .eps, .eps3 | Yep | Yes |
| FBX (Filmbox) | .fbx 10 | Yes | Yes 6 |
| FLIF (Free Lossless Image Format) | .flif | Yeah | Yes |
| GIF | .gif | Yes | Yes |
| GLB (Binary glTF) | .glb | Yep | Yep |
| glTF (GL Transmission Format) | .gltf | Yep | Yes 6 |
| HEIF | .heif, .heic | Yes | Yes |
| ICO | .ico | Yeah | Yes |
| InDesign | .indd | Yes | Yep 3 |
| JPEG | .jpg, .jpe, .jpeg | Yes | Yes |
| JPEG 2000 | .jp2 4 | Yes | Yeah |
| JPEG XR (JPEG eXtended Range) | .wdp, .jxr, .hdp | Yes | Yes |
| OBJ | .obj 10 | Yeah | Aye 6 |
| Yeah | Yes | ||
| PLY | .ply | Yes | Aye |
| PNG | .png | Yes | Yes |
| PSD (PhotoShop Document) | .psd | Yes | Yes 5 |
| Raw image files | .arw, .cr2 | Yes | No |
| SVG | .svg | Yes | Yes |
| TARGA (Truevision TGA) | .tga | Yes | Yeah |
| TIFF | .tif, .tiff | Aye | Yeah |
| USDZ | .usdz | Yes vii | No eight |
| WebP | .webp | Yep | Yes |
- If a format is supported only for upload, and then the delivery URL enables a user to download the original file in its original format, but you cannot utilise transformation parameters.
- If a format is supported for transformations, only the browser doesn't support displaying that format, you can either provide the transformation URL with the original format to enable users to download the file, or you can provide the URL with a dissimilar commitment format specified. In that case, Cloudinary applies the transformation to the original format and and then converts the paradigm to the requested format for delivery. For case, you could provide a transformation URL for a PhotoShop (.psd) image stored in your account and specify
jpgas the commitment format to display the resulting transformation in the browser. - You can transform an InDesign file if you deliver it as an image format, such as
jpgorpng, but you cannot deliver aninddfile with transformations. - Past default, when you request a
jp2prototype with a quality value less than 90, chroma sub-sampling (420) is automatically practical using Kakadu. Yous can also explicitly asking chroma sub-sampling as part of yourqualityparameter. For example:q_90>:420. - All layers are flattened into a unmarried image if no
pageparameter is specified. - The 3D format types are uploaded as a zip file. Some transformations, such equally converting to a video or image, are supported on the bundle every bit a whole. No transformations are currently supported on its contained assets. For further information run into Transformations on 3D models.
- USDZ files tin but be uploaded as raw files.
- Transformations cannot be applied to USDZ files, merely you can evangelize any uploaded 3D model equally a USDZ file.
- Images converted to AVIF from other formats utilise additional quota. Images exceeding nine megapixels cannot exist encoded to AVIF - ensure you calibration them downwardly get-go. If enabled, AVIF may be delivered when automated format pick (
f_auto) is used. - Y'all cannot convert a 3D model of a different format to FBX or OBJ.
Image transformation types
This page walked you through the basics of how image transformations work. The rest of the pages in this guide provide details, utilise cases and examples of the many different types of transformations you tin apply to the images y'all evangelize:
| Transformation type | Description |
|---|---|
| Resizing and cropping | Resize (crop and/or calibration) images server-side before delivering them. |
| Placing layers on images | Place image, text, or other layers on (or under) existing assets to generate new and customized creations on the wing. |
| Effects and enhancements | Employ a huge variety of furnishings, filters, and other artistic enhancements to any image. |
| Face-detection based transformations | Transform an image based on detected faces. |
| Animated paradigm transformations | Create animated images from multiple images in your account, convert them to video, catechumen between animated formats, and apply animation-specific transformations. |
| 3D models | Learn how to perform transformations on 3D models. |
| Conditional transformations | Utilize a transformation only if a specified condition is met. |
| User-defined variables and arithmetic transformations | Use arithmetics expressions and variables to add additional sophistication and flexibility to your transformations. |
| Custom functions | Inject a remote, lamda or WebAssembly function and apply the result every bit a transformation. |
Delivering optimized and responsive media
In addition to changing the appearance of your media avails by transforming them, you can as well use Cloudinary URLs and a variety of parameters to control how they are delivered:
| Topic | Description |
|---|---|
| Optimizations | Evangelize your media assets with the smallest possible file size while maintaining visual quality, saving bandwidth and improving performance for your website. This includes automatic quality and format option optimizations (q_auto and f_auto). |
| Responsive images | Evangelize your images to perfectly fit whatsoever device, window size, orientation, or resolution at whatsoever pixel density (DPR). Upload a unmarried loftier resolution prototype and let Cloudinary automatically transform it. |
| Deliver remote media files and Social media profile pictures | Grab media assets from anywhere on the web or pull social media profile pictures from a diverseness of popular social media networks, including support for on-the-fly transformation and optimized delivery via a CDN. |
| Paged and layered media | Deliver content from assets with multiple pages or layers such equally PDFs or Photoshop files, including options for delivering or transforming simply selected pages or layers. |
| Access control | Command who can access your media, both the originals and transformed assets, including enabling strict transformations, using signed delivery URLs, uploading images as private or authenticated, and using access_control or access_mode to control who tin access an asset without adjusting the URL. |
| Sprite generation | Automatically generate and deliver sprite images with their corresponding CSS based on all images with a specified tag. |
| Avant-garde URL delivery options | Have reward of avant-garde options that make your URLs more than SEO-friendly, evangelize assets using private CDNs or multi-CDN solutions, utilise custom domain names (CNames) for your URLs, define custom favicons, work with asset versions, and more. |
✔️ Feedback sent!
✖️
Mistake
Unfortunately there'southward been an error sending your feedback.
Source: https://cloudinary.com/documentation/image_transformations
0 Response to "Image Cropping to a Specific Ratio and Uploading to Php"
Post a Comment