Meta tags:
description=Resize, crop and transform images, convert formats, apply image effects, add overlays, CDN delivery with JavaScript and Angular.;

Headings (most frequently used words):

image, and, transformations, example, angular, apply, to, with, syntax, images, of, set, cloudinary, overview, deliver, sample, app, plugins, the, url, lazy, loading, responsive, accessibility, specifying, your, transformation, placeholder, documentation, index, get, started, install, agent, skills, transform, common, alternative, ways, passing, attributes, through, advanced, component, actions, actiongroups, qualifiers, qualifiervalues, tree, shaking, shortcuts, aliases, direct, building, resizing, cropping, converting, another, format, applying, effects, filters, adding, text, overlays, optimizations, plugin, order, placeholders, error, object, version, delivery, type, transforming, chaining, root, margin, threshold, step, size, specify, widths, use, server, side, rendering, an, combine,

Text of the page (most frequently used words):
image (318), and (304), the (277), video (266), #transformations (183), sdk (149), upload (141), images (119), cloudinary (94), api (94), for (92), you (76), reference (76), with (74), transformation (70), react (68), assets (56), angular (55), your (54), introduction (51), javascript (49), media (47), can (46), sample (45), player (45), node (44), next (43), add (40), start (40), asset (40), overview (39), vue (39), url (38), example (37), quick (36), management (36), delivery (34), optimization (33), use (32), this (32), php (32), advanced (31), effects (30), python (29), optimize (28), product (28), using (27), are (27), apis (26), flutter (26), configure (26), syntax (25), that (25), deliver (25), text (25), widget (25), app (24), 2026 (23), crop (23), videos (23), more (22), accessibility (22), format (22), projects (22), color (21), content (21), resize (21), 2023 (21), troubleshooting (21), sdks (20), see (20), get (20), user (20), tutorials (20), account (20), step (19), auto (19), detection (19), tips (19), cropping (19), 2024 (19), started (18), placeholder (18), from (18), actions (18), dart (18), analysis (18), android (17), ios (17), streaming (17), google (17), code (16), component (16), builder (16), native (16), gallery (16), layer (16), all (15), quality (15), background (15), svelte (15), net (15), ruby (15), rails (15), java (15), audio (15), project (15), roles (15), library (14), how (14), effect (14), may (14), automatic (14), legacy (14), moderation (14), tagging (14), programmatic (14), ons (13), lazy (13), loading (13), apply (13), modes (13), set (13), action (13), first (13), gravity (13), options (13), guide (13), 2025 (13), custom (13), social (13), page (12), types (12), feature (12), when (12), version (12), responsive (12), size (12), visual (12), permissions (12), live (12), amazon (12), rekognition (12), specifying (11), gen (11), transform (11), migration (11), jquery (11), analyze (11), cli (11), remove (11), manage (11), search (11), onboarding (11), try (10), target (10), type (10), following (10), based (10), package (10), create (10), special (10), skills (10), beta (10), delete (10), signatures (10), conditional (10), apps (9), plugins (9), also (9), specify (9), features (9), side (9), load (9), any (9), import (9), method (9), qualifiers (9), agent (9), october (9), release (9), notes (9), laravel (9), uploads (9), metadata (9), guides (9), additional (8), details (8), available (8), not (8), ways (8), overlays (8), settings (8), public (8), resizing (8), object (8), find (8), generation (8), update (8), postman (8), collections (8), references (8), imagga (8), animated (8), layers (8), named (8), files (8), hints (8), resources (8), faq (7), products (7), there (7), interactive (7), plugin (7), default (7), only (7), automatically (7), attributes (7), best (7), file (7), face (7), gif (7), extension (7), fill (7), list (7), basics (7), crops (7), urls (7), tree (7), shaking (7), methods (7), tag (7), july (7), august (7), astro (7), kotlin (7), canvas (7), admin (7), removal (7), workflows (7), presets (7), training (6), support (6), demos (6), error (6), what (6), make (6), download (6), without (6), then (6), note (6), parameters (6), each (6), filters (6), enhancements (6), generate (6), usage (6), used (6), html (6), scale (6), transforming (6), other (6), frontend (6), mobile (6), integration (6), provisioning (6), creation (6), editor (6), transcription (6), aware (6), customize (6), practices (6), console (6), uploading (6), pdf (6), dev (6), agents (6), documentation (5), pricing (5), cloud (5), want (5), while (5), full (5), particular (5), together (5), applied (5), accessible (5), around (5), control (5), yet (5), need (5), components (5), instead (5), resulting (5), fetch (5), transformed (5), through (5), overlay (5), variety (5), artistic (5), shape (5), backgrounds (5), formats (5), environment (5), original (5), defined (5), above (5), before (5), 2022 (5), january (5), february (5), april (5), studio (5), config (5), profiles (5), enhancement (5), extraction (5), duplicate (5), controls (5), profile (5), data (5), moderate (5), client (5), analytics (5), adaptive (5), bitrate (5), tools (5), credentials (5), policy (4), developers (4), retail (4), commerce (4), check (4), different (4), solid (4), downloaded (4), adjust (4), has (4), users (4), enable (4), adds (4), one (4), server (4), pixels (4), new (4), browser (4), viewport (4), visible (4), time (4), review (4), optimizations (4), photo (4), cropped (4), added (4), corners (4), setup (4), cloudinaryimage (4), uploaded (4), converting (4), here (4), previous (4), define (4), qualifiervalues (4), specific (4), dynamic (4), run (4), install (4), mcp (4), servers (4), june (4), september (4), november (4), starter (4), kit (4), access (4), why (4), disabled (4), sign (4), policies (4), assign (4), folder (4), pdfs (4), authentication (4), failed (4), unsigned (4), changelog (4), errors (4), recipes (4), variables (4), arithmetic (4), condition (4), conditions (4), reshaping (4), underlays (4), watermarking (4), fonts (4), placement (4), placing (4), trimming (4), flags (4), rollout (4), padding (4), restore (4), replace (4), generative (4), zoompan (4), cards (4), drop (4), nuxt (4), pages (4), blog (3), events (3), about (3), getting (3), resource (3), our (3), non (3), dam (3), rate (3), feedback (3), email (3), out (3), github (3), repo (3), location (3), low (3), large (3), placeholders (3), colorblind (3), tinting (3), dimensions (3), site (3), widths (3), requested (3), they (3), width (3), height (3), allows (3), core (3), provides (3), optimal (3), experience (3), qualifier (3), required (3), below (3), these (3), further (3), include (3), rotation (3), adding (3), rounding (3), distortion (3), shadows (3), returned (3), myimage (3), requests (3), convert (3), another (3), keep (3), faces (3), supported (3), examples (3), which (3), build (3), building (3), aliases (3), than (3), shortcuts (3), outline (3), functions (3), actiongroups (3), coding (3), did (3), learn (3), them (3), via (3), cdn (3), releases (3), latest (3), drupal (3), netlify (3), gatsby (3), nuxtjs (3), community (3), developed (3), libraries (3), backend (3), claimable (3), webpurify (3), viesus (3), url2png (3), website (3), screenshots (3), pixelz (3), ocr (3), microsoft (3), azure (3), indexer (3), perception (3), point (3), malware (3), translation (3), vision (3), aspose (3), document (3), conversion (3), celebrity (3), facial (3), clarity (3), adaptability (3), buy (3), marketplace (3), picture (3), generated (3), differentiators (3), counted (3), billing (3), plans (3), webhook (3), notifications (3), eager (3), incoming (3), crud (3), post (3), processing (3), customizing (3), menu (3), glossary (3), enterprise (3), service (3), café (3), sessions (3), español (3), youtube (3), tutorial (3), congrats (3), ready (3), faster (3), register (3), developer (3), kickstart (3), starts (3), power (3), checks (3), privacy (2), contact (2), customers (2), been (2), request (2), name (2), was (2), rating (2), love (2), tell (2), enjoy (2), learning (2), fork (2), yourself (2), single (2), combine (2), case (2), scrolls (2), blurred (2), predominant (2), pixelate (2), blur (2), jumping (2), elements (2), dynamically (2), loads (2), quickly (2), lightweight (2), same (2), intended (2), downloading (2), final (2), useful (2), mode (2), brightmode (2), darkmode (2), monochrome (2), dark (2), makes (2), provide (2), element (2), rendering (2), either (2), shows (2), resized (2), small (2), times (2), root (2), top (2), 10px (2), into (2), screen (2), actually (2), order (2), but (2), jump (2), standalone (2), module (2), cloudinarymodule (2), improve (2), web (2), display (2), render (2), way (2), many (2), minimize (2), level (2), change (2), application (2), look (2), intuitive (2), tip (2), couple (2), font (2), additionally (2), rounded (2), main (2), such (2), applies (2), select (2), selection (2), applying (2), f_auto (2), instantiating (2), jpg (2), most (2), optimized (2), desired (2), uses (2), aspect (2), their (2), implement (2), section (2), common (2), xxx (2), result (2), discover (2), alternative (2), https (2), com (2), c_scale (2), w_400 (2), instructions (2), now (2), tourl (2), easy (2), say (2), simplify (2), some (2), values (2), discoverable (2), require (2), complete (2), tolerance (2), expose (2), parameter (2), pass (2), importing (2), prefer (2), transformationstringfromobject (2), addtransformation (2), familiar (2), attribute (2), installs (2), 150 (2), assistant (2), copy (2), prompt (2), dec (2), feb (2), apr (2), december (2), cloudinary_url_gen (2), active (2), storage (2), attachinary (2), carrierwave (2), mixing (2), contrast (2), temporary (2), ugc (2), multi (2), channel (2), bot (2), traffic (2), successfully (2), rotate (2), keys (2), spike (2), migrate (2), optimizer (2), downgrade (2), plan (2), recover (2), credit (2), card (2), payments (2), existing (2), cancel (2), system (2), migrating (2), saml (2), sso (2), high (2), adult (2), nsfw (2), permitted (2), naming (2), conventions (2), avoiding (2), already (2), fetched (2), underscores (2), ids (2), names (2), does (2), store (2), cookies (2), modify (2), changed (2), issues (2), invalidate (2), cached (2), backups (2), provenance (2), authenticity (2), response (2), notification (2), inspector (2), semantic (2), rules (2), structured (2), contextual (2), tags (2), expressions (2), cacheable (2), relate (2), rename (2), filemaker (2), cloud_name (2), truncated (2), unsupported (2), always (2), square (2), rejected (2), script (2), codec (2), duration (2), missing (2), play (2), simulated (2), poster (2), frame (2), logo (2), watermark (2), white (2), looping (2), previews (2), posters (2), rotating (2), playback (2), transition (2), concatenation (2), concatenating (2), transcoding (2), shoppable (2), ads (2), monetization (2), hls (2), mpeg (2), dash (2), playlists (2), recommendations (2), customization (2), embed (2), installation (2), blurry (2), force (2), sharing (2), links (2), facebook (2), detect (2), corrupted (2), lqip (2), long (2), byte (2), ttfb (2), webpagetest (2), org (2), delivered (2), gzip (2), compression (2), title (2), archives (2), photoshop (2), pictures (2), remote (2), frameworks (2), offset (2), position (2), over (2), instagram (2), story (2), percentage (2), horizontal (2), line (2), person (2), body (2), models (2), refiners (2), focus (2), areas (2), recolor (2), cutouts (2), displacement (2), distorting (2), vertical (2), collage (2), layouts (2), upscaling (2), downscaling (2), splice (2), trim (2), complex (2), watermarks (2), enhance (2), abr (2), diagnosing (2), codes (2), solidjs (2), widgets (2), scripting (2), django (2), captioning (2), fallbacks (2), sanity (2), signature (2), interaction (2), webhooks (2), hono (2), remix (2), sveltekit (2), drag (2), multiple (2), captions (2), programmatically (2), edits (2), key (2), secret (2), free (2), powered (2), brand (2), capabilities (2), tech (2), stack (2), platforms (2), integrations (2), easyflows (2), powerflows (2), mediaflows (2), index (2), theme (2), docs (2), 783, rights, reserved, dmca, notice, terms, education, sales, technical, trust, newsroom, careers, partners, company, profits, travel, hospitality, entertainment, solutions, programmable, again, unfortunately, sending, assistance, open, committed, protecting, information, security, send, back, should, improved, good, were, looking, thanks, submitting, got, hear, liked, even, better, helpful, doc, sent, combined, followed, waiting, vectorized, vectorize, pixelated, four, blank, locations, offer, will, occupy, still, once, completed, replaced, especially, help, blind, differentiate, between, colors, similar, bright, reduces, where, styling, container, must, 800, 1000, 1400, 200, behavior, configured, saving, bytes, reducing, avoid, sure, bounding, box, margins, right, 20px, bottom, left, 30px, margin, threshold, lazyload, triggered, starting, come, tells, wait, until, potentially, save, bandwidth, viewed, decrease, needed, recommend, achieve, results, omitting, don, sections, explain, detail, straight, playing, both, great, techniques, helping, turn, metrics, related, vitals, disabilities, delay, depth, meeting, two, reduction, 784, performs, certain, number, among, others, although, glance, complicated, take, quite, mug, adjusted, saturation, vignette, word, pink, fancy, rotated, fit, design, balloon, graphic, coordinates, cartoonify, scales, down, 300, balance, blurring, pixelating, sharpening, improvement, changing, outlines, considerations, delivering, let, chrome, depending, webp, avif, setting, alias, instruct, explicitly, essentially, three, determine, area, preserved, during, completely, fills, 250x250, retaining, ratio, ensure, retained, centered, comprehensive, explanations, wide, mind, introduce, commonly, various, templates, simple, throughout, its, own, showing, imports, generates, chained, 150x150, rounds, sepia, center, rotates, entire, degrees, delivers, png, chaining, performing, remember, res, demo, bike, serialized, 400, setdeliverytype, 1610625835, explained, versions, setversion, myurl, calling, return, cld, configuring, instance, direct, including, shorten, shortened, nested, rather, string, shown, similarly, equivalent, reason, qualification, bundle, output, actiongroup, separated, slashes, would, primitive, numbers, strings, predefined, imported, usually, accept, qualifiervalue, call, behaviors, lightblue, objects, created, factory, replacecolor, receive, defines, called, represent, directive, being, general, form, discovering, within, development, ensures, supports, designed, logical, alt, img, passing, likely, heavier, separately, concise, individual, usual, just, however, won, benefit, ide, completion, could, follows, src, because, extra, functionality, dependency, handles, part, pixel, thumbnail, focusing, front_face, cldimg, haven, installed, might, simplifies, includes, directives, embedding, responsively, after, have, performed, routed, fast, end, last, updated, aug, view, give, class, context, working, paste, sets, configures, validates, markdown, llm, exploring, llms, txt, device, light, ask, toggle, navigation, important, plus, current,

