{"id":6965,"date":"2023-06-06T13:55:29","date_gmt":"2023-06-06T20:55:29","guid":{"rendered":"https:\/\/cloudfour.com\/?page_id=6965"},"modified":"2023-07-27T15:11:34","modified_gmt":"2023-07-27T22:11:34","slug":"cloudinary-interactive-demo","status":"publish","type":"page","link":"https:\/\/cloudfour.com\/made\/cloudinary-interactive-demo\/","title":{"rendered":"Cloudinary shows off its APIs with an interactive demo"},"content":{"rendered":"\n<p class=\"has-big-font-size\">We designed and developed a responsive, performant, and accessible demo to explain and showcase how Cloudinary&#8217;s APIs help developers solve common problems. The demo increased engagement on the page it was embedded on by over 400% and improved the quality of visitor conversions.<\/p>\n\n\n\n<p>You can try the demo for yourself right here (this isn&#8217;t a screenshot):<\/p>\n\n\n\n<figure class=\"alignwide\" style=\"padding-inline: 1em\">\n  <div style=\"max-width: 1270px; margin-inline: auto\">\n      <div id=\"api-x-multi-use-case-demo\"><div class=\"api-x_c-root\"><div class=\"\n      api-x_c-tabs\n      api-x_c-tabs--horizontal\n      \n      api-x_c-multi-use-case-demo\n    \"><div class=\"api-x_c-tabs__tab-list api-x_c-multi-use-case-demo__tabs-list\" role=\"tablist\" aria-orientation=\"horizontal\"><button id=\"P458066403-cropping-tab-button\" class=\"api-x_c-tabs__tab api-x_c-multi-use-case-demo__tabs-button\" aria-selected=\"true\" role=\"tab\" type=\"button\"><div class=\"api-x_c-multi-use-case-demo__tabs-button-content\"><div class=\"api-x_c-multi-use-case-demo__tabs-icon\" style=\"--api-x_icon-size-modifier: 1;\"><svg width=\"70\" height=\"52\" viewBox=\"0 0 70 52.76\"><path fill=\"currentColor\" d=\"M34.64,0c4.55,0,8.69,1.86,11.67,4.84,3.01,3.01,4.87,7.15,4.87,11.7s-1.86,8.72-4.87,11.7c-2.98,3.01-7.12,4.87-11.67,4.87s-8.72-1.86-11.7-4.87c-3.01-2.98-4.87-7.12-4.87-11.7s1.86-8.69,4.87-11.7C25.92,1.86,30.05,0,34.64,0h0Zm-11.6,14.75c-.1,.58-.16,1.19-.16,1.8,0,3.27,1.31,6.19,3.46,8.3,2.12,2.15,5.03,3.46,8.3,3.46,3.24,0,6.15-1.31,8.27-3.46,2.15-2.12,3.46-5.03,3.46-8.3,0-2.76-.99-5.32-2.6-7.34-2.53,2.28-5.29,3.88-8.27,4.87-3.62,1.22-7.5,1.44-11.57,.83-.29-.06-.58-.1-.9-.16h0Z\"><\/path><path fill=\"currentColor\" d=\"M55.62,52.76c1.47,0,2.39-1.58,1.67-2.86-3.41-6.03-4.69-11.22-10.05-13.71-.54-.26-1.09-.48-1.63-.71-6.83,4.07-15.13,4.07-21.96,0-.55,.22-1.09,.45-1.63,.71-5.78,2.69-7.42,7.28-10.81,13.75-.67,1.28,.24,2.83,1.68,2.83H55.62Z\"><\/path><path fill=\"currentColor\" d=\"M40.88,31.84l7.3,1.59c1.77,0,3.2-1.57,3.2-2.21l-.17-14.71-10.32,15.33Z\"><\/path><path fill=\"currentColor\" d=\"M28.42,31.97l-7.3,1.59c-1.77,0-3.2-1.57-3.2-2.21l.17-14.71,10.32,15.33Z\"><\/path><path fill=\"currentColor\" d=\"M10.32,35.07H4.44s0-.05,0-.05v-5.84c0-1.22-1-2.22-2.22-2.22s-2.22,1-2.22,2.22v8.05c0,.47,.15,.9,.4,1.26,.4,.61,1.08,1.02,1.86,1.02H10.32c1.22,0,2.22-1,2.22-2.22s-1-2.22-2.22-2.22Z\"><\/path><path fill=\"currentColor\" d=\"M10.32,4.63H4.44s0,.05,0,.05v5.84c0,1.22-1,2.22-2.22,2.22s-2.22-1-2.22-2.22V2.47c0-.47,.15-.9,.4-1.26C.8,.6,1.48,.19,2.26,.19H10.32c1.22,0,2.22,1,2.22,2.22s-1,2.22-2.22,2.22Z\"><\/path><path fill=\"currentColor\" d=\"M59.68,4.63h5.87s0,.05,0,.05v5.84c0,1.22,1,2.22,2.22,2.22s2.22-1,2.22-2.22V2.47c0-.47-.15-.9-.4-1.26-.4-.61-1.08-1.02-1.86-1.02h-8.05c-1.22,0-2.22,1-2.22,2.22,0,1.22,1,2.22,2.22,2.22Z\"><\/path><path fill=\"currentColor\" d=\"M59.68,35.07h5.87s0-.05,0-.05v-5.84c0-1.22,1-2.22,2.22-2.22s2.22,1,2.22,2.22v8.05c0,.47-.15,.9-.4,1.26-.4,.61-1.08,1.02-1.86,1.02h-8.05c-1.22,0-2.22-1-2.22-2.22s1-2.22,2.22-2.22Z\"><\/path><\/svg><\/div><span class=\"api-x_c-multi-use-case-demo__tabs-short-title\">Cropping with AI<\/span><span class=\"api-x_c-multi-use-case-demo__tabs-medium-title\">Cropping<br>with AI<\/span><span class=\"api-x_c-multi-use-case-demo__tabs-long-title\">Content-Aware<br>Cropping with AI<\/span><\/div><\/button><button id=\"P458066403-performance-tab-button\" class=\"api-x_c-tabs__tab api-x_c-multi-use-case-demo__tabs-button\" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\"><div class=\"api-x_c-multi-use-case-demo__tabs-button-content\"><div class=\"api-x_c-multi-use-case-demo__tabs-icon\" style=\"--api-x_icon-size-modifier: 0.85;\"><svg width=\"48\" height=\"48\" viewBox=\"0 0 70 61.27\" fill=\"currentColor\"><path d=\"M61.75 21.28c.7-.7 1.83-.7 2.52 0s.7 1.83 0 2.52l-.91.91c.15.13.28.28.44.41 3.83 3.83 6.2 9.12 6.2 14.97s-2.37 11.14-6.2 14.97-9.14 6.2-14.97 6.2c-4.22 0-8.16-1.24-11.47-3.37-3.42-2.22-6.16-5.37-7.83-9.1-.41-.91 0-1.96.89-2.37.89-.39 1.96 0 2.35.89 1.41 3.11 3.68 5.74 6.51 7.57 2.76 1.76 6.03 2.81 9.55 2.81 4.85 0 9.25-1.98 12.45-5.16 3.18-3.2 5.16-7.59 5.16-12.45s-1.98-9.27-5.16-12.45c-.5-.5-1.02-.96-1.59-1.39-.02-.02-.07-.04-.09-.09-2.98-2.31-6.72-3.68-10.77-3.68s-7.79 1.37-10.77 3.68c-.04.04-.07.07-.11.09-.54.44-1.07.89-1.57 1.39a17.573 17.573 0 0 0-5.16 12.45v.61h5.03c1 0 1.78.81 1.78 1.78s-.78 1.78-1.78 1.78H21.17c-.98 0-1.78-.81-1.78-1.78s.81-1.78 1.78-1.78h6.46V18.21H17.08v24.28c0 .89-.72 1.63-1.63 1.63H1.63c-.89 0-1.63-.74-1.63-1.63V24.07c0-.89.74-1.63 1.63-1.63h12.19v-5.85c0-.89.74-1.63 1.63-1.63h12.19V9.11c0-.89.74-1.63 1.63-1.63h12.19V1.63c0-.91.74-1.63 1.63-1.63h13.82c.91 0 1.63.72 1.63 1.63V21.3c.7.35 1.37.74 2.02 1.18l1.2-1.2Zm-3.07 28.68-2.18-2.18c1.96-1.96 3.18-4.68 3.18-7.68 0-6.01-4.85-10.88-10.86-10.88v-3.24c7.7 0 14.03 6.29 14.03 14.03 0 3.87-1.61 7.4-4.18 9.94Zm-3.42-30.03V3.26H44.71v16.06c1.33-.26 2.7-.39 4.11-.39 2.24 0 4.42.35 6.44 1ZM24.19 46.28c.98 0 1.78.81 1.78 1.78s-.81 1.78-1.78 1.78h-5.7c-.98 0-1.78-.81-1.78-1.78s.81-1.78 1.78-1.78h5.7Z\"><\/path><path d=\"M48.83 47.04c3.82 0 6.94-3.11 6.94-6.94s-3.11-6.94-6.94-6.94-6.94 3.11-6.94 6.94 3.11 6.94 6.94 6.94Z\" style=\"fill-rule:evenodd\"><\/path><\/svg><\/div><span class=\"api-x_c-multi-use-case-demo__tabs-short-title\">Performance<br> Optimization<\/span><span class=\"api-x_c-multi-use-case-demo__tabs-medium-title\">Performance<br> Optimization<\/span><span class=\"api-x_c-multi-use-case-demo__tabs-long-title\">Performance<br> Optimization<\/span><\/div><\/button><button id=\"P458066403-personalization-tab-button\" class=\"api-x_c-tabs__tab api-x_c-multi-use-case-demo__tabs-button\" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\"><div class=\"api-x_c-multi-use-case-demo__tabs-button-content\"><div class=\"api-x_c-multi-use-case-demo__tabs-icon\" style=\"--api-x_icon-size-modifier: 1;\"><svg width=\"48\" height=\"48\" viewBox=\"0 0 60 59.98\"><path d=\"M46.89 0H13.11C5.87 0 0 5.87 0 13.11v33.76c0 7.24 5.87 13.11 13.11 13.11h33.78c7.24 0 13.11-5.87 13.11-13.11V13.11C60 5.87 54.13 0 46.89 0ZM30 8.5a5.15 5.15 0 1 1 .002 10.298A5.15 5.15 0 0 1 30 8.5ZM6.91 29.99l3.02-5.03h6.03l3.02 5.03-3.02 5.03H9.93l-3.02-5.03Zm28.12 23.43H24.98V43.37h10.05v10.05Zm11.74-5.24L30 31.41 13.23 48.18l-1.42-1.42 16.77-16.77-16.77-16.77 1.42-1.42L30 28.57 46.77 11.8l1.42 1.42-16.77 16.77 16.77 16.77-1.42 1.42Zm-5.18-13.16 6.03-10.05 6.03 10.05H41.59Z\" style=\"fill:currentColor;fill-rule:evenodd\"><\/path><\/svg><\/div><span class=\"api-x_c-multi-use-case-demo__tabs-short-title\">Image<br>Editing<\/span><span class=\"api-x_c-multi-use-case-demo__tabs-medium-title\">Image<br>Personalization<\/span><span class=\"api-x_c-multi-use-case-demo__tabs-long-title\">Image Editing and<br>Personalization<\/span><\/div><\/button><button id=\"P458066403-video-previews-tab-button\" class=\"api-x_c-tabs__tab api-x_c-multi-use-case-demo__tabs-button\" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\"><div class=\"api-x_c-multi-use-case-demo__tabs-button-content\"><div class=\"api-x_c-multi-use-case-demo__tabs-icon\" style=\"--api-x_icon-size-modifier: 1.085;\"><svg width=\"48\" height=\"48\" viewBox=\"0 0 76.17 55.49\" fill=\"currentColor\"><path d=\"M56.29 29.2c.48.07.97.02 1.47.02 6.16 0 11.08-5.14 10.77-11.35-.27-5.48-4.78-9.98-10.27-10.23-4.54-.21-8.49 2.39-10.29 6.2h-8.53c.5-1.97 1.28-3.82 2.34-5.51 1.65.91 3.76.68 5.17-.72 1.39-1.4 1.64-3.51.72-5.15C49.46 1.31 51.45.48 53.57 0c.53 1.82 2.2 3.13 4.18 3.13S61.4 1.82 61.91 0c2.13.49 4.12 1.31 5.92 2.46-.91 1.64-.68 3.75.72 5.15s3.51 1.64 5.15.72a18.52 18.52 0 0 1 2.46 5.92c-1.82.52-3.13 2.18-3.13 4.16s1.31 3.65 3.13 4.18c-.49 2.13-1.31 4.12-2.46 5.9a4.348 4.348 0 0 0-5.15.72 4.33 4.33 0 0 0-.72 5.17c-1.8 1.14-3.79 1.96-5.92 2.45a4.334 4.334 0 0 0-4.16-3.13c-.51 0-1.01.09-1.47.26v-4.77ZM45.63 28.27l.04.04a4.97 4.97 0 0 0-.65-.22c.21-.06.43 0 .6.17Z\"><\/path><path d=\"M57.72 26.53c-4.42 0-8.03-3.59-8.03-8.01s3.61-8.01 8.03-8.01 8.01 3.59 8.01 8.01-3.61 8.01-8.01 8.01Z\"><\/path><path d=\"M7.78 38.79H1.6c-.88 0-1.6.72-1.6 1.6s.72 1.6 1.6 1.6h6.18c.88 0 1.6-.72 1.6-1.6s-.72-1.6-1.6-1.6Z\"><\/path><path d=\"M46.89 18.52c0-1.69.4-3.28 1.1-4.7H23.25c-4.65 0-8.46 3.81-8.46 8.46v5.67H4.96c-.88 0-1.6.72-1.6 1.6s.72 1.6 1.6 1.6h13.81c.88 0 1.6.72 1.6 1.6s-.72 1.6-1.6 1.6h-7.44c-.88 0-1.6.72-1.6 1.6s.72 1.6 1.6 1.6h3.46v9.48c0 4.67 3.81 8.46 8.46 8.46h24.77c4.65 0 8.46-3.79 8.46-8.46V29.25c-5.38-.62-9.59-5.19-9.59-10.73Zm-2.77 16.91-13.11 7.58c-.27.18-.55.35-.86.29a.701.701 0 0 1-.55-.68V27.01c0-.53.59-.86 1.04-.61l13.46 7.81c.51.25.47.9.02 1.21Z\"><\/path><\/svg><\/div><span class=\"api-x_c-multi-use-case-demo__tabs-short-title\">Video<br>Previews<\/span><span class=\"api-x_c-multi-use-case-demo__tabs-medium-title\">AI-Generated<br>Video Previews<\/span><span class=\"api-x_c-multi-use-case-demo__tabs-long-title\">AI-Generated<br>Video Previews<\/span><\/div><\/button><\/div><div class=\"api-x_c-tabs__content api-x_c-multi-use-case-demo__tabs-content\"><div class=\"api-x_c-tabs__tab-panels \"><div aria-labelledby=\"P458066403-cropping-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-multi-use-case-demo__tabs-panel\n               is-selected\n            \"><div class=\"api-x_c-transformation-demo api-x_c-transformation-demo--hide-after-asset-on-small-screens\"><div class=\"api-x_c-transformation-demo__row api-x_c-transformation-demo__row--assets\"><figure class=\"api-x_c-transformation-demo__asset-wrapper\"><div class=\"\n        api-x_c-loader\n        api-x_c-loader--constrain-assets\n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><div class=\"\n          api-x_c-crop-visualizer\n          api-x_c-crop-visualizer--horizontal\n          api-x_c-cropping-demo__crop-visualizer\n        \" style=\"--api-x_crop-ratio: 0.5; --api-x_center-point: 61.05654761904762%;\"><img src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/w_1300\/q_auto\/f_auto\/hiking_dog_mountain\" alt=\"A woman and a golden retriever in the mountains. They're sitting, facing away from the camera while the dog noses the woman. They're surrounded by natural splendor including majestic mountains, puffy clouds, and evergreen-studded hills.\" srcset=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/w_1300\/hiking_dog_mountain 1300w,\nhttps:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/w_1000\/hiking_dog_mountain 1000w,\nhttps:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/w_700\/hiking_dog_mountain 700w,\nhttps:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/w_400\/hiking_dog_mountain 400w\" sizes=\"(min-width: 1250px) 562.5px,(min-width: 676px) 45vw, 100vw\"><div class=\"api-x_c-crop-visualizer__window-wrapper\"><div class=\"api-x_c-crop-visualizer__window\"><\/div><\/div><\/div><\/div><figcaption class=\"api-x_u-visually-hidden\">\n        An un-cropped image overlaid with a cropping window showing how it would be cropped by Cloudinary.\n      <\/figcaption><\/figure><span class=\"api-x_c-transformation-demo__in-between-content\"><span class=\"api-x_u-visually-hidden\">An arrow pointing from the original asset to the cropped asset.<\/span><svg viewBox=\"0 0 56 36\" width=\"56\" height=\"36\" aria-hidden=\"true\" class=\"api-x_c-transformation-demo__arrow\"><line fill=\"none\" stroke-width=\"6\" stroke=\"currentColor\" x1=\"0\" y1=\"18\" x2=\"50\" y2=\"18\"><\/line><polyline fill=\"none\" stroke-width=\"6\" stroke=\"currentColor\" points=\"36,2 52,18 36,34 \"><\/polyline><\/svg><\/span><figure class=\"api-x_c-transformation-demo__asset-wrapper api-x_c-transformation-demo__after-asset\"><div class=\"\n        api-x_c-loader\n        api-x_c-loader--constrain-assets\n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><picture><source media=\"(min-width: 676px)\" sizes=\"(min-width: 1250px) 188px,(min-width: 676px) 15vw, 33vw\" srcset=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/ar_0.5,c_fill,g_auto\/w_433\/q_auto\/f_auto\/hiking_dog_mountain 433w,\nhttps:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/ar_0.5,c_fill,g_auto\/w_333\/q_auto\/f_auto\/hiking_dog_mountain 333w,\nhttps:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/ar_0.5,c_fill,g_auto\/w_233\/q_auto\/f_auto\/hiking_dog_mountain 233w,\nhttps:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/ar_0.5,c_fill,g_auto\/w_133\/q_auto\/f_auto\/hiking_dog_mountain 133w\"><img src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAP\/\/\/wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" alt=\"A woman and a golden retriever in the mountains. They're sitting, facing away from the camera while the dog noses the woman. They're surrounded by natural splendor including majestic mountains, puffy clouds, and evergreen-studded hills.\"><\/picture><\/div><figcaption class=\"api-x_u-visually-hidden\">\n        The same asset cropped using the following settings:\n        Aspect ratio: 1:2.\n        Cropping Strategy: Content-Aware.<\/figcaption><\/figure><\/div><form class=\"api-x_c-transformation-demo__row api-x_c-transformation-demo__row--controls\" aria-label=\"Cropping Options\"><div class=\"\n      api-x_c-tabs\n      api-x_c-tabs--vertical\n      api-x_c-tabs--center-content\n      \n    \"><div class=\"api-x_c-tabs__tab-list \" role=\"tablist\" aria-orientation=\"vertical\"><button id=\"P-11739402243-image-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"true\" role=\"tab\" type=\"button\">Images<\/button><button id=\"P-11739402243-video-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\">Videos<\/button><\/div><div class=\"api-x_c-tabs__content \"><div class=\"api-x_c-tabs__tab-panels \"><div aria-labelledby=\"P-11739402243-image-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              \n               is-selected\n            \"><fieldset class=\"api-x_c-media-selector\"><legend class=\"api-x_u-visually-hidden\">Images<\/legend><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"true\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><img class=\"api-x_c-media-selector__image\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/h_160\/w_auto\/q_auto\/hiking_dog_mountain.jpg\" alt=\"A woman and a golden retriever in the mountains. They're sitting, facing away from the camera while the dog noses the woman. They're surrounded by natural splendor including majestic mountains, puffy clouds, and evergreen-studded hills.\"><\/div><\/button><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"false\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><img class=\"api-x_c-media-selector__image\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/h_160\/w_auto\/q_auto\/girls_yellow_wall.jpg\" alt=\"Two dark-haired girls wearing backpacks face away from the camera, looking at a yellow wall.\"><\/div><\/button><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"false\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><img class=\"api-x_c-media-selector__image\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/h_160\/w_auto\/q_auto\/musician_interview.jpg\" alt=\"\n        Two women sit on a couch looking deep in conversation.\n        There's a grand piano in the corner of the room.\n        Behind them are large black-and-white portraits of men's faces.\n      \"><\/div><\/button><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"false\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><img class=\"api-x_c-media-selector__image\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/h_160\/w_auto\/q_auto\/graphic_wall_pose.jpg\" alt=\"\n        A hooded man leans against a wall, his hat tipped down to block his face.\n        He's in an industrial setting. The wall behind him has a large number 6\n        painted on it, as well as an orange, zig-zag, caret shape.\n      \"><\/div><\/button><\/fieldset><\/div><div aria-labelledby=\"P-11739402243-video-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              \n              \n            \"><fieldset class=\"api-x_c-media-selector\"><legend class=\"api-x_u-visually-hidden\">Videos<\/legend><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"true\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \" style=\"--api-x_asset-aspect-ratio: 25\/14;\"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><img class=\"api-x_c-media-selector__image\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/video\/upload\/h_160\/w_auto\/q_auto\/frisbee_dog.jpg\" alt=\"A black and white dog flying through the air with a yellow frisbee in its mouth.\"><\/div><svg viewBox=\"0 0 50 50\" class=\"api-x_c-media-selector__video-indicator\" aria-hidden=\"true\"><circle cx=\"25\" cy=\"25\" r=\"24\" opacity=\"0.6\"><\/circle><polygon fill=\"currentColor\" points=\"20,15 20,35 35,25 \"><\/polygon><\/svg><\/button><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"false\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \" style=\"--api-x_asset-aspect-ratio: 25\/14;\"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><img class=\"api-x_c-media-selector__image\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/video\/upload\/h_160\/w_auto\/q_auto\/skydiving.jpg\" alt=\"A woman skydiving above the clouds.\"><\/div><svg viewBox=\"0 0 50 50\" class=\"api-x_c-media-selector__video-indicator\" aria-hidden=\"true\"><circle cx=\"25\" cy=\"25\" r=\"24\" opacity=\"0.6\"><\/circle><polygon fill=\"currentColor\" points=\"20,15 20,35 35,25 \"><\/polygon><\/svg><\/button><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"false\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \" style=\"--api-x_asset-aspect-ratio: 25\/14;\"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><img class=\"api-x_c-media-selector__image\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/video\/upload\/h_160\/w_auto\/q_auto\/santorini_tour.jpg\" alt=\"A woman in a red dress climbing stairs in a beautiful, ancient, white-walled Greek village by the sea.\"><\/div><svg viewBox=\"0 0 50 50\" class=\"api-x_c-media-selector__video-indicator\" aria-hidden=\"true\"><circle cx=\"25\" cy=\"25\" r=\"24\" opacity=\"0.6\"><\/circle><polygon fill=\"currentColor\" points=\"20,15 20,35 35,25 \"><\/polygon><\/svg><\/button><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"false\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \" style=\"--api-x_asset-aspect-ratio: 25\/14;\"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><img class=\"api-x_c-media-selector__image\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/video\/upload\/h_160\/w_auto\/q_auto\/boat_in_river.jpg\" alt=\"An aerial shot of a row boat in a river banked with bright green tropical plants.\"><\/div><svg viewBox=\"0 0 50 50\" class=\"api-x_c-media-selector__video-indicator\" aria-hidden=\"true\"><circle cx=\"25\" cy=\"25\" r=\"24\" opacity=\"0.6\"><\/circle><polygon fill=\"currentColor\" points=\"20,15 20,35 35,25 \"><\/polygon><\/svg><\/button><\/fieldset><\/div><\/div><\/div><\/div><div class=\"api-x_c-fieldset-grid\"><div class=\"api-x_c-fieldset-grid__faux-legend\" aria-hidden=\"true\">Crop Mode:<\/div><fieldset class=\"api-x_c-fieldset-grid__fieldset\"><legend class=\"api-x_u-visually-hidden\">Crop Mode<\/legend><div class=\"api-x_c-fieldset-grid__fieldset-content\"><div class=\"api-x_c-button-group\"><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"true\" data-value=\"content-aware\">Content-Aware<\/button><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"false\" data-value=\"default\">Default (Center)<\/button><\/div><\/div><\/fieldset><div class=\"api-x_c-fieldset-grid__faux-legend\" aria-hidden=\"true\">Aspect Ratio:<\/div><fieldset class=\"api-x_c-fieldset-grid__fieldset\"><legend class=\"api-x_u-visually-hidden\">Aspect Ratio<\/legend><div class=\"api-x_c-fieldset-grid__fieldset-content\"><div class=\"api-x_c-button-group\"><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"true\" data-value=\"0.5\">1:2<\/button><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"false\" data-value=\"2.5\">5:2<\/button><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"false\" data-value=\"1\">1:1<\/button><\/div><\/div><\/fieldset><\/div><\/form><\/div><\/div><div aria-labelledby=\"P458066403-performance-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-multi-use-case-demo__tabs-panel\n              \n            \"><div class=\"api-x_c-performance-demo\"><div class=\"api-x_c-transformation-demo api-x_c-transformation-demo--compare\"><div class=\"api-x_c-transformation-demo__row api-x_c-transformation-demo__row--assets\"><figure class=\"api-x_c-transformation-demo__asset-wrapper\"><div class=\"\n        api-x_c-loader\n        api-x_c-loader--constrain-assets\n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><div class=\"api-x_c-transformation-demo__asset-stats\" id=\"P10705096161-stats\"><dl class=\"\n      api-x_c-asset-stat-list\n      api-x_c-asset-stat-list--negative\n      \n                api-x_c-performance-demo__dynamic-data \n                is-shown\n              \n    \"><dt class=\"api-x_c-asset-stat-list__label\">Original<\/dt><dd class=\"api-x_c-asset-stat-list__value\">18 MB<div class=\"api-x_c-performance-demo__toggle-tip\"><button class=\"api-x_c-toggle-tip__trigger api-x_c-performance-demo__toggle-tip-button\" aria-expanded=\"false\"><span class=\"api-x_u-visually-hidden\">More Information<\/span><svg aria-hidden=\"true\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"><\/line><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"><\/line><\/svg><\/button><div class=\"api-x_c-toggle-tip__content\"><p>We\u2019re showing a resized version of the original asset to avoid slow loading speeds. <a href=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/landmannalaugar_iceland\" target=\"_blank\" rel=\"noopener\">View the original.<\/a><\/p><\/div><\/div><\/dd><\/dl><\/div><\/div><figcaption class=\"api-x_u-visually-hidden\">The original asset: <\/figcaption><\/figure><span class=\"api-x_c-transformation-demo__in-between-content\"><\/span><figure class=\"api-x_c-transformation-demo__asset-wrapper api-x_c-transformation-demo__after-asset\"><div class=\"\n        api-x_c-loader\n        api-x_c-loader--constrain-assets\n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><div class=\"api-x_c-transformation-demo__asset-stats api-x_c-transformation-demo__asset-stats--after\" id=\"P10705096162-stats\"><dl class=\"\n      api-x_c-asset-stat-list\n      \n      \n                api-x_c-performance-demo__dynamic-data \n                is-shown\n              \n    \"><dt class=\"api-x_c-asset-stat-list__label\">JPG<\/dt><dd class=\"api-x_c-asset-stat-list__value\">135 KB<\/dd><dt class=\"api-x_c-asset-stat-list__label\">WEBP<\/dt><dd class=\"api-x_c-asset-stat-list__value\">135 KB<\/dd><dt class=\"api-x_c-asset-stat-list__label\">AVIF<\/dt><dd class=\"api-x_c-asset-stat-list__value\">90 KB<\/dd><\/dl><\/div><\/div><figcaption class=\"api-x_u-visually-hidden\">\n    The image after being optimized using the following settings:\n    \n    Quality: Auto. \n  \n    \n    Width: 1000px.\n  \n  <\/figcaption><\/figure><\/div><div class=\"api-x_c-transformation-demo__asset-compare\"><div class=\"api-x_c-asset-compare\" style=\"--exposure: 50%;\"><span class=\"api-x_c-asset-compare__related-content\"><div class=\"api-x_c-transformation-demo__asset-stats\" id=\"P10705096163-stats\"><dl class=\"\n      api-x_c-asset-stat-list\n      api-x_c-asset-stat-list--negative\n      \n                api-x_c-performance-demo__dynamic-data \n                is-shown\n              \n    \"><dt class=\"api-x_c-asset-stat-list__label\">Original<\/dt><dd class=\"api-x_c-asset-stat-list__value\">18 MB<div class=\"api-x_c-performance-demo__toggle-tip\"><button class=\"api-x_c-toggle-tip__trigger api-x_c-performance-demo__toggle-tip-button\" aria-expanded=\"false\"><span class=\"api-x_u-visually-hidden\">More Information<\/span><svg aria-hidden=\"true\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"><\/line><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"><\/line><\/svg><\/button><div class=\"api-x_c-toggle-tip__content\"><p>We\u2019re showing a resized version of the original asset to avoid slow loading speeds. <a href=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/landmannalaugar_iceland\" target=\"_blank\" rel=\"noopener\">View the original.<\/a><\/p><\/div><\/div><\/dd><\/dl><\/div><\/span><div class=\"\n        api-x_c-loader\n        \n        api-x_c-asset-compare__image-1\n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><figure class=\"api-x_c-transformation-demo__asset-wrapper\"><figcaption class=\"api-x_u-visually-hidden\">The original asset: <\/figcaption><\/figure><\/div><span class=\"api-x_c-asset-compare__related-content\"><div class=\"api-x_c-transformation-demo__asset-stats api-x_c-transformation-demo__asset-stats--after\" id=\"P10705096164-stats\"><dl class=\"\n      api-x_c-asset-stat-list\n      \n      \n                api-x_c-performance-demo__dynamic-data \n                is-shown\n              \n    \"><dt class=\"api-x_c-asset-stat-list__label\">JPG<\/dt><dd class=\"api-x_c-asset-stat-list__value\">135 KB<\/dd><dt class=\"api-x_c-asset-stat-list__label\">WEBP<\/dt><dd class=\"api-x_c-asset-stat-list__value\">135 KB<\/dd><dt class=\"api-x_c-asset-stat-list__label\">AVIF<\/dt><dd class=\"api-x_c-asset-stat-list__value\">90 KB<\/dd><\/dl><\/div><span class=\"api-x_c-transformation-demo__after-asset-content-for-asset-compare\"><\/span><\/span><div class=\"api-x_c-asset-compare__image-2-wrapper\"><div class=\"\n        api-x_c-loader\n        \n        api-x_c-asset-compare__image-2\n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><figure class=\"api-x_c-transformation-demo__asset-wrapper\"><figcaption class=\"api-x_u-visually-hidden\">\n    The image after being optimized using the following settings:\n    \n    Quality: Auto. \n  \n    \n    Width: 1000px.\n  \n  <\/figcaption><\/figure><\/div><\/div><label class=\"api-x_c-asset-compare__label\"><span class=\"api-x_u-visually-hidden\">How much of the first asset should be shown?<\/span><input class=\"api-x_c-asset-compare__input\" type=\"range\" value=\"50\" min=\"0\" max=\"100\" step=\"0.5\"><\/label><\/div><\/div><form class=\"api-x_c-transformation-demo__row api-x_c-transformation-demo__row--controls\" aria-label=\"Performance Optimization Options\"><div class=\"\n      api-x_c-tabs\n      api-x_c-tabs--vertical\n      api-x_c-tabs--center-content\n      \n    \"><div class=\"api-x_c-tabs__tab-list \" role=\"tablist\" aria-orientation=\"vertical\"><button id=\"P-11739402243-image-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"true\" role=\"tab\" type=\"button\">Images<\/button><button id=\"P-11739402243-video-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\">Videos<\/button><\/div><div class=\"api-x_c-tabs__content \"><div class=\"api-x_c-tabs__tab-panels \"><div aria-labelledby=\"P-11739402243-image-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              \n               is-selected\n            \"><fieldset class=\"api-x_c-media-selector\"><legend class=\"api-x_u-visually-hidden\">Images<\/legend><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"true\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><\/div><\/button><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"false\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><\/div><\/button><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"false\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><\/div><\/button><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"false\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><\/div><\/button><\/fieldset><\/div><div aria-labelledby=\"P-11739402243-video-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              \n              \n            \"><fieldset class=\"api-x_c-media-selector\"><legend class=\"api-x_u-visually-hidden\">Videos<\/legend><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"true\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \" style=\"--api-x_asset-aspect-ratio: 25\/14;\"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><\/div><svg viewBox=\"0 0 50 50\" class=\"api-x_c-media-selector__video-indicator\" aria-hidden=\"true\"><circle cx=\"25\" cy=\"25\" r=\"24\" opacity=\"0.6\"><\/circle><polygon fill=\"currentColor\" points=\"20,15 20,35 35,25 \"><\/polygon><\/svg><\/button><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"false\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \" style=\"--api-x_asset-aspect-ratio: 25\/14;\"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><\/div><svg viewBox=\"0 0 50 50\" class=\"api-x_c-media-selector__video-indicator\" aria-hidden=\"true\"><circle cx=\"25\" cy=\"25\" r=\"24\" opacity=\"0.6\"><\/circle><polygon fill=\"currentColor\" points=\"20,15 20,35 35,25 \"><\/polygon><\/svg><\/button><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"false\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \" style=\"--api-x_asset-aspect-ratio: 25\/14;\"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><\/div><svg viewBox=\"0 0 50 50\" class=\"api-x_c-media-selector__video-indicator\" aria-hidden=\"true\"><circle cx=\"25\" cy=\"25\" r=\"24\" opacity=\"0.6\"><\/circle><polygon fill=\"currentColor\" points=\"20,15 20,35 35,25 \"><\/polygon><\/svg><\/button><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"false\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \" style=\"--api-x_asset-aspect-ratio: 25\/14;\"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><\/div><svg viewBox=\"0 0 50 50\" class=\"api-x_c-media-selector__video-indicator\" aria-hidden=\"true\"><circle cx=\"25\" cy=\"25\" r=\"24\" opacity=\"0.6\"><\/circle><polygon fill=\"currentColor\" points=\"20,15 20,35 35,25 \"><\/polygon><\/svg><\/button><\/fieldset><\/div><\/div><\/div><\/div><div class=\"api-x_c-fieldset-grid\"><div class=\"api-x_c-fieldset-grid__faux-legend\" aria-hidden=\"true\">Quality:<\/div><fieldset class=\"api-x_c-fieldset-grid__fieldset\"><legend class=\"api-x_u-visually-hidden\">Quality<\/legend><div class=\"api-x_c-fieldset-grid__fieldset-content\"><div class=\"api-x_c-button-group\"><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"true\" data-value=\"auto\">Auto<\/button><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"false\" data-value=\"auto:best\">Best<\/button><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"false\" data-value=\"35\">35%<\/button><\/div><\/div><\/fieldset><div class=\"api-x_c-fieldset-grid__faux-legend\" aria-hidden=\"true\">Width:<\/div><fieldset class=\"api-x_c-fieldset-grid__fieldset\"><legend class=\"api-x_u-visually-hidden\">Width<\/legend><div class=\"api-x_c-fieldset-grid__fieldset-content\"><div class=\"api-x_c-button-group\"><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"true\" data-value=\"1000\">1000px<\/button><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"false\" data-value=\"500\">500px<\/button><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"false\" data-value=\"250\">250px<\/button><\/div><\/div><\/fieldset><\/div><\/form><\/div><\/div><\/div><div aria-labelledby=\"P458066403-personalization-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-multi-use-case-demo__tabs-panel\n              \n            \"><div class=\"api-x_c-transformation-demo api-x_c-transformation-demo--compare\"><div class=\"api-x_c-transformation-demo__row api-x_c-transformation-demo__row--assets\"><figure class=\"api-x_c-transformation-demo__asset-wrapper\"><div class=\"\n        api-x_c-loader\n        api-x_c-loader--constrain-assets\n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><\/div><figcaption class=\"api-x_u-visually-hidden\">The original image:<\/figcaption><\/figure><span class=\"api-x_c-transformation-demo__in-between-content\"><span class=\"api-x_u-visually-hidden\">An arrow pointing from the original asset to the transformed asset.<\/span><svg viewBox=\"0 0 56 36\" width=\"56\" height=\"36\" aria-hidden=\"true\" class=\"api-x_c-transformation-demo__arrow\"><line fill=\"none\" stroke-width=\"6\" stroke=\"currentColor\" x1=\"0\" y1=\"18\" x2=\"50\" y2=\"18\"><\/line><polyline fill=\"none\" stroke-width=\"6\" stroke=\"currentColor\" points=\"36,2 52,18 36,34 \"><\/polyline><\/svg><\/span><figure class=\"api-x_c-transformation-demo__asset-wrapper api-x_c-transformation-demo__after-asset\"><div class=\"\n        api-x_c-loader\n        api-x_c-loader--constrain-assets\n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><\/div><figcaption class=\"api-x_u-visually-hidden\">The personalized image:<\/figcaption><\/figure><\/div><div class=\"api-x_c-transformation-demo__asset-compare\"><div class=\"api-x_c-asset-compare\" style=\"--exposure: 50%;\"><span class=\"api-x_c-asset-compare__related-content\"><\/span><div class=\"\n        api-x_c-loader\n        \n        api-x_c-asset-compare__image-1\n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><figure class=\"api-x_c-transformation-demo__asset-wrapper\"><figcaption class=\"api-x_u-visually-hidden\">The original image:<\/figcaption><\/figure><\/div><span class=\"api-x_c-asset-compare__related-content\"><\/span><div class=\"api-x_c-asset-compare__image-2-wrapper\"><div class=\"\n        api-x_c-loader\n        \n        api-x_c-asset-compare__image-2\n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><figure class=\"api-x_c-transformation-demo__asset-wrapper\"><figcaption class=\"api-x_u-visually-hidden\">The personalized image:<\/figcaption><\/figure><\/div><\/div><label class=\"api-x_c-asset-compare__label\"><span class=\"api-x_u-visually-hidden\">How much of the first asset should be shown?<\/span><input class=\"api-x_c-asset-compare__input\" type=\"range\" value=\"50\" min=\"0\" max=\"100\" step=\"0.5\"><\/label><\/div><\/div><form class=\"api-x_c-transformation-demo__row api-x_c-transformation-demo__row--controls\" aria-label=\"Personalization Controls\"><fieldset class=\"api-x_c-media-selector\"><legend class=\"api-x_u-visually-hidden\">Product Photos<\/legend><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"true\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><\/div><\/button><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"false\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><\/div><\/button><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"false\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><\/div><\/button><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"false\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><\/div><\/button><\/fieldset><div class=\"api-x_c-fieldset-grid\"><div class=\"api-x_c-fieldset-grid__faux-legend\" aria-hidden=\"true\">Backgrounds:<\/div><fieldset class=\"api-x_c-fieldset-grid__fieldset\"><legend class=\"api-x_u-visually-hidden\">Backgrounds<\/legend><div class=\"api-x_c-fieldset-grid__fieldset-content\"><div class=\"api-x_c-button-group\"><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"true\" data-value=\"background01\">Geometric<\/button><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"false\" data-value=\"background02\">Ribbon<\/button><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"false\" data-value=\"\">Original<\/button><\/div><\/div><\/fieldset><div class=\"api-x_c-fieldset-grid__faux-legend\" aria-hidden=\"true\">Overlays:<\/div><fieldset class=\"api-x_c-fieldset-grid__fieldset\"><legend class=\"api-x_u-visually-hidden\">Overlays<\/legend><div class=\"api-x_c-fieldset-grid__fieldset-content\"><div class=\"api-x_c-personalization-demo__toggles\"><button type=\"button\" aria-pressed=\"true\" class=\"api-x_c-toggle-button\"><div class=\"api-x_c-toggle-button__indicator\"><svg class=\"api-x_c-toggle-button__graphic\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline class=\"api-x_c-toggle-button__check\" points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><\/div>New<\/button><button type=\"button\" aria-pressed=\"true\" class=\"api-x_c-toggle-button\"><div class=\"api-x_c-toggle-button__indicator\"><svg class=\"api-x_c-toggle-button__graphic\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline class=\"api-x_c-toggle-button__check\" points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><\/div>Rating<\/button><button type=\"button\" aria-pressed=\"true\" class=\"api-x_c-toggle-button\"><div class=\"api-x_c-toggle-button__indicator\"><svg class=\"api-x_c-toggle-button__graphic\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline class=\"api-x_c-toggle-button__check\" points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><\/div>Sale<\/button><\/div><\/div><\/fieldset><\/div><\/form><\/div><\/div><div aria-labelledby=\"P458066403-video-previews-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-multi-use-case-demo__tabs-panel\n              \n            \"><div class=\"api-x_c-video-previews-demo\"><div class=\"api-x_c-transformation-demo api-x_c-transformation-demo--stacked\"><div class=\"api-x_c-transformation-demo__row api-x_c-transformation-demo__row--assets\"><figure class=\"api-x_c-transformation-demo__asset-wrapper\"><div class=\"\n        api-x_c-loader\n        api-x_c-loader--constrain-assets\n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><div class=\"api-x_c-transformation-demo__asset-stats\" id=\"P10705096161-stats\"><dl id=\"video-previews-demo-full-length-duration\" class=\"\n      api-x_c-asset-stat-list\n      \n      \n    \"><dt class=\"api-x_c-asset-stat-list__label\">Duration<\/dt><dd class=\"api-x_c-asset-stat-list__value\"><time datetime=\"PT102S\">1:42<\/time><\/dd><\/dl><\/div><\/div><figcaption class=\"api-x_u-visually-hidden\">Full length video: Surfing Trip<\/figcaption><\/figure><span class=\"api-x_c-transformation-demo__in-between-content\"><span class=\"api-x_u-visually-hidden\">An arrow pointing from the original video to the AI-generated preview.<\/span><svg viewBox=\"0 0 56 36\" width=\"56\" height=\"36\" aria-hidden=\"true\" class=\"api-x_c-transformation-demo__arrow\"><line fill=\"none\" stroke-width=\"6\" stroke=\"currentColor\" x1=\"0\" y1=\"18\" x2=\"50\" y2=\"18\"><\/line><polyline fill=\"none\" stroke-width=\"6\" stroke=\"currentColor\" points=\"36,2 52,18 36,34 \"><\/polyline><\/svg><\/span><figure class=\"api-x_c-transformation-demo__asset-wrapper api-x_c-transformation-demo__after-asset\"><div class=\"\n        api-x_c-loader\n        api-x_c-loader--constrain-assets\n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><div class=\"api-x_c-transformation-demo__asset-stats api-x_c-transformation-demo__asset-stats--after\" id=\"P10705096162-stats\"><dl class=\"\n      api-x_c-asset-stat-list\n      \n      \n    \"><dt class=\"api-x_c-asset-stat-list__label\">Duration<\/dt><dd class=\"api-x_c-asset-stat-list__value\"><time datetime=\"PT15S\">0:15<\/time><\/dd><\/dl><\/div><\/div><figcaption class=\"api-x_u-visually-hidden\">\n    A shorter video preview generated by Cloudinary&#8217;s AI using the following settings:\n    \n    Duration: 15 seconds.\n  \n    \n    Max Clips: 9.\n  \n    \n    Min Clip Length: 1\n    second.\n  \n  <\/figcaption><\/figure><\/div><form class=\"api-x_c-transformation-demo__row api-x_c-transformation-demo__row--controls\" aria-label=\"Video Preview Options\"><fieldset class=\"api-x_c-media-selector\"><legend class=\"api-x_u-visually-hidden\">Videos<\/legend><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"true\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><\/div><svg viewBox=\"0 0 50 50\" class=\"api-x_c-media-selector__video-indicator\" aria-hidden=\"true\"><circle cx=\"25\" cy=\"25\" r=\"24\" opacity=\"0.6\"><\/circle><polygon fill=\"currentColor\" points=\"20,15 20,35 35,25 \"><\/polygon><\/svg><\/button><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"false\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><\/div><svg viewBox=\"0 0 50 50\" class=\"api-x_c-media-selector__video-indicator\" aria-hidden=\"true\"><circle cx=\"25\" cy=\"25\" r=\"24\" opacity=\"0.6\"><\/circle><polygon fill=\"currentColor\" points=\"20,15 20,35 35,25 \"><\/polygon><\/svg><\/button><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"false\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><\/div><svg viewBox=\"0 0 50 50\" class=\"api-x_c-media-selector__video-indicator\" aria-hidden=\"true\"><circle cx=\"25\" cy=\"25\" r=\"24\" opacity=\"0.6\"><\/circle><polygon fill=\"currentColor\" points=\"20,15 20,35 35,25 \"><\/polygon><\/svg><\/button><button type=\"button\" class=\"api-x_c-media-selector__button\" aria-pressed=\"false\"><svg class=\"api-x_c-media-selector__check\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><div class=\"\n        api-x_c-loader\n        \n        \n      \"><div class=\"api-x_c-loading api-x_c-loader__graphic\"><\/div><\/div><svg viewBox=\"0 0 50 50\" class=\"api-x_c-media-selector__video-indicator\" aria-hidden=\"true\"><circle cx=\"25\" cy=\"25\" r=\"24\" opacity=\"0.6\"><\/circle><polygon fill=\"currentColor\" points=\"20,15 20,35 35,25 \"><\/polygon><\/svg><\/button><\/fieldset><div class=\"api-x_c-fieldset-grid\"><div class=\"api-x_c-fieldset-grid__faux-legend\" aria-hidden=\"true\">Duration:<\/div><fieldset class=\"api-x_c-fieldset-grid__fieldset\"><legend class=\"api-x_u-visually-hidden\">Duration<\/legend><div class=\"api-x_c-fieldset-grid__fieldset-content\"><div class=\"api-x_c-button-group\"><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"true\" data-value=\"15\">15<span aria-hidden=\"true\">s<\/span><span class=\"api-x_u-visually-hidden\">seconds<\/span><\/button><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"false\" data-value=\"10\">10<span aria-hidden=\"true\">s<\/span><span class=\"api-x_u-visually-hidden\">seconds<\/span><\/button><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"false\" data-value=\"5\">5<span aria-hidden=\"true\">s<\/span><span class=\"api-x_u-visually-hidden\">seconds<\/span><\/button><\/div><\/div><\/fieldset><div class=\"api-x_c-fieldset-grid__faux-legend\" aria-hidden=\"true\">Max Clips:<\/div><fieldset class=\"api-x_c-fieldset-grid__fieldset\"><legend class=\"api-x_u-visually-hidden\">Max Clips<\/legend><div class=\"api-x_c-fieldset-grid__fieldset-content\"><div class=\"api-x_c-button-group\"><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"true\" data-value=\"9\">9<\/button><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"false\" data-value=\"6\">6<\/button><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"false\" data-value=\"3\">3<\/button><\/div><\/div><\/fieldset><div class=\"api-x_c-fieldset-grid__faux-legend\" aria-hidden=\"true\">Min Clip Length:<\/div><fieldset class=\"api-x_c-fieldset-grid__fieldset\"><legend class=\"api-x_u-visually-hidden\">Min Clip Length<\/legend><div class=\"api-x_c-fieldset-grid__fieldset-content\"><div class=\"api-x_c-button-group\"><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"true\" data-value=\"1\">1<span aria-hidden=\"true\">s<\/span><span class=\"api-x_u-visually-hidden\">second<\/span><\/button><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"false\" data-value=\"3\">3<span aria-hidden=\"true\">s<\/span><span class=\"api-x_u-visually-hidden\">seconds<\/span><\/button><button type=\"button\" class=\"api-x_c-button api-x_c-button-group__button\" aria-pressed=\"false\" data-value=\"5\">5<span aria-hidden=\"true\">s<\/span><span class=\"api-x_u-visually-hidden\">seconds<\/span><\/button><\/div><\/div><\/fieldset><\/div><\/form><\/div><\/div><\/div><\/div><div class=\"api-x_c-tabs__footer api-x_c-multi-use-case-demo__footer\"><div class=\"api-x_c-url-bar\"><div class=\"api-x_c-url-bar__label\">URL:<\/div><div class=\"api-x_c-url-bar__link-wrapper\"><a href=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/ar_0.5,c_fill,g_auto,w_433\/q_auto\/f_auto\/hiking_dog_mountain.jpg\" target=\"_blank\" class=\"api-x_c-url-bar__link\" rel=\"noopener\">\/<span class=\"api-x_c-url-bar__transformations\">ar_0.5,c_fill,g_auto,w_433\/q_auto\/f_auto<\/span>\/<span class=\"api-x_c-url-bar__public-id\">hiking_dog_mountain.jpg<\/span><\/a><\/div><button class=\"api-x_c-button \n        api-x_c-copy-button \n         \n        api-x_c-url-bar__copy-button\n      \"><svg class=\"api-x_c-copy-button__icon api-x_c-copy-button__checkmark is-hidden\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" class=\"api-x_c-copy-button__icon api-x_c-copy-button__copy-icon \"><path d=\"M16,1 L4,1 C2.9,1 2,1.9 2,3 L2,17 L4,17 L4,3 L16,3 L16,1 Z M19,5 L8,5 C6.9,5 6,5.9 6,7 L6,21 C6,22.1 6.9,23 8,23 L19,23 C20.1,23 21,22.1 21,21 L21,7 C21,5.9 20.1,5 19,5 Z M19,21 L8,21 L8,7 L19,7 L19,21 Z\" fill=\"currentColor\"><\/path><\/svg><span class=\"api-x_u-visually-hidden\">Copy URL to clipboard<\/span><\/button><span class=\"api-x_u-visually-hidden\" aria-live=\"polite\"><\/span><\/div><div class=\"api-x_c-sdk-snippets api-x_c-multi-use-case-demo__snippets\"><div class=\"\n      api-x_c-tabs\n      api-x_c-tabs--horizontal\n      \n      \n    \"><div class=\"api-x_c-tabs__tab-list api-x_c-sdk-snippets__tab-list\" role=\"tablist\" aria-orientation=\"horizontal\"><button id=\"P-2864365433-Node.js-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"true\" role=\"tab\" type=\"button\">Node.js<\/button><button id=\"P-2864365433-React-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\">React<\/button><button id=\"P-2864365433-Vue.js-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\">Vue.js<\/button><button id=\"P-2864365433-Angular-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\">Angular<\/button><button id=\"P-2864365433-JS-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\">JS<\/button><button id=\"P-2864365433-Python-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\">Python<\/button><button id=\"P-2864365433-PHP-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\">PHP<\/button><button id=\"P-2864365433-Java-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\">Java<\/button><button id=\"P-2864365433-Ruby-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\">Ruby<\/button><button id=\"P-2864365433-.NET-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\">.NET<\/button><button id=\"P-2864365433-Dart-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\">Dart<\/button><button id=\"P-2864365433-iOS-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\">iOS<\/button><button id=\"P-2864365433-Android-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\">Android<\/button><button id=\"P-2864365433-Flutter-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\">Flutter<\/button><button id=\"P-2864365433-Kotlin-tab-button\" class=\"api-x_c-tabs__tab \" aria-selected=\"false\" role=\"tab\" type=\"button\" tabindex=\"-1\">Kotlin<\/button><\/div><div class=\"api-x_c-tabs__content api-x_c-sdk-snippets__tab-content\"><div class=\"api-x_c-tabs__tab-panels api-x_c-sdk-snippets__tab-panels\"><div aria-labelledby=\"P-2864365433-Node.js-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-sdk-snippets__tab-panel\n               is-selected\n            \"><pre class=\"api-x_c-sdk-snippets__pre\"><code class=\"api-x_c-sdk-snippets__code\">cloudinary.<span class=\"hljs-title function_\">image<\/span>(<span class=\"hljs-string\">\"hiking_dog_mountain.jpg\"<\/span>, {<span class=\"hljs-attr\">transformation<\/span>: [\n  {<span class=\"hljs-attr\">aspect_ratio<\/span>: <span class=\"hljs-string\">\"0.5\"<\/span>, <span class=\"hljs-attr\">gravity<\/span>: <span class=\"hljs-string\">\"auto\"<\/span>, <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">433<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">\"fill\"<\/span>},\n  {<span class=\"hljs-attr\">quality<\/span>: <span class=\"hljs-string\">\"auto\"<\/span>},\n  {<span class=\"hljs-attr\">fetch_format<\/span>: <span class=\"hljs-string\">\"auto\"<\/span>}\n  ]})<\/code><\/pre><button class=\"api-x_c-button \n        api-x_c-copy-button \n         \n        api-x_c-sdk-snippets__copy-button\n      \"><svg class=\"api-x_c-copy-button__icon api-x_c-copy-button__checkmark is-hidden\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" class=\"api-x_c-copy-button__icon api-x_c-copy-button__copy-icon \"><path d=\"M16,1 L4,1 C2.9,1 2,1.9 2,3 L2,17 L4,17 L4,3 L16,3 L16,1 Z M19,5 L8,5 C6.9,5 6,5.9 6,7 L6,21 C6,22.1 6.9,23 8,23 L19,23 C20.1,23 21,22.1 21,21 L21,7 C21,5.9 20.1,5 19,5 Z M19,21 L8,21 L8,7 L19,7 L19,21 Z\" fill=\"currentColor\"><\/path><\/svg><span class=\"api-x_u-visually-hidden\">Copy code to clipboard<\/span><\/button><span class=\"api-x_u-visually-hidden\" aria-live=\"polite\"><\/span><\/div><div aria-labelledby=\"P-2864365433-React-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-sdk-snippets__tab-panel\n              \n            \"><pre class=\"api-x_c-sdk-snippets__pre\"><code class=\"api-x_c-sdk-snippets__code\"><span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-title class_\">CloudinaryImage<\/span>(<span class=\"hljs-string\">\"hiking_dog_mountain.jpg\"<\/span>)\n  .<span class=\"hljs-title function_\">resize<\/span>(\n    <span class=\"hljs-title function_\">fill<\/span>()\n      .<span class=\"hljs-title function_\">width<\/span>(<span class=\"hljs-number\">433<\/span>)\n      .<span class=\"hljs-title function_\">aspectRatio<\/span>(<span class=\"hljs-number\">0.5<\/span>)\n      .<span class=\"hljs-title function_\">gravity<\/span>(<span class=\"hljs-title function_\">autoGravity<\/span>())\n  )\n  .<span class=\"hljs-title function_\">delivery<\/span>(<span class=\"hljs-title function_\">quality<\/span>(<span class=\"hljs-title function_\">auto<\/span>()))\n  .<span class=\"hljs-title function_\">delivery<\/span>(<span class=\"hljs-title function_\">format<\/span>(<span class=\"hljs-title function_\">auto<\/span>()));<\/code><\/pre><button class=\"api-x_c-button \n        api-x_c-copy-button \n         \n        api-x_c-sdk-snippets__copy-button\n      \"><svg class=\"api-x_c-copy-button__icon api-x_c-copy-button__checkmark is-hidden\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" class=\"api-x_c-copy-button__icon api-x_c-copy-button__copy-icon \"><path d=\"M16,1 L4,1 C2.9,1 2,1.9 2,3 L2,17 L4,17 L4,3 L16,3 L16,1 Z M19,5 L8,5 C6.9,5 6,5.9 6,7 L6,21 C6,22.1 6.9,23 8,23 L19,23 C20.1,23 21,22.1 21,21 L21,7 C21,5.9 20.1,5 19,5 Z M19,21 L8,21 L8,7 L19,7 L19,21 Z\" fill=\"currentColor\"><\/path><\/svg><span class=\"api-x_u-visually-hidden\">Copy code to clipboard<\/span><\/button><span class=\"api-x_u-visually-hidden\" aria-live=\"polite\"><\/span><\/div><div aria-labelledby=\"P-2864365433-Vue.js-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-sdk-snippets__tab-panel\n              \n            \"><pre class=\"api-x_c-sdk-snippets__pre\"><code class=\"api-x_c-sdk-snippets__code\"><span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-title class_\">CloudinaryImage<\/span>(<span class=\"hljs-string\">\"hiking_dog_mountain.jpg\"<\/span>)\n  .<span class=\"hljs-title function_\">resize<\/span>(\n    <span class=\"hljs-title function_\">fill<\/span>()\n      .<span class=\"hljs-title function_\">width<\/span>(<span class=\"hljs-number\">433<\/span>)\n      .<span class=\"hljs-title function_\">aspectRatio<\/span>(<span class=\"hljs-number\">0.5<\/span>)\n      .<span class=\"hljs-title function_\">gravity<\/span>(<span class=\"hljs-title function_\">autoGravity<\/span>())\n  )\n  .<span class=\"hljs-title function_\">delivery<\/span>(<span class=\"hljs-title function_\">quality<\/span>(<span class=\"hljs-title function_\">auto<\/span>()))\n  .<span class=\"hljs-title function_\">delivery<\/span>(<span class=\"hljs-title function_\">format<\/span>(<span class=\"hljs-title function_\">auto<\/span>()));<\/code><\/pre><button class=\"api-x_c-button \n        api-x_c-copy-button \n         \n        api-x_c-sdk-snippets__copy-button\n      \"><svg class=\"api-x_c-copy-button__icon api-x_c-copy-button__checkmark is-hidden\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" class=\"api-x_c-copy-button__icon api-x_c-copy-button__copy-icon \"><path d=\"M16,1 L4,1 C2.9,1 2,1.9 2,3 L2,17 L4,17 L4,3 L16,3 L16,1 Z M19,5 L8,5 C6.9,5 6,5.9 6,7 L6,21 C6,22.1 6.9,23 8,23 L19,23 C20.1,23 21,22.1 21,21 L21,7 C21,5.9 20.1,5 19,5 Z M19,21 L8,21 L8,7 L19,7 L19,21 Z\" fill=\"currentColor\"><\/path><\/svg><span class=\"api-x_u-visually-hidden\">Copy code to clipboard<\/span><\/button><span class=\"api-x_u-visually-hidden\" aria-live=\"polite\"><\/span><\/div><div aria-labelledby=\"P-2864365433-Angular-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-sdk-snippets__tab-panel\n              \n            \"><pre class=\"api-x_c-sdk-snippets__pre\"><code class=\"api-x_c-sdk-snippets__code\"><span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-title class_\">CloudinaryImage<\/span>(<span class=\"hljs-string\">\"hiking_dog_mountain.jpg\"<\/span>)\n  .<span class=\"hljs-title function_\">resize<\/span>(\n    <span class=\"hljs-title function_\">fill<\/span>()\n      .<span class=\"hljs-title function_\">width<\/span>(<span class=\"hljs-number\">433<\/span>)\n      .<span class=\"hljs-title function_\">aspectRatio<\/span>(<span class=\"hljs-number\">0.5<\/span>)\n      .<span class=\"hljs-title function_\">gravity<\/span>(<span class=\"hljs-title function_\">autoGravity<\/span>())\n  )\n  .<span class=\"hljs-title function_\">delivery<\/span>(<span class=\"hljs-title function_\">quality<\/span>(<span class=\"hljs-title function_\">auto<\/span>()))\n  .<span class=\"hljs-title function_\">delivery<\/span>(<span class=\"hljs-title function_\">format<\/span>(<span class=\"hljs-title function_\">auto<\/span>()));<\/code><\/pre><button class=\"api-x_c-button \n        api-x_c-copy-button \n         \n        api-x_c-sdk-snippets__copy-button\n      \"><svg class=\"api-x_c-copy-button__icon api-x_c-copy-button__checkmark is-hidden\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" class=\"api-x_c-copy-button__icon api-x_c-copy-button__copy-icon \"><path d=\"M16,1 L4,1 C2.9,1 2,1.9 2,3 L2,17 L4,17 L4,3 L16,3 L16,1 Z M19,5 L8,5 C6.9,5 6,5.9 6,7 L6,21 C6,22.1 6.9,23 8,23 L19,23 C20.1,23 21,22.1 21,21 L21,7 C21,5.9 20.1,5 19,5 Z M19,21 L8,21 L8,7 L19,7 L19,21 Z\" fill=\"currentColor\"><\/path><\/svg><span class=\"api-x_u-visually-hidden\">Copy code to clipboard<\/span><\/button><span class=\"api-x_u-visually-hidden\" aria-live=\"polite\"><\/span><\/div><div aria-labelledby=\"P-2864365433-JS-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-sdk-snippets__tab-panel\n              \n            \"><pre class=\"api-x_c-sdk-snippets__pre\"><code class=\"api-x_c-sdk-snippets__code\"><span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-title class_\">CloudinaryImage<\/span>(<span class=\"hljs-string\">\"hiking_dog_mountain.jpg\"<\/span>)\n  .<span class=\"hljs-title function_\">resize<\/span>(\n    <span class=\"hljs-title function_\">fill<\/span>()\n      .<span class=\"hljs-title function_\">width<\/span>(<span class=\"hljs-number\">433<\/span>)\n      .<span class=\"hljs-title function_\">aspectRatio<\/span>(<span class=\"hljs-number\">0.5<\/span>)\n      .<span class=\"hljs-title function_\">gravity<\/span>(<span class=\"hljs-title function_\">autoGravity<\/span>())\n  )\n  .<span class=\"hljs-title function_\">delivery<\/span>(<span class=\"hljs-title function_\">quality<\/span>(<span class=\"hljs-title function_\">auto<\/span>()))\n  .<span class=\"hljs-title function_\">delivery<\/span>(<span class=\"hljs-title function_\">format<\/span>(<span class=\"hljs-title function_\">auto<\/span>()));<\/code><\/pre><button class=\"api-x_c-button \n        api-x_c-copy-button \n         \n        api-x_c-sdk-snippets__copy-button\n      \"><svg class=\"api-x_c-copy-button__icon api-x_c-copy-button__checkmark is-hidden\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" class=\"api-x_c-copy-button__icon api-x_c-copy-button__copy-icon \"><path d=\"M16,1 L4,1 C2.9,1 2,1.9 2,3 L2,17 L4,17 L4,3 L16,3 L16,1 Z M19,5 L8,5 C6.9,5 6,5.9 6,7 L6,21 C6,22.1 6.9,23 8,23 L19,23 C20.1,23 21,22.1 21,21 L21,7 C21,5.9 20.1,5 19,5 Z M19,21 L8,21 L8,7 L19,7 L19,21 Z\" fill=\"currentColor\"><\/path><\/svg><span class=\"api-x_u-visually-hidden\">Copy code to clipboard<\/span><\/button><span class=\"api-x_u-visually-hidden\" aria-live=\"polite\"><\/span><\/div><div aria-labelledby=\"P-2864365433-Python-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-sdk-snippets__tab-panel\n              \n            \"><pre class=\"api-x_c-sdk-snippets__pre\"><code class=\"api-x_c-sdk-snippets__code\">CloudinaryImage(<span class=\"hljs-string\">\"hiking_dog_mountain.jpg\"<\/span>).image(transformation=[\n  {<span class=\"hljs-string\">'aspect_ratio'<\/span>: <span class=\"hljs-string\">\"0.5\"<\/span>, <span class=\"hljs-string\">'gravity'<\/span>: <span class=\"hljs-string\">\"auto\"<\/span>, <span class=\"hljs-string\">'width'<\/span>: <span class=\"hljs-number\">433<\/span>, <span class=\"hljs-string\">'crop'<\/span>: <span class=\"hljs-string\">\"fill\"<\/span>},\n  {<span class=\"hljs-string\">'quality'<\/span>: <span class=\"hljs-string\">\"auto\"<\/span>},\n  {<span class=\"hljs-string\">'fetch_format'<\/span>: <span class=\"hljs-string\">\"auto\"<\/span>}\n  ])<\/code><\/pre><button class=\"api-x_c-button \n        api-x_c-copy-button \n         \n        api-x_c-sdk-snippets__copy-button\n      \"><svg class=\"api-x_c-copy-button__icon api-x_c-copy-button__checkmark is-hidden\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" class=\"api-x_c-copy-button__icon api-x_c-copy-button__copy-icon \"><path d=\"M16,1 L4,1 C2.9,1 2,1.9 2,3 L2,17 L4,17 L4,3 L16,3 L16,1 Z M19,5 L8,5 C6.9,5 6,5.9 6,7 L6,21 C6,22.1 6.9,23 8,23 L19,23 C20.1,23 21,22.1 21,21 L21,7 C21,5.9 20.1,5 19,5 Z M19,21 L8,21 L8,7 L19,7 L19,21 Z\" fill=\"currentColor\"><\/path><\/svg><span class=\"api-x_u-visually-hidden\">Copy code to clipboard<\/span><\/button><span class=\"api-x_u-visually-hidden\" aria-live=\"polite\"><\/span><\/div><div aria-labelledby=\"P-2864365433-PHP-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-sdk-snippets__tab-panel\n              \n            \"><pre class=\"api-x_c-sdk-snippets__pre\"><code class=\"api-x_c-sdk-snippets__code\">(<span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-title class_\">ImageTag<\/span>(<span class=\"hljs-string\">'hiking_dog_mountain.jpg'<\/span>))\n\t-&gt;<span class=\"hljs-title function_ invoke__\">resize<\/span>(<span class=\"hljs-title class_\">Resize<\/span>::<span class=\"hljs-title function_ invoke__\">fill<\/span>()-&gt;<span class=\"hljs-title function_ invoke__\">width<\/span>(<span class=\"hljs-number\">433<\/span>)\n-&gt;<span class=\"hljs-title function_ invoke__\">aspectRatio<\/span>(<span class=\"hljs-number\">0.5<\/span>)\n\t-&gt;<span class=\"hljs-title function_ invoke__\">gravity<\/span>(\n\t<span class=\"hljs-title class_\">Gravity<\/span>::<span class=\"hljs-title function_ invoke__\">autoGravity<\/span>())\n\t)\n\t-&gt;<span class=\"hljs-title function_ invoke__\">delivery<\/span>(<span class=\"hljs-title class_\">Delivery<\/span>::<span class=\"hljs-title function_ invoke__\">quality<\/span>(\n\t<span class=\"hljs-title class_\">Quality<\/span>::<span class=\"hljs-title function_ invoke__\">auto<\/span>()))\n\t-&gt;<span class=\"hljs-title function_ invoke__\">delivery<\/span>(<span class=\"hljs-title class_\">Delivery<\/span>::<span class=\"hljs-title function_ invoke__\">format<\/span>(\n\t<span class=\"hljs-title class_\">Format<\/span>::<span class=\"hljs-title function_ invoke__\">auto<\/span>()));<\/code><\/pre><button class=\"api-x_c-button \n        api-x_c-copy-button \n         \n        api-x_c-sdk-snippets__copy-button\n      \"><svg class=\"api-x_c-copy-button__icon api-x_c-copy-button__checkmark is-hidden\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" class=\"api-x_c-copy-button__icon api-x_c-copy-button__copy-icon \"><path d=\"M16,1 L4,1 C2.9,1 2,1.9 2,3 L2,17 L4,17 L4,3 L16,3 L16,1 Z M19,5 L8,5 C6.9,5 6,5.9 6,7 L6,21 C6,22.1 6.9,23 8,23 L19,23 C20.1,23 21,22.1 21,21 L21,7 C21,5.9 20.1,5 19,5 Z M19,21 L8,21 L8,7 L19,7 L19,21 Z\" fill=\"currentColor\"><\/path><\/svg><span class=\"api-x_u-visually-hidden\">Copy code to clipboard<\/span><\/button><span class=\"api-x_u-visually-hidden\" aria-live=\"polite\"><\/span><\/div><div aria-labelledby=\"P-2864365433-Java-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-sdk-snippets__tab-panel\n              \n            \"><pre class=\"api-x_c-sdk-snippets__pre\"><code class=\"api-x_c-sdk-snippets__code\">cloudinary.url().transformation(<span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-title class_\">Transformation<\/span>()\n  .aspectRatio(<span class=\"hljs-string\">\"0.5\"<\/span>).gravity(<span class=\"hljs-string\">\"auto\"<\/span>).width(<span class=\"hljs-number\">433<\/span>).crop(<span class=\"hljs-string\">\"fill\"<\/span>).chain()\n  .quality(<span class=\"hljs-string\">\"auto\"<\/span>).chain()\n  .fetchFormat(<span class=\"hljs-string\">\"auto\"<\/span>)).imageTag(<span class=\"hljs-string\">\"hiking_dog_mountain.jpg\"<\/span>);<\/code><\/pre><button class=\"api-x_c-button \n        api-x_c-copy-button \n         \n        api-x_c-sdk-snippets__copy-button\n      \"><svg class=\"api-x_c-copy-button__icon api-x_c-copy-button__checkmark is-hidden\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" class=\"api-x_c-copy-button__icon api-x_c-copy-button__copy-icon \"><path d=\"M16,1 L4,1 C2.9,1 2,1.9 2,3 L2,17 L4,17 L4,3 L16,3 L16,1 Z M19,5 L8,5 C6.9,5 6,5.9 6,7 L6,21 C6,22.1 6.9,23 8,23 L19,23 C20.1,23 21,22.1 21,21 L21,7 C21,5.9 20.1,5 19,5 Z M19,21 L8,21 L8,7 L19,7 L19,21 Z\" fill=\"currentColor\"><\/path><\/svg><span class=\"api-x_u-visually-hidden\">Copy code to clipboard<\/span><\/button><span class=\"api-x_u-visually-hidden\" aria-live=\"polite\"><\/span><\/div><div aria-labelledby=\"P-2864365433-Ruby-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-sdk-snippets__tab-panel\n              \n            \"><pre class=\"api-x_c-sdk-snippets__pre\"><code class=\"api-x_c-sdk-snippets__code\">cl_image_tag(<span class=\"hljs-string\">\"hiking_dog_mountain.jpg\"<\/span>, <span class=\"hljs-symbol\">:transformation=&gt;<\/span>[\n  {<span class=\"hljs-symbol\">:aspect_ratio=&gt;<span class=\"hljs-string\">\"0.5\"<\/span><\/span>, <span class=\"hljs-symbol\">:gravity=&gt;<span class=\"hljs-string\">\"auto\"<\/span><\/span>, <span class=\"hljs-symbol\">:width=&gt;<\/span><span class=\"hljs-number\">433<\/span>, <span class=\"hljs-symbol\">:crop=&gt;<span class=\"hljs-string\">\"fill\"<\/span><\/span>},\n  {<span class=\"hljs-symbol\">:quality=&gt;<span class=\"hljs-string\">\"auto\"<\/span><\/span>},\n  {<span class=\"hljs-symbol\">:fetch_format=&gt;<\/span><span class=\"hljs-symbol\">:auto<\/span>}\n  ])<\/code><\/pre><button class=\"api-x_c-button \n        api-x_c-copy-button \n         \n        api-x_c-sdk-snippets__copy-button\n      \"><svg class=\"api-x_c-copy-button__icon api-x_c-copy-button__checkmark is-hidden\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" class=\"api-x_c-copy-button__icon api-x_c-copy-button__copy-icon \"><path d=\"M16,1 L4,1 C2.9,1 2,1.9 2,3 L2,17 L4,17 L4,3 L16,3 L16,1 Z M19,5 L8,5 C6.9,5 6,5.9 6,7 L6,21 C6,22.1 6.9,23 8,23 L19,23 C20.1,23 21,22.1 21,21 L21,7 C21,5.9 20.1,5 19,5 Z M19,21 L8,21 L8,7 L19,7 L19,21 Z\" fill=\"currentColor\"><\/path><\/svg><span class=\"api-x_u-visually-hidden\">Copy code to clipboard<\/span><\/button><span class=\"api-x_u-visually-hidden\" aria-live=\"polite\"><\/span><\/div><div aria-labelledby=\"P-2864365433-.NET-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-sdk-snippets__tab-panel\n              \n            \"><pre class=\"api-x_c-sdk-snippets__pre\"><code class=\"api-x_c-sdk-snippets__code\">cloudinary.Api.UrlImgUp.Transform(<span class=\"hljs-keyword\">new<\/span> Transformation()\n  .AspectRatio(<span class=\"hljs-string\">\"0.5\"<\/span>).Gravity(<span class=\"hljs-string\">\"auto\"<\/span>).Width(<span class=\"hljs-number\">433<\/span>).Crop(<span class=\"hljs-string\">\"fill\"<\/span>).Chain()\n  .Quality(<span class=\"hljs-string\">\"auto\"<\/span>).Chain()\n  .FetchFormat(<span class=\"hljs-string\">\"auto\"<\/span>)).BuildImageTag(<span class=\"hljs-string\">\"hiking_dog_mountain.jpg\"<\/span>)<\/code><\/pre><button class=\"api-x_c-button \n        api-x_c-copy-button \n         \n        api-x_c-sdk-snippets__copy-button\n      \"><svg class=\"api-x_c-copy-button__icon api-x_c-copy-button__checkmark is-hidden\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" class=\"api-x_c-copy-button__icon api-x_c-copy-button__copy-icon \"><path d=\"M16,1 L4,1 C2.9,1 2,1.9 2,3 L2,17 L4,17 L4,3 L16,3 L16,1 Z M19,5 L8,5 C6.9,5 6,5.9 6,7 L6,21 C6,22.1 6.9,23 8,23 L19,23 C20.1,23 21,22.1 21,21 L21,7 C21,5.9 20.1,5 19,5 Z M19,21 L8,21 L8,7 L19,7 L19,21 Z\" fill=\"currentColor\"><\/path><\/svg><span class=\"api-x_u-visually-hidden\">Copy code to clipboard<\/span><\/button><span class=\"api-x_u-visually-hidden\" aria-live=\"polite\"><\/span><\/div><div aria-labelledby=\"P-2864365433-Dart-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-sdk-snippets__tab-panel\n              \n            \"><pre class=\"api-x_c-sdk-snippets__pre\"><code class=\"api-x_c-sdk-snippets__code\">cloudinary.image(<span class=\"hljs-string\">'hiking_dog_mountain.jpg'<\/span>).transformation(Transformation()\n\t.resize(Resize.fill().width(<span class=\"hljs-number\">433<\/span>)\n.aspectRatio(<span class=\"hljs-number\">0.5<\/span>)\n\t.gravity(\n\tGravity.autoGravity())\n\t)\n\t.delivery(Delivery.quality(\n\tQuality.auto()))\n\t.delivery(Delivery.format(\n\tFormat.auto())));<\/code><\/pre><button class=\"api-x_c-button \n        api-x_c-copy-button \n         \n        api-x_c-sdk-snippets__copy-button\n      \"><svg class=\"api-x_c-copy-button__icon api-x_c-copy-button__checkmark is-hidden\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" class=\"api-x_c-copy-button__icon api-x_c-copy-button__copy-icon \"><path d=\"M16,1 L4,1 C2.9,1 2,1.9 2,3 L2,17 L4,17 L4,3 L16,3 L16,1 Z M19,5 L8,5 C6.9,5 6,5.9 6,7 L6,21 C6,22.1 6.9,23 8,23 L19,23 C20.1,23 21,22.1 21,21 L21,7 C21,5.9 20.1,5 19,5 Z M19,21 L8,21 L8,7 L19,7 L19,21 Z\" fill=\"currentColor\"><\/path><\/svg><span class=\"api-x_u-visually-hidden\">Copy code to clipboard<\/span><\/button><span class=\"api-x_u-visually-hidden\" aria-live=\"polite\"><\/span><\/div><div aria-labelledby=\"P-2864365433-iOS-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-sdk-snippets__tab-panel\n              \n            \"><pre class=\"api-x_c-sdk-snippets__pre\"><code class=\"api-x_c-sdk-snippets__code\">imageView.cldSetImage(cloudinary.createUrl().setTransformation(<span class=\"hljs-type\">CLDTransformation<\/span>()\n  .setAspectRatio(<span class=\"hljs-string\">\"0.5\"<\/span>).setGravity(<span class=\"hljs-string\">\"auto\"<\/span>).setWidth(<span class=\"hljs-number\">433<\/span>).setCrop(<span class=\"hljs-string\">\"fill\"<\/span>).chain()\n  .setQuality(<span class=\"hljs-string\">\"auto\"<\/span>).chain()\n  .setFetchFormat(<span class=\"hljs-string\">\"auto\"<\/span>)).generate(<span class=\"hljs-string\">\"hiking_dog_mountain.jpg\"<\/span>)<span class=\"hljs-operator\">!<\/span>, cloudinary: cloudinary)<\/code><\/pre><button class=\"api-x_c-button \n        api-x_c-copy-button \n         \n        api-x_c-sdk-snippets__copy-button\n      \"><svg class=\"api-x_c-copy-button__icon api-x_c-copy-button__checkmark is-hidden\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" class=\"api-x_c-copy-button__icon api-x_c-copy-button__copy-icon \"><path d=\"M16,1 L4,1 C2.9,1 2,1.9 2,3 L2,17 L4,17 L4,3 L16,3 L16,1 Z M19,5 L8,5 C6.9,5 6,5.9 6,7 L6,21 C6,22.1 6.9,23 8,23 L19,23 C20.1,23 21,22.1 21,21 L21,7 C21,5.9 20.1,5 19,5 Z M19,21 L8,21 L8,7 L19,7 L19,21 Z\" fill=\"currentColor\"><\/path><\/svg><span class=\"api-x_u-visually-hidden\">Copy code to clipboard<\/span><\/button><span class=\"api-x_u-visually-hidden\" aria-live=\"polite\"><\/span><\/div><div aria-labelledby=\"P-2864365433-Android-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-sdk-snippets__tab-panel\n              \n            \"><pre class=\"api-x_c-sdk-snippets__pre\"><code class=\"api-x_c-sdk-snippets__code\">MediaManager.get().url().transformation(<span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-title class_\">Transformation<\/span>()\n  .aspectRatio(<span class=\"hljs-string\">\"0.5\"<\/span>).gravity(<span class=\"hljs-string\">\"auto\"<\/span>).width(<span class=\"hljs-number\">433<\/span>).crop(<span class=\"hljs-string\">\"fill\"<\/span>).chain()\n  .quality(<span class=\"hljs-string\">\"auto\"<\/span>).chain()\n  .fetchFormat(<span class=\"hljs-string\">\"auto\"<\/span>)).generate(<span class=\"hljs-string\">\"hiking_dog_mountain.jpg\"<\/span>);<\/code><\/pre><button class=\"api-x_c-button \n        api-x_c-copy-button \n         \n        api-x_c-sdk-snippets__copy-button\n      \"><svg class=\"api-x_c-copy-button__icon api-x_c-copy-button__checkmark is-hidden\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" class=\"api-x_c-copy-button__icon api-x_c-copy-button__copy-icon \"><path d=\"M16,1 L4,1 C2.9,1 2,1.9 2,3 L2,17 L4,17 L4,3 L16,3 L16,1 Z M19,5 L8,5 C6.9,5 6,5.9 6,7 L6,21 C6,22.1 6.9,23 8,23 L19,23 C20.1,23 21,22.1 21,21 L21,7 C21,5.9 20.1,5 19,5 Z M19,21 L8,21 L8,7 L19,7 L19,21 Z\" fill=\"currentColor\"><\/path><\/svg><span class=\"api-x_u-visually-hidden\">Copy code to clipboard<\/span><\/button><span class=\"api-x_u-visually-hidden\" aria-live=\"polite\"><\/span><\/div><div aria-labelledby=\"P-2864365433-Flutter-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-sdk-snippets__tab-panel\n              \n            \"><pre class=\"api-x_c-sdk-snippets__pre\"><code class=\"api-x_c-sdk-snippets__code\">cloudinary.image(<span class=\"hljs-string\">'hiking_dog_mountain.jpg'<\/span>).transformation(Transformation()\n\t.resize(Resize.fill().width(<span class=\"hljs-number\">433<\/span>)\n.aspectRatio(<span class=\"hljs-number\">0.5<\/span>)\n\t.gravity(\n\tGravity.autoGravity())\n\t)\n\t.delivery(Delivery.quality(\n\tQuality.auto()))\n\t.delivery(Delivery.format(\n\tFormat.auto())));<\/code><\/pre><button class=\"api-x_c-button \n        api-x_c-copy-button \n         \n        api-x_c-sdk-snippets__copy-button\n      \"><svg class=\"api-x_c-copy-button__icon api-x_c-copy-button__checkmark is-hidden\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" class=\"api-x_c-copy-button__icon api-x_c-copy-button__copy-icon \"><path d=\"M16,1 L4,1 C2.9,1 2,1.9 2,3 L2,17 L4,17 L4,3 L16,3 L16,1 Z M19,5 L8,5 C6.9,5 6,5.9 6,7 L6,21 C6,22.1 6.9,23 8,23 L19,23 C20.1,23 21,22.1 21,21 L21,7 C21,5.9 20.1,5 19,5 Z M19,21 L8,21 L8,7 L19,7 L19,21 Z\" fill=\"currentColor\"><\/path><\/svg><span class=\"api-x_u-visually-hidden\">Copy code to clipboard<\/span><\/button><span class=\"api-x_u-visually-hidden\" aria-live=\"polite\"><\/span><\/div><div aria-labelledby=\"P-2864365433-Kotlin-tab-button\" role=\"tabpanel\" class=\"\n              api-x_c-tabs__tab-panel\n              api-x_c-sdk-snippets__tab-panel\n              \n            \"><pre class=\"api-x_c-sdk-snippets__pre\"><code class=\"api-x_c-sdk-snippets__code\">cloudinary.image {\n\tpublicId(<span class=\"hljs-string\">\"hiking_dog_mountain.jpg\"<\/span>)\n\t resize(Resize.fill() { width(<span class=\"hljs-number\">433<\/span>)\n aspectRatio(<span class=\"hljs-number\">0.5F<\/span>)\n\t gravity(\n\tGravity.autoGravity())\n\t })\n\t delivery(Delivery.quality(\n\tQuality.auto()))\n\t delivery(Delivery.format(\n\tFormat.auto())) \n}.generate()<\/code><\/pre><button class=\"api-x_c-button \n        api-x_c-copy-button \n         \n        api-x_c-sdk-snippets__copy-button\n      \"><svg class=\"api-x_c-copy-button__icon api-x_c-copy-button__checkmark is-hidden\" aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><polyline points=\"2.5,10 8,15 14,4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3.5\"><\/polyline><\/svg><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" class=\"api-x_c-copy-button__icon api-x_c-copy-button__copy-icon \"><path d=\"M16,1 L4,1 C2.9,1 2,1.9 2,3 L2,17 L4,17 L4,3 L16,3 L16,1 Z M19,5 L8,5 C6.9,5 6,5.9 6,7 L6,21 C6,22.1 6.9,23 8,23 L19,23 C20.1,23 21,22.1 21,21 L21,7 C21,5.9 20.1,5 19,5 Z M19,21 L8,21 L8,7 L19,7 L19,21 Z\" fill=\"currentColor\"><\/path><\/svg><span class=\"api-x_u-visually-hidden\">Copy code to clipboard<\/span><\/button><span class=\"api-x_u-visually-hidden\" aria-live=\"polite\"><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n  <\/div>\n<\/figure>\n\n\n\n<p>We recently worked with <a href=\"https:\/\/cloudinary.com\/\" data-type=\"URL\" data-id=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> to design <a href=\"https:\/\/cloudinary.com\/developers\">a new page for their website showcasing their extensive and powerful APIs to developers<\/a>. Cloudinary&#8217;s APIs make manipulating and optimizing images and videos easy, but it can be challenging to quickly demonstrate such a wide range of features.<\/p>\n\n\n\n<p>We included an interactive demo to explain and showcase Cloudinary&#8217;s APIs while encouraging exploration, discovery, and engagement.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>The API Explorer demo has been a big help in explaining our APIs to developers. It increased engagement over 400% and improved the quality of our conversions.<\/p>\n<cite>Sanjay Sarathy, Vice President of Marketing<\/cite><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">The Design Process<\/h2>\n\n\n\n<p>We worked closely with Cloudinary to design and prototype a compelling demo. We performed initial discovery to better understand their product and positioning, brainstormed concepts and sketched potential ideas.<\/p>\n\n\n\n<p>From there, we began prototyping in the browser to see how our ideas would work in the real world. For such an interactive experience, we needed more than a static mockup. Prototyping ideas in code allowed us to quickly understand what was working and what wasn&#8217;t. One of our earliest prototypes focused on the breadth of Cloudinary&#8217;s capabilities:<\/p>\n\n\n\n<video src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/05\/wip-demo2.mp4\" controls=\"\" muted=\"\" style=\"margin-inline: auto;\" loading=\"lazy\" autoplay=\"\" loop=\"\" playsinline=\"\" width=\"308\" height=\"674\"><\/video>\n\n\n\n<p>But as we tested the prototype, we realized it wasn&#8217;t quite right. It showed off a wide range of Cloudinary capabilities, but it wasn&#8217;t clear how they help developers solve everyday problems. An interactive prototype allowed us to realize this quickly and pivot to a new design focusing on four common use cases:<\/p>\n\n\n\n<figure>\n  <video src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/05\/api-explorer-finished.mp4\" controls=\"\" muted=\"\" style=\"margin-inline: auto;\" loading=\"lazy\" autoplay=\"\" loop=\"\" playsinline=\"\" width=\"1128\" height=\"589\"><\/video>\n  <figcaption>The final prototype focusing on four common use cases.<\/figcaption>\n<\/figure>\n\n\n\n<p>Now we were on the right track! Visitors could swiftly find the right solution to their specific problem. Our friends at Cloudinary agreed\u2026 in fact, they liked it so much that they didn&#8217;t just want to use it on the Developers page. They wanted to be able to use it on other pages as well as on their separate documentation site!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Development Process<\/h2>\n\n\n\n<p>We needed to step back and determine how our final product could be used in these different contexts. For this type of complex, interactive experience, we wanted to be able to use a modern, component-based JavaScript framework. But we needed to be able to embed this in their WordPress (PHP) marketing site, as well as a statically-rendered Ruby documentation site.<\/p>\n\n\n\n<p>We had a few important requirements for the final deliverable. It had to be:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Possible to embed anywhere, regardless of tech stack<\/li>\n\n\n\n<li>Performant: quick to load and snappy in the browser<\/li>\n\n\n\n<li>Accessible to everyone<\/li>\n\n\n\n<li>Easy to maintain and extend<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile has-gray-lighter-background-color has-background\"><figure class=\"wp-block-media-text__media\"><img width=\"1024\" height=\"775\" src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-28-at-09-33-40-Cloudinary-Blog-1024x775.png\" alt=\"A screenshot of the top of the Cloudinary blog hom page showing a heading saying &quot;Featured Cloudinary Blog Posts&quot; and 5 posts.\" class=\"wp-image-7008 size-full\" srcset=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-28-at-09-33-40-Cloudinary-Blog-1024x775.png 1024w, https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-28-at-09-33-40-Cloudinary-Blog-300x227.png 300w, https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-28-at-09-33-40-Cloudinary-Blog-768x581.png 768w, https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-28-at-09-33-40-Cloudinary-Blog-1536x1163.png 1536w, https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-28-at-09-33-40-Cloudinary-Blog.png 1749w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>We&#8217;d worked with Cloudinary to rebuild <a href=\"https:\/\/cloudinary.com\/blog\/\">their blog<\/a>, and we knew that <a href=\"https:\/\/cloudinary.com\/blog\/improving-performance-cloudinary-blog\">performance was a top priority for them<\/a>. We were able to leverage our <a href=\"https:\/\/cloudfour.com\/thinks\/watch-out-for-layout-shifts-with-ch-units\/\">knowledge from this previous work<\/a> to help them achieve their goals for this demo.<\/p>\n<\/div><\/div>\n\n\n\n<p>After discussion with our Cloudinary stakeholders and their technical team, we landed on a three-pronged approach:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Preact: <\/strong>We built our components using Preact, a &#8220;fast 3kB alternative to React with the same modern API&#8221; that was familiar to the Cloudinary development team.<\/li>\n\n\n\n<li><strong>Server-Side-Rendering: <\/strong>We built out the ability to render these components server-side. This allowed the components to load and display quickly without having to wait on JavaScript.<\/li>\n\n\n\n<li><strong>Netlify Functions: <\/strong>We created custom API endpoints to server-side render the experience. This allowed different Cloudinary websites and tech stacks to easily fetch, cache, and embed the code used to power the experience.<\/li>\n<\/ul>\n\n\n\n<p>With our goals in mind, and a plan to achieve them, we got to work. We built out a set of reusable Preact components and API endpoints to power the demo experience:<\/p>\n\n\n\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure>\n  <div class=\"image-collage\">\n  \n  <video src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/05\/asset-compare-animated.mp4\" loading=\"lazy\" autoplay=\"\" controls=\"\" muted=\"\" loop=\"\" playsinline=\"\" style=\"--rows: 7;\" width=\"950\" height=\"641\"><\/video>\n  \n  <img src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-27-at-16-34-42-Experiences-_-Personalization-Demo-Basic-Usage-%E2%8B%85-Storybook.png\" loading=\"lazy\" alt=\"A screenshot of the personalization use case demo: It shows two pictures of a red car. The picture on the left is a regular photograph. The picture on the right has had the background replaced with a dark geometric pattern. It also has a star rating, price and 'New' badge. Under the photos, controls are shown.\" style=\"--rows: 4;\" width=\"949\" height=\"383\">\n  \n  <img src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-27-at-16-33-03-Experiences-_-WIP-Cropping-Demo-Basic-Usage-%E2%8B%85-Storybook.png\" loading=\"lazy\" alt=\"A photo of a woman and a dog sitting in the mountains. A blue cropping window is overlaid on the photo framing them.\" style=\"--rows: 7;\" width=\"950\" height=\"645\">\n  \n  <img src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-27-at-16-32-10-Experiences-_-WIP-Multi-Use-Case-Demo-Basic-Usage-%E2%8B%85-Storybook.png\" loading=\"lazy\" alt=\"Three tabs with icons, labeled Performance Optimization, Image Personalization, and AI-Generated Video Previews\" style=\"--rows: 4;--columns: 2;\" width=\"950\" height=\"126\">\n  \n  <img src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-27-at-16-32-00-Experiences-_-WIP-Multi-Use-Case-Demo-Basic-Usage-%E2%8B%85-Storybook.png\" loading=\"lazy\" alt=\"A tooltip explaining information about optimized file sizes.\" style=\"--rows: 6;\" width=\"506\" height=\"270\">\n  \n  <img src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-27-at-16-30-46-Components-_-Toggle-Button-Basic-Usage-%E2%8B%85-Storybook.png\" loading=\"lazy\" alt=\"Two toggle buttons labeled Option 1 and Option 2. One is toggled on while the other is toggled off.\" style=\"--rows: 2;\" width=\"580\" height=\"94\">\n  \n  <img src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-27-at-16-30-16-Components-_-SDK-Snippets-Basic-Usage-%E2%8B%85-Storybook.png\" loading=\"lazy\" alt=\"A set of labeled tabs showing code snippets for different programming languages and frameworks.\" style=\"--rows: 9;--columns: 2;\" width=\"950\" height=\"210\">\n  \n  <img src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-27-at-16-29-19-Components-_-Media-Selector-Basic-Usage-%E2%8B%85-Storybook.png\" loading=\"lazy\" alt=\"An interface showing four images with one selected\" style=\"--rows: 4;\" width=\"950\" height=\"180\">\n\n  <img src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-27-at-16-26-49-Components-_-Button-Basic-Usage-%E2%8B%85-Storybook.png\" loading=\"lazy\" alt=\"A button labeled Click Me\" style=\"--rows: 6;\" width=\"232\" height=\"120\"> \n\n  <video src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/05\/dog-crop.mp4\" autoplay=\"\" controls=\"\" muted=\"\" loop=\"\" loading=\"lazy\" playsinline=\"\" style=\"--rows: 7;\" width=\"568\" height=\"324\"><\/video> \n\n  <img src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-27-at-16-26-34-Components-_-Asset-Stat-List-Basic-Usage-%E2%8B%85-Storybook.png\" loading=\"lazy\" alt=\"A set of stats like 'Duration: 1s' and 'File Size: 30kb' on top of a patterned background\" style=\"--rows: 4;\" width=\"950\" height=\"319\">\n\n  <video src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/05\/loader.mp4\" autoplay=\"\" controls=\"\" loop=\"\" muted=\"\" loading=\"lazy\" playsinline=\"\" style=\"--rows: 7;\" width=\"570\" height=\"376\"><\/video> \n\n  <video src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/05\/circle-meter.mp4\" autoplay=\"\" controls=\"\" loop=\"\" muted=\"\" loading=\"lazy\" playsinline=\"\" style=\"--rows: 5;\" width=\"150\" height=\"150\"><\/video> \n  <\/div>\n\n  <figcaption>A handful of the Preact components we built to power the API Explorer demo.<\/figcaption>\n<\/figure>\n<\/div><\/div>\n\n\n\n<p>These modular components allowed us to quickly build out the different demo use cases. We&#8217;re also able to reuse these components to power other experiences with Cloudinary. <\/p>\n\n\n\n<script type=\"module\" src=\"https:\/\/unpkg.com\/@cloudfour\/image-compare\/dist\/index.min.js\"><\/script>\n\n<div class=\"wp-block-media-text is-stacked-on-mobile has-gray-lighter-background-color has-background\">\n  <figure class=\"wp-block-media-text__media\">\n    <image-compare label-text=\"Use the slider to control the visibility of the two images.\" style=\"--thumb-size: clamp(3em, 6vmin, 4em);\">\n      <img decoding=\"async\" slot=\"image-1\" alt=\"A friendly illustrated cloud character with eyes on a red-pink background.\" src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2021\/07\/example-image-1.svg\"><br>\n      <img decoding=\"async\" slot=\"image-2\" alt=\"A friendly illustrated cloud character with eyes surrounded by a variety of icons (including check marks, stars, code brackets, buttons, hearts, a checkbox, and many more) on a blue background.\" src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2021\/07\/example-image2.svg\"><br>\n    <\/image-compare>\n  <\/figure>\n  <div class=\"wp-block-media-text__content\">\n    <p>\n      This process was streamlined by building off of our previous work and\n      experience. For example, we leveraged\n      <a href=\"https:\/\/cloudfour.com\/thinks\/building-an-accessible-image-comparison-web-component\/\">an image comparison web component we\u2019d already built<\/a>\n      instead of starting from scratch.\n    <\/p>\n\n    <p>You can try the component right here! (It&#8217;s not a screenshot.)<\/p>\n  <\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">The Final Experience<\/h2>\n\n\n\n<p>The demo was a huge success. The final result is engaging, performant, responsive, and accessible. It was quickly integrated into Cloudinary&#8217;s site without any issues or downtime. Cloudinary even integrated the demo on additional pages we weren&#8217;t planning for, including other pages on their primary site and landing pages for targeted ad campaigns. It drastically increased engagement on the Developers page and helped customers understand Cloudinary&#8217;s APIs. <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Cloud Four is hands down the best agency I have ever worked with on any web project ever in my 25+ web career.<\/p>\n<cite>Daniel Divens, Former Director, Website Marketing<\/cite><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>We designed and developed a responsive, performant, and accessible demo to explain and showcase how Cloudinary helps developers solve common problems, increasing engagement over 400% on the page where it was embedded.<\/p>\n","protected":false},"author":19,"featured_media":7077,"parent":4265,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-6965","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/pages\/6965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/comments?post=6965"}],"version-history":[{"count":0,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/pages\/6965\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/pages\/4265"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/media\/7077"}],"wp:attachment":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/media?parent=6965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}