{"id":22165,"date":"2020-09-14T22:48:13","date_gmt":"2020-09-15T05:48:13","guid":{"rendered":"http:\/\/image_formats_getting_it_right"},"modified":"2026-02-06T12:38:56","modified_gmt":"2026-02-06T20:38:56","slug":"image_formats_getting_it_right","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right","title":{"rendered":"Image Formats: Getting it Right"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Image formats, which are standards for digital images, can be uncompressed, compressed, raster based, or vector based. You determine the DNA of your images with the formats you adopt, each of which offering different capabilities. For example, rasters generate images with pixels; vectors, with vectors or proportional formulas. PNGs can display logos without background; JPEGs always come with backgrounds. This article explains the main properties of the various image formats, including their basic concepts and pros and cons.<\/p>\n<p>By carefully selecting your image format, you can optimize performance, ensure compatibility with user devices, optimization for storage, compliance with delivery requirements, and optimum image quality.<\/p>\n<p>This is part of an extensive series of guides about <a href=\"https:\/\/cloudinary.com\/guides\/front-end-development\/front-end-development-the-complete-guide\">front-end development<\/a>.<\/p>\n<p>This article covers the following topics:<\/p>\n<ul>\n<li>\n<a href=\"#vs\">Raster Versus Vector<\/a>\n<\/li>\n<li>\n<a href=\"#traditional\">Traditional Image Formats<\/a>\n<\/li>\n<li>\n<a href=\"#svg\">Scalable Vector Graphics (SVG): Pros and Cons<\/a>\n<\/li>\n<li>\n<a href=\"#tiff\">Tagged Image File Format (TIFF): Pros and Cons<\/a>\n<\/li>\n<li>\n<a href=\"#png\">Portable Network Graphics (PNG): Pros and Cons<\/a>\n<\/li>\n<li>\n<a href=\"#gif\">Graphics Interchange Format (GIF): Pros and Cons<\/a>\n<\/li>\n<li>\n<a href=\"#jpeg\">Progressive and Nonprogressive JPEGs<\/a>\n<\/li>\n<li>\n<a href=\"#next\">Next-Generation Image Formats<\/a>\n<\/li>\n<li>\n<a href=\"#next-gen\">Other Next-Generation Image Formats<\/a>\n<\/li>\n<li>\n<a href=\"#cloudinary\">Automated Image-Format Conversion with Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"#resources\">Additional Resources<\/a>\n<\/li>\n<\/ul>\n<h2 id=\"vs\">Raster Versus Vector<\/h2>  \n<p><a href=\"https:\/\/cloudinary.com\/blog\/upscaling_raster_image_to_vector_graphic_conversions\">Raster and vector<\/a> are the two primary distinctions of image formats .<\/p>\n<h3>Raster Images<\/h3>\n<p>Rasters, which are collections of blocks or pixels that form an image, have defined resolutions, depending on the number of pixels. If <a href=\"https:\/\/cloudinary.com\/glossary\/raster-files\">Raster images<\/a> are stretched beyond the dimensions supported by their resolution, they lose quality and clarity because of insufficient pixels to naturally fill the dimension.<\/p>\n<h3>Vector Images<\/h3>\n<p>Vector images are made of vectors or proportional formulas that define the display of colors or shades. Because the display of vector images is not based on predefined pixel counts, you can scale those images to any size with no loss in clarity and quality.<\/p>\n<h2 id=\"traditional\">Traditional Image Formats<\/h2>\n<p>Even though image formats abound, those described in this article are the most common ones. The graphic below shows the formats in the raster and vector categories in order of popularity\u2014formats that are typically widely supported or that offer capabilities not available in other formats.\n<img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/Image-Formats-Secondary-Graphic.png\" alt=\"image formats\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"632\"\/><\/p>\n<h2 id=\"svg\">Scalable Vector Graphics (SVG): Pros and Cons<\/h2>\n<p>XML-defined Scalable Vector Graphics (SVGs), which tend to be lightweight, support animation and interactivity, hence ideal for websites.<\/p>\n<h3>Pros<\/h3>\n<ul>\n<li>Because SVGs are not size dependent, they can scale responsively and render equally well on all displays.<\/li>\n<li>Since SVGs are written in code, you can easily animate whole SVGs or parts of them.<\/li>\n<li>You can programmatically transform <a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/svg-format-features-common-uses-and-pros-cons-you-should-know\">SVG images<\/a> with JavaScript or CSS by editing their elements, classes, or tags.<\/li>\n<li>SVGs are compatible with popular editing tools, including Affinity, Sketch, and Photoshop.<\/li>\n<\/ul>\n<h3>Cons<\/h3>\n<ul>\n<li>SVGs cannot recreate photo-quality details and do not translate 3D scenes or objects well.<\/li>\n<li>Older browsers often do not support SVGs.<\/li>\n<li>A steep learning curve is involved to interpret and modify <a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/svg-format-features-common-uses-and-pros-cons-you-should-know\">SVG<\/a> code.<\/li>\n<\/ul>\n<h2 id=\"tiff\">Tagged Image File Format (TIFF): Pros and Cons<\/h2>\n<p>Tagged Image File Format (TIFF) images are rasters that are typically used to ensure compatibility between applications and internal file sharing. Apps that frequently leverage TIFF formats include those for desktop publishing and optical character recognition (OCR); also image editors, word processors, and scanners.<\/p>\n<h3>Pros<\/h3>\n<ul>\n<li>You can store TIFFs and their metadata in a single file, such as compressed JPEG and PackBits images, as well as metadata for applied compression, data arrangement, and headers.<\/li>\n<li>You can render TIFFs with any color coding, such as RGB full, Cyan Magenta Yellow Black (CMYK), or grayscale.<\/li>\n<li>You can store TIFF files as lossless images, ideal for master copies or archives.<\/li>\n<\/ul>\n<h3>Cons<\/h3>\n<ul>\n<li>TIFFs are large (typically 100 MB or more) and are generally not compressed.<\/li>\n<li>TIFFs\u2019 large size makes it more challenging to store and upload or serve files, which translates to slow page loads.<\/li>\n<li>TIFF is not supported by any browser.<\/li>\n<\/ul>\n<h2 id=\"png\">Portable Network Graphics (PNG): Pros and Cons<\/h2>\n<p>Portable Network Graphics (PNGs) are rasters with an open-source format, often replacing GIFs and JPEGs.<\/p>\n<h3>Pros<\/h3>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/the-developers-guide-to-png-formats-maximizing-impact-with-png-8-and-png-24\">PNGs<\/a> enable lossless compression, preserving the quality and metadata no matter how many times you encode or decode them.<\/li>\n<li>Because PNGs support a wide color depth, i.e., 24-bit RGB, 32-bit RGBA, and grayscale palettes, the images are ideal for photographs.\n*Transparency works even in compressed PNGs.<\/li>\n<\/ul>\n<h3>Cons<\/h3>\n<ul>\n<li>Due to their lossless compression, PNGs are larger than JPEGs.<\/li>\n<li>CMYK does not work in PNGs, making them not suitable for printing. However, unless you\u2019re selling images for printing, feel free to display PNGs on websites.<\/li>\n<\/ul>\n<h2 id=\"gif\">Graphics Interchange Format (GIF): Pros and Cons<\/h2>\n<p>You can create still images or animations with Graphics Interchange Format (GIF) images. As a rule, you generate only short animations with GIFs since their still-image quality lags behind the other alternatives.<\/p>\n<h3>Pros<\/h3>\n<ul>\n<li>GIF animations are smaller than those of other image formats. When deployed on websites, GIFs load fast and save bandwidth.<\/li>\n<li>GIFs support transparent backgrounds.<\/li>\n<li>GIFs\u2019 lossless-compression feature prevents quality loss.<\/li>\n<\/ul>\n<h3>Cons<\/h3>\n<ul>\n<li>GIFs only support a limited color palette (256 colors), which could produce an undesirable pixelated look for images and animations.<\/li>\n<li>You cannot edit coded GIF animation files. To incorporate changes, you must remake the entire image.<\/li>\n<li>GIF animations originate from multiple still images, rendering them individually. As a result, animations might look jerky or stilted. Also, poor Internet connections could cause stills to load slowly.<\/li>\n<li>GIF supports only binary transparency, hence no semitransparency or <a href=\"https:\/\/cloudinary.com\/glossary\/anti-aliasing\">anti-aliasing<\/a> around the edges between the opaque and transparent modes.<\/li>\n<\/ul>\n<h2 id=\"jpeg\">Progressive and Nonprogressive JPEGs<\/h2>\n<p>The Joint Photographic Experts Group (JPEG) format is probably the most well-known. JPEGs come in two types: <a href=\"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right\">progressive<\/a> and nonprogressive (or normal). Nonprogressive JPEGs were  developed first. When rendered, nonprogressive JPEGs load from top to bottom, meaning that, on slow connections, you see only part of the image until loading is complete.<\/p>\n<p>Progressive JPEGs, the newer version, deliver a better user experience when rendered because they start by loading the whole image at a lower resolution. As loading proceeds, the image becomes sharper.<\/p>\n<h3>Pros of Progressive JPEGs<\/h3>\n<ul>\n<li>Users are served full-image previews from the beginning.<\/li>\n<li>Progressive JPEGs tend to be smaller than nonprogressive ones due to more efficient compression.<\/li>\n<\/ul>\n<h3>Cons of Progressive JPEGs<\/h3>\n<ul>\n<li>It could be difficult to tell when progressive JPEGs have finished loading. Users might attribute that to poor site quality because of the blurry images.<\/li>\n<li>Progressive JPEGs\u2019 file-size benefits do not apply to small images, such as thumbnails. In those cases, <a href=\"https:\/\/cloudinary.com\/glossary\/progressive-rendering\">progressive rendering<\/a> isn\u2019t worth the trouble.<\/li>\n<li>Progressive JPEGs take more memory and CPU resources to encode and decode since they must scan images multiple times.<\/li>\n<\/ul>\n<p>For more details, see the article <a href=\"https:\/\/cloudinary.com\/blog\/progressive_jpegs_and_green_martians\"><em>Progressive JPEGs and Green Martians<\/em><\/a>.<\/p>\n<h2 id=\"next\">Next-Generation Image Formats<\/h2>\n<p>The advent of image and web technologies have led to the development of new or <a href=\"https:\/\/cloudinary.com\/glossary\/next-gen-formats\">next-generation formats<\/a>, which typically deliver better quality and compression than the traditional ones, resulting in lower bandwidth requirements and faster loading. Examples are <a href=\"https:\/\/cloudinary.com\/guides\/front-end-development\/webp-format-technology-pros-cons-and-alternatives\">WebP<\/a> and JPEG 2000.<\/p>\n<p>Another major factor that influences the adoption of next-generation formats is Google\u2019s preferential treatment of sites that use them. According to Google Lighthouse benchmarks, which is part of the search-ranking algorithm, sites with older-format images are assigned lower scores.<\/p>\n<h3>WebPs and Animated WebPs<\/h3>\n<p>WebP is a Google-created format that preserves image quality with a higher compression rate. Both lossy and lossless compressions work in WebPs, displaying well in most modern browsers.<\/p>\n<h4>Pros<\/h4>\n<ul>\n<li>WebPs tend to be significantly smaller than the traditional formats of comparable quality\u2014a benefit that applies to both lossless (compared to PNGs) and lossy (compared to JPEGs) files.<\/li>\n<li>WebPs support transparency, hence ideal for branding and logos.<\/li>\n<\/ul>\n<p>Additionally, a few special traits of animated WebPs trump the capabilities of GIFs, as follows:<\/p>\n<ul>\n<li>Animated WebPs support more colors: 24-bit RGB with an 8-bit channel compared to 8-bit color with a 1-bit channel.<\/li>\n<li>You can combine compression types in a single animation, which makes it easier to create animations from videos.<\/li>\n<li>Animated WebP sizes are 19-64% smaller than that of GIFs.<\/li>\n<\/ul>\n<h4>Cons<\/h4>\n<ul>\n<li>Decoding WebPs takes longer compared to other formats and is more CPU intensive.<\/li>\n<li>WebPs do not display in Internet Explorer, Safari, and older browsers.<\/li>\n<li>WordPress, one of the most popular site frameworks, does not natively support WebPs. You need a plugin to work with WebPs in WorldPress.<\/li>\n<\/ul>\n<p>WebP animations lag behind GIFs, which are almost universally supported, but that\u2019s by far not true for WebP. Adding WebP support to browsers requires additional libraries and decoders. That means more code in the browser and a greater risk of security attacks.<\/p>\n<h3>JPEG 2000<\/h3>\n<p>JPEG 2000 is an updated version of <a href=\"https:\/\/cloudinary.com\/tools\/compress-jpeg\">JPEG<\/a> with enhanced techniques for lossless compression. You can adopt JPEG 2000 for both images and videos.<\/p>\n<h4>Pros<\/h4>\n<ul>\n<li>JPEG 2000 supports progressive decoding for an improved user experience.<\/li>\n<li>Both lossy and lossless compressions work seamlessly in JPEG 2000 in a single code stream.<\/li>\n<li>Transparency is a JPEG 2000 feature.<\/li>\n<\/ul>\n<h3>Cons<\/h3>\n<ul>\n<li>JPEG 2000s are not backward compatible with JPEG, which means that you need two different decoders for the images of both formats<\/li>\n<li>Encoding JPEG 2000s is CPU and memory intensive, making that format a poor choice for older or low-resource devices.<\/li>\n<\/ul>\n<p>For more details, see the article <a href=\"https:\/\/cloudinary.com\/blog\/the_great_jpeg_2000_debate_analyzing_the_pros_and_cons_to_widespread_adoption\"><em>The Great JPEG 2000 Debate: Analyzing the Pros and Cons to Widespread Adoption<\/em><\/a>.<\/p>\n<h2 id=\"next-gen\">Other Next-Generation Image Formats<\/h2>\n<p>A few other formats are available and worth considering for your images.<\/p>\n<h3>AV1 Image File Format (AVIF)<\/h3>\n<p>The <a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/avif-format-a-next-gen-image-format-to-rule-them-all\">AV1 Image File Format (AVIF)<\/a> is the image version of the popular video-file format AV1, an open-source format that serves as an alternative of the proprietary High Efficiency Video Coding (HEVC) format. Compatible with <a href=\"https:\/\/cloudinary.com\/glossary\/hdr\">high-dynamic-range imaging<\/a> (HDR), AVIF supports highly efficient lossy and lossless compressions, resulting in files that are up to 10 times smaller than JPEGs.<\/p>\n<p>AVIF supports up to 10 bits of color depth and monochrome channels, viable for both images and videos. A downside is that AVIF is not widely supported. Currently, it works or will soon work on Chrome and Firefox browsers.<\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>Cloudinary supports the AVIF format, which means all you need to do is add <code>f_avif<\/code> to your URL. If your URL already contains <code>f_auto<\/code>, you\u2019re all set\u2014no need for other edits. However, to leverage Cloudinary and AVIF with <code>f_auto<\/code>, contact <a href=\"mailto:support@cloudinary.com\">Customer Support<\/a> to enable it.<\/p><\/div>\n<h3>JPEG XL<\/h3>\n<p>JPEG XL, a format in development, is targeted to deliver significantly higher compression efficiency over JPEG. Based on the Free Lossy Image Format (FUIF) and Pik format. JPEG XL aims at enabling files to be up to one third the size of traditional JPEGs.<\/p>\n<p>JPEG XL is scheduled to become an international standard in 2021, after which lossless conversion of TIFFs, GIFs, PNGs, and JPEGs to JPEG XL will become a reality.<\/p>\n<h2 id=\"cloudinary\">Automated Image-Format Conversion with Cloudinary<\/h2>\n<p>Cloudinary is a cloud-based service for managing images and videos that offers a generous <a href=\"https:\/\/cloudinary.com\/pricing\">free-forever subscription plan<\/a>. With Cloudinary, you can upload images, apply built-in effects, filters, and transformations, and deliver the images to users. Among the transformations Cloudinary offers is automatic image-format conversion.<\/p>\n<p>You can convert images to any image format and even automate the selection of the best format for each user with only one line of code in Cloudinary. To do that, either modify the image URL (once the image is hosted on Cloudinary) or leverage the platform\u2019s <a href=\"https:\/\/cloudinary.com\/documentation\">convenient SDKs<\/a>, which serve all popular programming languages.<\/p>\n<p>Below we describe how to automate image conversion with Cloudinary. See the <a href=\"https:\/\/cloudinary.com\/cookbook\">Cloudinary Cookbook<\/a> for more details.<\/p>\n<h3>Automatic Format Selection<\/h3>\n<p>To simplify <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#automatic_format_selection_f_auto\">format selection<\/a>, Cloudinary offers you a way in which you can automate image delivery in  the best format to your users based on their device specifications. All you need to do is set  the <code>fetch_format<\/code> parameter, defined as <code>auto<\/code>, which selects the appropriate format.<\/p>\n<p>Once the format is set, Cloudinary delivers images as follows:<\/p>\n<ul>\n<li>Chrome users receive WebPs.<\/li>\n<li>IE users receive JPEG XRs.<\/li>\n<li>Safari users receive JPEG 2000s.<\/li>\n<li>For images with unsupported formats, Cloudinary delivers the format as denoted by the file extension.<\/li>\n<\/ul>\n<p>For example, the URL below delivers the preferred next-generation format according to the browser. If that format does not display in the browser, Cloudinary delivers a PNG image.<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;sample\\&quot;, {width: 500, fetch_format: \\&quot;auto\\&quot;, crop: \\&quot;scale\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;sample\\&quot;, {width: 500, fetch_format: \\&quot;auto\\&quot;, crop: \\&quot;scale\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;sample\\&quot; &gt; &lt;Transformation width=\\&quot;500\\&quot; fetchFormat=\\&quot;auto\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;sample\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;500\\&quot; fetchFormat=\\&quot;auto\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;sample\\&quot; &gt; &lt;cld-transformation width=\\&quot;500\\&quot; fetch-format=\\&quot;auto\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;sample\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;500\\&quot; fetch-format=\\&quot;auto\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;sample\\&quot; &gt; &lt;cl-transformation width=\\&quot;500\\&quot; fetch-format=\\&quot;auto\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;sample\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;500\\&quot; fetch-format=\\&quot;auto\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;sample&#039;, {width: 500, fetchFormat: \\&quot;auto\\&quot;, crop: \\&quot;scale\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;sample&#039;, {width: 500, fetchFormat: \\&quot;auto\\&quot;, crop: \\&quot;scale\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;sample\\&quot;).image(width=500, fetch_format=\\&quot;auto\\&quot;, crop=\\&quot;scale\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;sample\\&quot;).image(width=500, fetch_format=\\&quot;auto\\&quot;, crop=\\&quot;scale\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;sample&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(500))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;sample&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(500))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample\\&quot;, array(\\&quot;width\\&quot;=&gt;500, \\&quot;fetch_format\\&quot;=&gt;\\&quot;auto\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample\\&quot;, array(\\&quot;width\\&quot;=&gt;500, \\&quot;fetch_format\\&quot;=&gt;\\&quot;auto\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(500).fetchFormat(\\&quot;auto\\&quot;).crop(\\&quot;scale\\&quot;)).imageTag(\\&quot;sample\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(500).fetchFormat(\\&quot;auto\\&quot;).crop(\\&quot;scale\\&quot;)).imageTag(\\&quot;sample\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample\\&quot;, width: 500, fetch_format: \\&quot;auto\\&quot;, crop: \\&quot;scale\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample\\&quot;, width: 500, fetch_format: \\&quot;auto\\&quot;, crop: \\&quot;scale\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).FetchFormat(\\&quot;auto\\&quot;).Crop(\\&quot;scale\\&quot;)).BuildImageTag(\\&quot;sample\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).FetchFormat(\\&quot;auto\\&quot;).Crop(\\&quot;scale\\&quot;)).BuildImageTag(\\&quot;sample\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;sample&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(500))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;sample&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(500))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto())));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setFetchFormat(\\&quot;auto\\&quot;).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;sample\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setFetchFormat(\\&quot;auto\\&quot;).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;sample\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(500).fetchFormat(\\&quot;auto\\&quot;).crop(\\&quot;scale\\&quot;)).generate(\\&quot;sample\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(500).fetchFormat(\\&quot;auto\\&quot;).crop(\\&quot;scale\\&quot;)).generate(\\&quot;sample\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;sample&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(500))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;sample&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(500))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto())));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;sample\\&quot;)\\n\\t resize(Resize.scale() { width(500) })\\n\\t delivery(Delivery.format(\\n\\tFormat.auto())) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;sample\\&quot;)\\n\\t resize(Resize.scale() { width(500) })\\n\\t delivery(Delivery.format(\\n\\tFormat.auto())) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;sample\\&quot;, {width: 500, fetch_format: \\&quot;auto\\&quot;, crop: \\&quot;scale\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;sample\\&quot;, {width: 500, fetch_format: \\&quot;auto\\&quot;, crop: \\&quot;scale\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/w_500,f_auto\\\/sample&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;500&quot;,&quot;format&quot;:&quot;auto&quot;}],&quot;transformation_string&quot;:&quot;w_500,f_auto&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;sample&quot;,&quot;extension&quot;:&quot;&quot;,&quot;format&quot;:&quot;auto&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_500,f_auto\/sample\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_500,f_auto\/sample\" alt=\"sample\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"500\" height=\"333\"\/><\/a><\/p>\n<h3>Image Conversion<\/h3>\n<p>Cloudinary also offers ways for converting the format of your images through the format parameter or with a tweak of the image\u2019s file extension\u2014either dynamically or during upload. Currently, Cloudinary supports all standard formats and the next-generation formats WebP, JPEG XR, and Windows Media Photo (WDP).<\/p>\n<p>For example, the following URL delivers an image in its original format, which is JPEG:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;nice_beach\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;nice_beach\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;nice_beach\\&quot; &gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;nice_beach\\&quot; &gt;\\n\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;nice_beach\\&quot; &gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;nice_beach\\&quot; &gt;\\n\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;nice_beach\\&quot; &gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;nice_beach\\&quot; &gt;\\n\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;nice_beach&#039;).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;nice_beach&#039;).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;nice_beach\\&quot;).image()&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;nice_beach\\&quot;).image()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;nice_beach&#039;));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;nice_beach&#039;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;nice_beach\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;nice_beach\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().imageTag(\\&quot;nice_beach\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().imageTag(\\&quot;nice_beach\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;nice_beach\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;nice_beach\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.BuildImageTag(\\&quot;nice_beach\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.BuildImageTag(\\&quot;nice_beach\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;nice_beach&#039;).transformation(Transformation());&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;nice_beach&#039;).transformation(Transformation());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().generate(\\&quot;nice_beach\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().generate(\\&quot;nice_beach\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().generate(\\&quot;nice_beach\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().generate(\\&quot;nice_beach\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;nice_beach&#039;).transformation(Transformation());&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;nice_beach&#039;).transformation(Transformation());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;nice_beach\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;nice_beach\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;nice_beach\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;nice_beach\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/nice_beach&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[],&quot;transformation_string&quot;:&quot;&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;nice_beach&quot;,&quot;extension&quot;:&quot;&quot;,&quot;format&quot;:&quot;&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/nice_beach\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/nice_beach\" alt=\"JPEG\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"800\" height=\"534\"\/><\/a><\/p>\n<p>To replace the format with the file-extension approach, edit the URL to the one below. Cloudinary then uploads the image as a GIF.<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;nice_beach.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;nice_beach.gif\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;nice_beach.gif\\&quot; &gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;nice_beach.gif\\&quot; &gt;\\n\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;nice_beach.gif\\&quot; &gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;nice_beach.gif\\&quot; &gt;\\n\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;nice_beach.gif\\&quot; &gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;nice_beach.gif\\&quot; &gt;\\n\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;nice_beach.gif&#039;).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;nice_beach.gif&#039;).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;nice_beach.gif\\&quot;).image()&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;nice_beach.gif\\&quot;).image()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;nice_beach.gif&#039;));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;nice_beach.gif&#039;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;nice_beach.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;nice_beach.gif\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().imageTag(\\&quot;nice_beach.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().imageTag(\\&quot;nice_beach.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;nice_beach.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;nice_beach.gif\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.BuildImageTag(\\&quot;nice_beach.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.BuildImageTag(\\&quot;nice_beach.gif\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;nice_beach.gif&#039;).transformation(Transformation());&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;nice_beach.gif&#039;).transformation(Transformation());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().generate(\\&quot;nice_beach.gif\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().generate(\\&quot;nice_beach.gif\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().generate(\\&quot;nice_beach.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().generate(\\&quot;nice_beach.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;nice_beach.gif&#039;).transformation(Transformation());&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;nice_beach.gif&#039;).transformation(Transformation());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;nice_beach.gif\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;nice_beach.gif\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;nice_beach.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;nice_beach.gif\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/nice_beach.gif&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[],&quot;transformation_string&quot;:&quot;&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;nice_beach.gif&quot;,&quot;extension&quot;:&quot;gif&quot;,&quot;format&quot;:&quot;gif&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/nice_beach.gif\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/nice_beach.gif\" alt=\"gif\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"800\" height=\"534\"\/><\/a><\/p>\n<p>You can combine altered formats with other transformations. For example, to create transparency for sidebar images, edit the URL to read like this:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;nice_beach.png\\&quot;, {width: 200, height: 200, radius: \\&quot;max\\&quot;, crop: \\&quot;fill\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;nice_beach.png\\&quot;, {width: 200, height: 200, radius: \\&quot;max\\&quot;, crop: \\&quot;fill\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.png\\&quot;)\\n  .resize(fill().width(200).height(200))\\n  .roundCorners(max());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.png\\&quot;)\\n  .resize(fill().width(200).height(200))\\n  .roundCorners(max());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;nice_beach.png\\&quot; &gt; &lt;Transformation width=\\&quot;200\\&quot; height=\\&quot;200\\&quot; radius=\\&quot;max\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;nice_beach.png\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;200\\&quot; height=\\&quot;200\\&quot; radius=\\&quot;max\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.png\\&quot;)\\n  .resize(fill().width(200).height(200))\\n  .roundCorners(max());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.png\\&quot;)\\n  .resize(fill().width(200).height(200))\\n  .roundCorners(max());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;nice_beach.png\\&quot; &gt; &lt;cld-transformation width=\\&quot;200\\&quot; height=\\&quot;200\\&quot; radius=\\&quot;max\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;nice_beach.png\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;200\\&quot; height=\\&quot;200\\&quot; radius=\\&quot;max\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.png\\&quot;)\\n  .resize(fill().width(200).height(200))\\n  .roundCorners(max());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.png\\&quot;)\\n  .resize(fill().width(200).height(200))\\n  .roundCorners(max());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;nice_beach.png\\&quot; &gt; &lt;cl-transformation width=\\&quot;200\\&quot; height=\\&quot;200\\&quot; radius=\\&quot;max\\&quot; crop=\\&quot;fill\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;nice_beach.png\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;200\\&quot; height=\\&quot;200\\&quot; radius=\\&quot;max\\&quot; crop=\\&quot;fill\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.png\\&quot;)\\n  .resize(fill().width(200).height(200))\\n  .roundCorners(max());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.png\\&quot;)\\n  .resize(fill().width(200).height(200))\\n  .roundCorners(max());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;nice_beach.png&#039;, {width: 200, height: 200, radius: \\&quot;max\\&quot;, crop: \\&quot;fill\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;nice_beach.png&#039;, {width: 200, height: 200, radius: \\&quot;max\\&quot;, crop: \\&quot;fill\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;nice_beach.png\\&quot;).image(width=200, height=200, radius=\\&quot;max\\&quot;, crop=\\&quot;fill\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;nice_beach.png\\&quot;).image(width=200, height=200, radius=\\&quot;max\\&quot;, crop=\\&quot;fill\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;nice_beach.png&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(200)\\n-&gt;height(200))\\n\\t-&gt;roundCorners(RoundCorners::max());&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;nice_beach.png&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(200)\\n-&gt;height(200))\\n\\t-&gt;roundCorners(RoundCorners::max());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;nice_beach.png\\&quot;, array(\\&quot;width\\&quot;=&gt;200, \\&quot;height\\&quot;=&gt;200, \\&quot;radius\\&quot;=&gt;\\&quot;max\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;nice_beach.png\\&quot;, array(\\&quot;width\\&quot;=&gt;200, \\&quot;height\\&quot;=&gt;200, \\&quot;radius\\&quot;=&gt;\\&quot;max\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(200).height(200).radius(\\&quot;max\\&quot;).crop(\\&quot;fill\\&quot;)).imageTag(\\&quot;nice_beach.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(200).height(200).radius(\\&quot;max\\&quot;).crop(\\&quot;fill\\&quot;)).imageTag(\\&quot;nice_beach.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;nice_beach.png\\&quot;, width: 200, height: 200, radius: \\&quot;max\\&quot;, crop: \\&quot;fill\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;nice_beach.png\\&quot;, width: 200, height: 200, radius: \\&quot;max\\&quot;, crop: \\&quot;fill\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(200).Radius(\\&quot;max\\&quot;).Crop(\\&quot;fill\\&quot;)).BuildImageTag(\\&quot;nice_beach.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(200).Radius(\\&quot;max\\&quot;).Crop(\\&quot;fill\\&quot;)).BuildImageTag(\\&quot;nice_beach.png\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;nice_beach.png&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(200)\\n.height(200))\\n\\t.roundCorners(RoundCorners.max()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;nice_beach.png&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(200)\\n.height(200))\\n\\t.roundCorners(RoundCorners.max()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(200).setRadius(\\&quot;max\\&quot;).setCrop(\\&quot;fill\\&quot;)).generate(\\&quot;nice_beach.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(200).setRadius(\\&quot;max\\&quot;).setCrop(\\&quot;fill\\&quot;)).generate(\\&quot;nice_beach.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(200).height(200).radius(\\&quot;max\\&quot;).crop(\\&quot;fill\\&quot;)).generate(\\&quot;nice_beach.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(200).height(200).radius(\\&quot;max\\&quot;).crop(\\&quot;fill\\&quot;)).generate(\\&quot;nice_beach.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;nice_beach.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;w_200,h_200,c_fill,r_max\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;nice_beach.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;w_200,h_200,c_fill,r_max\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;nice_beach.png\\&quot;)\\n\\t resize(Resize.fill() { width(200)\\n height(200) })\\n\\t roundCorners(RoundCorners.max()) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;nice_beach.png\\&quot;)\\n\\t resize(Resize.fill() { width(200)\\n height(200) })\\n\\t roundCorners(RoundCorners.max()) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;nice_beach.png\\&quot;, {width: 200, height: 200, radius: \\&quot;max\\&quot;, crop: \\&quot;fill\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;nice_beach.png\\&quot;, {width: 200, height: 200, radius: \\&quot;max\\&quot;, crop: \\&quot;fill\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.png\\&quot;)\\n  .resize(fill().width(200).height(200))\\n  .roundCorners(max());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.png\\&quot;)\\n  .resize(fill().width(200).height(200))\\n  .roundCorners(max());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/w_200,h_200,c_fill,r_max\\\/nice_beach.png&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;200&quot;,&quot;height&quot;:&quot;200&quot;,&quot;crop_mode&quot;:&quot;fill&quot;,&quot;radius&quot;:&quot;max&quot;}],&quot;transformation_string&quot;:&quot;w_200,h_200,c_fill,r_max&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;nice_beach.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_200,h_200,c_fill,r_max\/nice_beach.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_200,h_200,c_fill,r_max\/nice_beach.png\" alt=\"png\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"200\" height=\"200\"\/><\/a><\/p>\n<p>You can also control your image\u2019s quality in combination with other changes through the <code>quality<\/code> (q in URLs) parameter, as in this example:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;nice_beach.jpg\\&quot;, {quality: 80})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;nice_beach.jpg\\&quot;, {quality: 80})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.jpg\\&quot;).delivery(quality(80));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.jpg\\&quot;).delivery(quality(80));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;nice_beach.jpg\\&quot; &gt; &lt;Transformation quality=\\&quot;80\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;nice_beach.jpg\\&quot; &gt;\\n\\t&lt;Transformation quality=\\&quot;80\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.jpg\\&quot;).delivery(quality(80));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.jpg\\&quot;).delivery(quality(80));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;nice_beach.jpg\\&quot; &gt; &lt;cld-transformation quality=\\&quot;80\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;nice_beach.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation quality=\\&quot;80\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.jpg\\&quot;).delivery(quality(80));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.jpg\\&quot;).delivery(quality(80));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;nice_beach.jpg\\&quot; &gt; &lt;cl-transformation quality=\\&quot;80\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;nice_beach.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation quality=\\&quot;80\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.jpg\\&quot;).delivery(quality(80));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.jpg\\&quot;).delivery(quality(80));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;nice_beach.jpg&#039;, {quality: 80}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;nice_beach.jpg&#039;, {quality: 80}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;nice_beach.jpg\\&quot;).image(quality=80)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;nice_beach.jpg\\&quot;).image(quality=80)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;nice_beach.jpg&#039;))\\n\\t-&gt;delivery(Delivery::quality(80));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;nice_beach.jpg&#039;))\\n\\t-&gt;delivery(Delivery::quality(80));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;nice_beach.jpg\\&quot;, array(\\&quot;quality\\&quot;=&gt;80))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;nice_beach.jpg\\&quot;, array(\\&quot;quality\\&quot;=&gt;80))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().quality(80)).imageTag(\\&quot;nice_beach.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().quality(80)).imageTag(\\&quot;nice_beach.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;nice_beach.jpg\\&quot;, quality: 80)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;nice_beach.jpg\\&quot;, quality: 80)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(80)).BuildImageTag(\\&quot;nice_beach.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(80)).BuildImageTag(\\&quot;nice_beach.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;nice_beach.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(80)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;nice_beach.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(80)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(80)).generate(\\&quot;nice_beach.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(80)).generate(\\&quot;nice_beach.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().quality(80)).generate(\\&quot;nice_beach.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().quality(80)).generate(\\&quot;nice_beach.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;nice_beach.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(80)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;nice_beach.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(80)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;nice_beach.jpg\\&quot;)\\n\\t delivery(Delivery.quality(80)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;nice_beach.jpg\\&quot;)\\n\\t delivery(Delivery.quality(80)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;nice_beach.jpg\\&quot;, {quality: 80})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;nice_beach.jpg\\&quot;, {quality: 80})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.jpg\\&quot;).delivery(quality(80));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;nice_beach.jpg\\&quot;).delivery(quality(80));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/q_80\\\/nice_beach.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;quality&quot;:&quot;80&quot;}],&quot;transformation_string&quot;:&quot;q_80&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;nice_beach.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/q_80\/nice_beach.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/q_80\/nice_beach.jpg\" alt=\"quality\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"800\" height=\"534\"\/><\/a><\/p>\n<p>When <code>f_auto<\/code> is used together with <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#automatic_quality_and_encoding_settings\">automatic quality<\/a> (<code>q_auto<\/code>), the PNG format may be selected when the automatic quality algorithm decides that it better fits the specific image. This allows delivering better looking and economical image files.<\/p>\n<h2 id=\"resources\">Additional Resources<\/h2>\n<p>The Cloudinary site contains many informative articles on image formats. Below are a few examples.<\/p>\n<p><strong>The Great JPEG 2000 Debate: Analyzing the Pros and Cons to Widespread Adoption<\/strong><\/p>\n<p>The many image formats available can obliviate less popular ones. Hence, formats that are not well supported or that offer no significant advantages over others are seldom adopted.<\/p>\n<p>Even though JPEG is not top ranked, it remains viable. The article <a href=\"https:\/\/cloudinary.com\/blog\/the_great_jpeg_2000_debate_analyzing_the_pros_and_cons_to_widespread_adoption\"><em>The Great JPEG 2000 Debate: Analyzing the Pros and Cons to Widespread Adoption<\/em><\/a> describes the JPEG 2000 format, its features, limitations, and differences from other formats.<\/p>\n<p><strong>Progressive JPEGs and Green Martians<\/strong><\/p>\n<p>When loading images, you want to balance between quality and performance. With progressive decoding techniques, you can ensure that users aren\u2019t stuck waiting for images that are only half visible.<\/p>\n<p>The article <a href=\"https:\/\/cloudinary.com\/blog\/progressive_jpegs_and_green_martians\"><em>Progressive JPEGs and Green Martians<\/em><\/a> recounts the capabilities of progressive JPEGs, the advantages and disadvantages of progressive decoding, and the procedure for optimizing decoding.<\/p>\n<p><strong>Animated WebP: How to Convert Animated GIF to WebP and Save up to 90% Bandwidth<\/strong><\/p>\n<p>Short, animated GIF images are becoming a standard for catching attention and spiffing up websites. Nonetheless, the format has disadvantages, and many site owners are considering a switch to WebP.<\/p>\n<p>The article <a href=\"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth\"><em>Animated WebP: How to Convert Animated GIF to WebP and Save up to 90% Bandwidth<\/em><\/a> shows you how to convert GIFs to WebPs, resize and crop GIFs, and deliver animated WebPs through automation.<\/p>\n<p><strong>JPEG Image Optimization Without Compromising Quality With JPEGmini and Cloudinary<\/strong><\/p>\n<p>JPEGmini is an online service that downsizes JPEGs with no quality loss. With both Cloudinary and JPEGmini, you can optimize images and boost site performance.<\/p>\n<p>The article <a href=\"https:\/\/cloudinary.com\/blog\/optimize_your_jpeg_images_without_compromising_quality_with_jpegmini_and_cloudinary\"><em>JPEG Image Optimization Without Compromising Quality With JPEGmini and Cloudinary<\/em><\/a> describes how to optimize JPEGs, perform complex image transformations, and secure URLs.<\/p>\n<p><strong>Verification of WebP Browser Support for Dynamically Delivering Images<\/strong><\/p>\n<p>WebP offers significant advantages over traditional formats. Cloudinary enables you to serve that format whenever feasible.<\/p>\n<p>The article <a href=\"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance\"><em>Check for WebP Browser Support to Dynamically Deliver Images<\/em><\/a> elaborates on WebP\u2019s benefits, the tradeoffs of size and quality, the procedures for checking for browser support, for adopting WebP for semitransparent and lossless images, and for dynamically generating WebP images.<\/p>\n<p><strong>The WebP Image Format for Android on Websites Or Native Apps<\/strong><\/p>\n<p>Google-developed WebP, an obvious choice for Android sites or apps, has a smaller file size. WebP images load fast without sacrificing quality.<\/p>\n<p>The article <a href=\"https:\/\/cloudinary.com\/blog\/quick_guide_using_webp_on_your_website_or_native_apps\"><em>Adopting the WebP Image Format for Android on Websites Or Native Apps<\/em><\/a> talks about the benefits of WebP for Android and steps you through the process of using WebP in mobile apps and converting and transforming WebP images with Cloudinary.<\/p>\n<p><strong>Optimization of  Animated GIFs With Lossy Compression<\/strong><\/p>\n<p>Even though WebP is replacing GIF on many sites, GIF is compatible with all browsers whereas WebP is not.<\/p>\n<p>The article <a href=\"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs\"><em>Optimizing Animated GIFs With Lossy Compression<\/em><\/a> shows you how to optimize GIFs to make their performance comparable to WebPs\u2019 and to apply lossy compression. Also described are the caveats of converting GIFs to WebPs and Cloudinary\u2019s options for transforming GIFs.<\/p>\n<h3>Bonus Articles<\/h3>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/how-to-convert-png-to-jpg-all-the-options\">How to Convert PNG to JPG? All the Options<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/converting-png-to-tif-options-and-best-practices\">Converting PNG to TIF: Options and Best Practices<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/heif-format-meet-the-the-next-evolution-of-jpeg\">HEIF Format: Meet the The Next Evolution of JPEG<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/gltf-features-applications-and-5-essential-best-practices\">glTF: Features, Applications, and 5 Essential Best Practices<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/eps-format-history-how-it-works-and-pros-cons-you-should-know\">EPS Format: History, How it Works, and Pros\/Cons You Should Know<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/usdz-format-how-it-works-use-cases-and-pros-cons\">USDZ Format: How It Works, Use Cases, and Pros\/Cons<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/svg-vs-png-4-key-differences-and-how-to-choose\">SVG vs PNG: 4 Key Differences and How to Choose<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/should-you-still-use-bmp-format-use-cases-and-pros-cons\">Should You Still Use BMP Format? Use Cases and Pros\/Cons<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/heif-vs-jpeg-4-key-differences-and-how-to-choose\">HEIF vs JPEG: 4 Key Differences and How to Choose<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/glb-format-how-it-works-use-cases-and-pros-cons-you-should-know\">GLB Format: How It Works, Use Cases, and Pros\/Cons You Should Know<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/dng-format-how-it-works-and-pros-cons-to-know-about\">DNG Format: How It Works and Pros\/Cons to Know About<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/ico-format-origins-common-uses-and-important-pros-cons\">ICO Format: Origins, Common Uses, and Important Pros\/Cons<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/avif-vs-webp-4-key-differences-and-how-to-choose\">AVIF vs. WebP: 4 Key Differences and How to Choose<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/bmp-vs-png-4-key-differences-and-how-to-choose\">BMP vs PNG: 4 Key Differences and How to Choose<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/eps-vs-svg-4-key-differences-and-how-to-choose\">EPS vs SVG: 4 Key Differences and How to Choose<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/dng-vs-raw-pros-cons-key-differences-and-how-to-choose\">DNG vs RAW: Pros, Cons, Key Differences, and How to Choose<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/the-tga-format-is-alive-and-kicking-why-and-when-to-use-it\">The TGA Format Is Alive and Kicking: Why and When to Use It<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/indesign-format-features-pros-cons-and-best-practices\">Indesign Format: Features, Pros\/Cons and Best Practices<\/a>\n<\/li>\n<\/ul>\n<h2>See Additional Guides on Key Front-End Development Topics<\/h2>\n<p>Together with our content partners, we have authored in-depth guides on several other topics that can also be useful as you explore the world of <a href=\"https:\/\/cloudinary.com\/guides\/front-end-development\/front-end-development-the-complete-guide\">front-end development<\/a>.<\/p>\n<h3><a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_for_websites_beautiful_pages_that_load_quickly\">Image Optimization<\/a><\/h3>\n<p><em>Authored by Cloudinary<\/em><\/p>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_for_websites_beautiful_pages_that_load_quickly\">[Guide] Image Optimization for Websites: Beautiful Pages That Load Quickly<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/web-performance\/downloading-image-from-url-in-python-5-ways-with-code-examples\">[Guide] Downloading Image from URL in Python: 5 Ways with Code Examples<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_expert_roundup\">[Blog] Best Image Optimization Techniques: Expert Roundup<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/products\/image\">[Product] Cloudinary Image | Automated Image Editing &amp; Delivery<\/a>\n<\/li>\n<\/ul>\n<h3><a href=\"https:\/\/cloudinary.com\/guides\/web-performance\/video-optimization-why-you-need-it-and-5-critical-best-practices\">Video Optimization<\/a><\/h3>\n<p><em>Authored by Cloudinary<\/em><\/p>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/web-performance\/video-optimization-why-you-need-it-and-5-critical-best-practices\">[Guide] Video Optimization: Why You Need It and 5 Critical Best Practices<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/guides\/web-performance\/rendering-images\">[Guide] Boost Your Workflow with Effective Image Rendering Methods<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/jpeg-xl-and-the-pareto-front\">[Blog] JPEG XL and the Pareto Front<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/products\/video\">[Product] Cloudinary Video | Automated Video Editing &amp; Delivery<\/a>\n<\/li>\n<\/ul>\n<h3><a href=\"https:\/\/corp.kaltura.com\/blog\/video-platforms\/\">Video Platforms<\/a><\/h3>\n<p><em>Authored by Kaltura<\/em><\/p>\n<ul>\n<li>\n<a href=\"https:\/\/corp.kaltura.com\/blog\/video-platforms\/\">[Guide] Video Platforms: Key Capabilities &amp; 10 Solutions to Know in 2025<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/corp.kaltura.com\/blog\/online-video-platforms\/\">[Guide] Best Online Video Platforms: Top 14 Solutions in 2025<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/corp.kaltura.com\/blog\/ai-video-tools\/\">[Guide] 15 AI video tools for generating, editing &amp; hosting video in 2025<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22166,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,157],"class_list":["post-22165","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-image-formats"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Image Formats: Getting it Right<\/title>\n<meta name=\"description\" content=\"Learn the differences between raster and vector and the pros and cons of traditional image formats like SVG and TIFF and that of modern ones, e.g., WebP.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image Formats: Getting it Right\" \/>\n<meta property=\"og:description\" content=\"Learn the differences between raster and vector and the pros and cons of traditional image formats like SVG and TIFF and that of modern ones, e.g., WebP.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-15T05:48:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-06T20:38:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718347\/Web_Assets\/blog\/Image-Formats_22166cf314\/Image-Formats_22166cf314.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Image Formats: Getting it Right\",\"datePublished\":\"2020-09-15T05:48:13+00:00\",\"dateModified\":\"2026-02-06T20:38:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718347\/Web_Assets\/blog\/Image-Formats_22166cf314\/Image-Formats_22166cf314.png?_i=AA\",\"keywords\":[\"Asset Management\",\"Image Formats\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2020\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right\",\"url\":\"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right\",\"name\":\"Image Formats: Getting it Right\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718347\/Web_Assets\/blog\/Image-Formats_22166cf314\/Image-Formats_22166cf314.png?_i=AA\",\"datePublished\":\"2020-09-15T05:48:13+00:00\",\"dateModified\":\"2026-02-06T20:38:56+00:00\",\"description\":\"Learn the differences between raster and vector and the pros and cons of traditional image formats like SVG and TIFF and that of modern ones, e.g., WebP.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718347\/Web_Assets\/blog\/Image-Formats_22166cf314\/Image-Formats_22166cf314.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718347\/Web_Assets\/blog\/Image-Formats_22166cf314\/Image-Formats_22166cf314.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Image Formats: Getting it Right\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Image Formats: Getting it Right","description":"Learn the differences between raster and vector and the pros and cons of traditional image formats like SVG and TIFF and that of modern ones, e.g., WebP.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right","og_locale":"en_US","og_type":"article","og_title":"Image Formats: Getting it Right","og_description":"Learn the differences between raster and vector and the pros and cons of traditional image formats like SVG and TIFF and that of modern ones, e.g., WebP.","og_url":"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right","og_site_name":"Cloudinary Blog","article_published_time":"2020-09-15T05:48:13+00:00","article_modified_time":"2026-02-06T20:38:56+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718347\/Web_Assets\/blog\/Image-Formats_22166cf314\/Image-Formats_22166cf314.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right"},"author":{"name":"","@id":""},"headline":"Image Formats: Getting it Right","datePublished":"2020-09-15T05:48:13+00:00","dateModified":"2026-02-06T20:38:56+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right"},"wordCount":5,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718347\/Web_Assets\/blog\/Image-Formats_22166cf314\/Image-Formats_22166cf314.png?_i=AA","keywords":["Asset Management","Image Formats"],"inLanguage":"en-US","copyrightYear":"2020","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right","url":"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right","name":"Image Formats: Getting it Right","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718347\/Web_Assets\/blog\/Image-Formats_22166cf314\/Image-Formats_22166cf314.png?_i=AA","datePublished":"2020-09-15T05:48:13+00:00","dateModified":"2026-02-06T20:38:56+00:00","description":"Learn the differences between raster and vector and the pros and cons of traditional image formats like SVG and TIFF and that of modern ones, e.g., WebP.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718347\/Web_Assets\/blog\/Image-Formats_22166cf314\/Image-Formats_22166cf314.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718347\/Web_Assets\/blog\/Image-Formats_22166cf314\/Image-Formats_22166cf314.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Image Formats: Getting it Right"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718347\/Web_Assets\/blog\/Image-Formats_22166cf314\/Image-Formats_22166cf314.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=22165"}],"version-history":[{"count":30,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22165\/revisions"}],"predecessor-version":[{"id":39782,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22165\/revisions\/39782"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22166"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}