Text of the page (random words):
transformations with angular syntax overview deliver and transform images sample app angular image transformations apply common image transformations plugins image transformations with angular to transform an image asset use the cloudinary url gen package to create the transformation then pass the transformed image object to the cldimg attribute in your advanced image component to render the image on your site for example note if you re not using standalone components then you ll need to import the cloudinarymodule in app module ts instead in the above example the front_face image is cropped to a 150 x 150 pixel thumbnail with rounded corners focusing on the face resulting in this url the cloudinary url gen package installs an additional transformation builder sdk library as a dependency which handles the transformation generation part of the url you can use the transformation builder reference to find all available transformations syntax and examples the advanced image component is used instead of an image tag because it can provide extra functionality such as lazy loading and responsive images learn more about angular plugins if you did want to use an image tag you could build the url using the tourl method and set the src attribute as follows app component ts app component html alternative ways to apply transformations there are a couple of other ways to apply transformations to your images that you may prefer to use for example if a new transformation is not yet supported by the sdk or if you re more familiar with other sdks note however that you won t benefit from your ide s code completion feature for building the transformations in these ways see also shortcuts and aliases for other ways to simplify the syntax url syntax you can add any transformation in url syntax using the addtransformation method for example this can be used together with other actions and qualifiers in the usual way it s useful if a new transformation is added but not yet available in the sdk or if you re just more familiar with the url syntax object syntax if you prefer the more concise syntax used for transformations in the node js sdk you can use the transformationstringfromobject method to build the transformation and add it to your image using addtransformation importing only transformationstringfromobject instead of all the individual actions and qualifiers for example note the required javascript import for this syntax is likely to be heavier than importing the actions and qualifiers separately passing attributes through the advanced image component you can pass the following img tag attributes through the advanced image component width height loading alt for example syntax overview the cloudinary url gen package provides an intuitive coding experience for transforming an asset the sdk supports an action based syntax designed to make building delivery urls and transformations logical and discoverable it allows discovering the available options from within your development environment and ensures that only options that are supported can be used together the general form of the syntax is an example being actions and actiongroups assets expose methods called actiongroups myimage adjust that represent a directive to cloudinary on how to transform a specific aspect of an asset actiongroups receive an action object as a parameter that defines the specific action to apply action objects are created through factory methods adjust replacecolor some actions require a qualifier as a parameter lightblue you can find more actions in cloudinary url gen actions you can import all actions with import actions from cloudinary url gen qualifiers and qualifiervalues actions expose methods to define their behaviors tolerance we call the methods on actions qualifiers qualifiers usually accept a qualifiervalue 17 in tolerance 17 qualifiervalues can be primitive numbers strings or predefined sdk values that can be imported many qualifiervalues are functions you can find more qualifiervalues in cloudinary url gen qualifiers the output of each actiongroup is a complete transformation component separated by slashes in the url for example the syntax example above would generate the following url tree shaking the cloudinary url gen package allows you to import only what you need to minimize your bundle size see the transformation builder reference for all actions and qualifiers for example if you import effect you import all effect actions which may be more than you need the only reason you may want to do this is to make other methods discoverable without tree shaking actions require qualification for example effect outline without tree shaking you can also use in this case outline is equivalent to effect outline with tree shaking similarly for qualifier values without tree shaking with tree shaking most of the examples shown in this guide use tree shaking shortcuts and aliases to simplify some of the syntax you can use string shortcuts for nested qualifiers for example rather than you can say additionally there are aliases for delivery format and quality to shorten the syntax further for example the above can be shortened to for quality instead of you can say deliver and transform images the cloudinary url gen package makes it easy for you to create image urls including any transformation parameters direct url building you can build an image url by configuring your cloudinary instance instantiating a cloudinaryimage object for the image you want to deliver using cld image calling the tourl method of the cloudinaryimage object to return the delivery url the resulting url myurl is specifying a version of your image to deliver you can specify a particular version of your image to deliver by using the setversion method the version is added to the delivery url as explained in asset versions for example to specify version 1610625835 of the sample image from the example above the resulting url is now specifying the delivery type you can change the delivery type from the default of upload to any of the other delivery types using the setdeliverytype method for example to define a fetch url the resulting url is transforming your image images are transformed by adding serialized transformation instructions to the image delivery url for example to scale your image to a width of 400 pixels add c_scale w_400 https res cloudinary com demo image upload c_scale w_400 bike jpg using the cloudinary url gen package you transform an image by performing one or more transformation actions on the cloudinaryimage object see the syntax overview remember to import the actions that you are using tip discover alternative ways to apply transformations to your images chaining transformations cloudinary transformations can be chained together each transformation is applied to the result of the previous transformation for example the following code crops the image to 150x150 rounds the corners applies a sepia effect adds text to the top center of the resized image then rotates the entire result by 20 degrees and delivers a png the code above generates the following image delivery url sample app angular image transformations in this angular app you can see all the transformations that are used throughout this guide each transformation example has its own xxx component ts file showing the imports and syntax required there are various templates defined xxx component html which use the advanced image component to display the transformed images on a simple web page here s the app in action fork the repo and try it yourself the code for this app is available in github enjoy interactive learning check out more sample apps apply common image transformations this section provides an overview and examples of how to implement the following commonly used image transformation features using the cloudinary url gen package resizing and cropping converting to another image format applying image effects and filters adding text and image overlays image optimizations keep in mind that this section is only intended to introduce you to the basics of using image transformations tips for comprehensive explanations of how to implement a wide variety of transformations see image transformations for a full list of all supported image transformations and their usage see the transformation url api reference resizing and cropping there are a variety of different ways to resize and or crop your images and to control the area of the image that is preserved during a crop the following example uses the fill cropping method to generate and deliver an image that completely fills the requested 250x250 size while retaining the original aspect ratio it uses face detection gravity to ensure that all the faces in the image are retained and centered when the image is cropped original image fill cropping with faces gravity you can also use automatic gravity to determine what to keep in the crop automatically original image fill cropping with auto gravity for details on all resizing and cropping options see resizing and cropping images converting to another image format you can deliver any image uploaded to cloudinary in essentially any image format there are three main ways to convert and deliver in another format specify the image s public id with the desired extension explicitly set the desired format using the format action type of the delivery action use auto format to instruct cloudinary to deliver the image in the most optimized format for each browser that requests it for example 1 to deliver a jpg file in gif format either add the gif extension to the public id when instantiating the cloudinaryimage this is the returned url or use the delivery action setting format to gif note that myimage format gif is an alias for myimage delivery format gif this is the returned url 2 to let cloudinary select the optimal format for each browser set format to auto for example in chrome this image may deliver in avif or webp format depending on your product environment setup this is the returned url for more details see delivering images in different formats automatic format selection f_auto tips and considerations for using f_auto applying image effects and filters you can select from a large selection of image effects enhancements and filters to apply to your images the available effects include a variety of color balance and level effects tinting blurring pixelating sharpening automatic improvement effects artistic filters image and text overlays distortion and shape changing effects outlines backgrounds shadows and more for example the code below applies a cartoonify effect rounding corners effect and background color effect and then scales the image down to a height of 300 pixels for more details on the available image effects and filters see visual image effects and enhancements adding text and image overlays you can add images and text as overlays on your main image you can apply the same types of transformations on your overlay images as you can with any image and you can use gravity settings or x and y coordinates to control the location of the overlays you can also apply a variety of transformations on text such as color font size rotation and more for example the code below overlays a couple s photo on a mug image the overlay photo is cropped using face detection with adjusted color saturation and a vignette effect applied the word love is added in a pink fancy font and rotated to fit the design a balloon graphic is also added additionally the final image is cropped and the corners are rounded tip although at first glance this example may look complicated take the time to look through the code and you ll see it s actually quite intuitive image optimizations by default cloudinary automatically performs certain optimizations on all transformed images there are also a number of additional features that enable you to further optimize the images you use in your javascript application these include optimizations to image quality format and size among others for example you can use the auto qualifier for the fetch format and quality attributes to automatically deliver the image in the format and quality that minimize file size while meeting the required quality level below these two parameters are applied resulting in a 50 file size reduction 1 4 mb vs 784 kb with no visible change in quality for an in depth review of the many ways you can optimize your images see image optimization plugins the cloudinary angular library provides plugins to render the media on your site in the optimal way and improve your user s experience lazy loading to delay loading images if they are not yet visible on the screen responsive images to resize your images automatically based on the viewport size image accessibility to make your images more accessible to your users with visual disabilities image placeholders to display a lightweight version of an image while the target image is downloading both lazy loading and image placeholders are great techniques for helping to optimize your page load times and in turn improve your metrics related to core web vitals in this example the responsive and accessibility plugins are applied note if you re not using standalone components then you ll need to import the cloudinarymodule in app module ts instead the following sections explain each of the plugins in more detail but you can also jump straight to a full example to start playing plugin order we recommend the following order when using our plugins to achieve the best results omitting any you don t need lazy loading lazy loading tells the browser not to download images that are not yet visible on the user s screen and wait until the user scrolls to that image this feature can potentially save bandwidth for images that are not actually viewed and decrease the time needed to load a page this video shows lazy loading in action see how the get request is triggered only when the image is starting to come into the viewport to enable the lazy loading feature for a particular image use the lazyload plugin this allows you to specify parameters that control when the image loads for syntax details see the reference example set root margin and threshold load an image when 25 of it is visible specify a bounding box around the root element with margins top 10px right 20px bottom 10px left 30px note to avoid your page content jumping as the elements dynamically adjust to add downloaded images make sure to add height and width attributes to the advanced image component responsive images you can make your images responsive so that they automatically resize based on the viewport size if the viewport is small then a small image is requested saving bytes and reducing page load times this video shows responsive image behavior in action see how a new image is requested when the browser is resized based on the configured step size to enable the responsive images feature for a particu...