{"id":22293,"date":"2021-02-18T16:26:22","date_gmt":"2021-02-18T23:26:22","guid":{"rendered":"http:\/\/how_to_adopt_avif_for_images_with_cloudinary"},"modified":"2025-11-06T17:00:25","modified_gmt":"2025-11-07T01:00:25","slug":"how_to_adopt_avif_for_images_with_cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary","title":{"rendered":"Cloudinary AVIF | How to Use the AVIF Codec With Cloudinary"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>While AVIF is becoming more common among browser use, Cloudinary allows you to use it on your website to conserve image size by leveraging it for compatible browsers.<\/p>\n<p>One way to compare image codecs is to encode the same image in different formats at <strong>matched file sizes<\/strong> and then compare the <strong>visual quality<\/strong> of the resulting images. For example, I rendered the AVIF below with a <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#adjusting_image_quality\"><code>q_50<\/code><\/a> quality transformation. It weighs 12.3 KB and, compared to the lossless original it looks pretty good subjectively.<\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>If you\u2019re not using Cloudinary today, you can <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">sign up for free and for life<\/a> to work with AVIF and all the rest of Cloudinary\u2019s image handling capabilities.<\/p><\/div>\n<style>\n.tab-eg {\n  --color-light: #eeeef1;\n  --color-mid: #737a8b;\n  --color-dark: #0c163b;\n  --color-slate: #404962;\n  --color-slate-light: #acb0ba;\n  --color-primary: #3448c5;\n  --color-inactive: #737a8b;\n  color: var(--color-slate);\n  max-width: 430px;\n}\n.tab-eg h1,\n.tab-eg h2,\n.tab-eg h3 {\n  color: var(--color-dark);\n  line-height: 1.2;\n}\n.tab-eg h1 {\n  font-size: 1.5rem;\n  margin: 0 0 1rem 0;\n}\n.tab-eg h3 {\n  font-size: 1.5rem;\n}\n<\/style>\n<div class=\"tab-eg\">\n    <h3 id=\"matched-filesize\">Matched filesize<\/h2>\n    <tabs-group >\n      <article>\n        <h3 data-element=\"trigger\">Original<\/h2>\n        <div data-element=\"panel\" >\n          <img decoding=\"async\" src=\"https:\/\/o.img.rodeo\/ar_1,h_1.0,g_auto,c_crop\/w_430,h_430,f_png\/dogs\/7\">\n          <dl>\n            <div class=\"d\">\n            <dt>&nbsp;<\/dt>\n            <dd><code>&nbsp;<\/code><\/dd>\n            <\/div>\n          <\/dl>\n        <\/div>\n      <\/article>\n      <article>\n        <h3 data-element=\"trigger\">JPEG<\/h2>\n        <div data-element=\"panel\" >\n          <img decoding=\"async\" src=\"https:\/\/o.img.rodeo\/ar_1,h_1.0,g_auto,c_crop\/w_430,h_430,f_jpg,q_21\/dogs\/7\">\n          <dl>\n          \t<div class=\"d\">\n            <dt>File size<\/dt>\n            <dd>12.3\u2009KB<\/dd>\n            <\/div><div class=\"d\">\n            <dt>SSIMULACRA<\/dt>\n            <dd>0.04442<\/dd>\n            <\/div>\n          <\/dl>\n        <\/div>\n      <\/article>\n      <article>\n        <h3 data-element=\"trigger\">WebP<\/h2>\n        <div data-element=\"panel\" >\n          <picture>\n            <source \n              type=\"image\/webp\"\n              srcset=\"https:\/\/o.img.rodeo\/image\/fetch\/f_png\/https:\/\/o.img.rodeo\/ar_1,h_1.0,g_auto,c_crop\/w_430,h_430,f_webp,q_31\/dogs\/7\">\n            <img decoding=\"async\" src=\"https:\/\/o.img.rodeo\/ar_1,h_1.0,g_auto,c_crop\/w_430,h_430,f_webp,q_31\/dogs\/7\">\n          <\/picture>\n          <dl>\n            <div class=\"d\">\n            <dt>File size<\/dt>\n            <dd>12.5\u2009KB<\/dd>\n            <\/div><div class=\"d\">\n            <dt>SSIMULACRA<\/dt>\n            <dd>0.03681<\/dd>\n            <\/div>\n          <\/dl>\n        <\/div>\n      <\/article>\n      <article>\n        <h3 data-element=\"trigger\">AVIF<\/h2>\n        <div data-element=\"panel\" >\n          <picture>\n            <source \n              type=\"image\/avif\"\n              srcset=\"https:\/\/o.img.rodeo\/ar_1,h_1.0,g_auto,c_crop\/w_430,h_430,f_avif,q_50\/dogs\/7\">\n             <img decoding=\"async\" src=\"https:\/\/o.img.rodeo\/image\/fetch\/f_png\/https:\/\/o.img.rodeo\/ar_1,h_1.0,g_auto,c_crop\/w_430,h_430,f_avif,q_50\/dogs\/7\">\n          <\/picture>\n          <dl>\n            <div class=\"d\">\n            <dt>File size<\/dt>\n            <dd>12.3\u2009KB<\/dd>\n            <\/div><div class=\"d\">\n            <dt>SSIMULACRA<\/dt>\n            <dd>0.02616<\/dd>\n            <\/div>\n          <\/dl>\n        <\/div>\n      <\/article>\n    <\/tabs-group>\n<\/div>\n<p><em>Photo credit: <a href=\"https:\/\/www.pexels.com\/photo\/selective-focus-photo-of-dog-1562983\/\">Alo\u00efs Moubax<\/a><\/em><\/p>\n<p>My favorite image-quality metric is <a href=\"https:\/\/cloudinary.com\/blog\/detecting_the_psychovisual_impact_of_compression_related_artifacts_using_ssimulacra\">SSIMULACRA<\/a>. Lower scores are better; 0.01 is just about perfect and 0.1 is awful. SSIMULACRA gives the AVIF a score of 0.026, compared to the original. Pretty good!<\/p>\n<p>I then rendered a WebP and a JPEG at the same file size. They look worse. SSIMULACRA gives the WebP a 41%-worse score than the AVIF; it gives the JPEG a 70%-worse score than the AVIF. Those numbers agree with my subjective judgement: the AVIF looks good; the <a href=\"https:\/\/cloudinary.com\/tools\/compress-webp\">WebP<\/a> is borderline; and the JPEG is so full of artifacts that it\u2019s unusable. All for the same 12.3 KB cost. Without question, AVIF gives you more bang for your byte.<\/p>\n<p>Another good way to compare codecs is to render an image at a <strong>fixed quality<\/strong> and then compare the resulting <strong>file sizes<\/strong>. Here\u2019s an example:<\/p>\n<div class=\"tab-eg\">\n    <h2 id=\"matched-quality\">Matched Quality<\/h2>\n    <tabs-group >\n      <article>\n        <h3 data-element=\"trigger\">Original<\/h2>\n        <div data-element=\"panel\" >\n          <img decoding=\"async\" src=\"https:\/\/o.img.rodeo\/ar_1,h_1.0,g_auto,c_crop\/w_860,f_png\/ghibli\/chihiro015\">\n          <dl>\n            <div class=\"d\">\n            <dt>&nbsp;<\/dt>\n            <dd><code>&nbsp;<\/code><\/dd>\n            <\/div>\n          <\/dl>\n        <\/div>\n      <\/article>\n      <article>\n        <h3 data-element=\"trigger\">JPEG<\/h2>\n        <div data-element=\"panel\" >\n          <img decoding=\"async\" src=\"https:\/\/o.img.rodeo\/ar_1,h_1.0,g_auto,c_crop\/w_860,f_jpg,q_auto\/ghibli\/chihiro015\">\n          <dl>\n          \t<div class=\"d\">\n            <dt>Transformation<\/dt>\n            <dd><code>f_jpg,q_auto&nbsp;<\/code><\/dd>\n            <\/div><div class=\"d\">\n            <dt>File size<\/dt>\n            <dd>64.7\u2009KB<\/dd>\n            <\/div><div class=\"d\">\n            <dt>SSIMULACRA<\/dt>\n            <dd>0.01648<\/dd>\n            <\/div>\n          <\/dl>\n        <\/div>\n      <\/article>\n      <article>\n        <h3 data-element=\"trigger\">WebP<\/h2>\n        <div data-element=\"panel\" >\n          <picture>\n            <source \n              type=\"image\/webp\"\n              srcset=\"https:\/\/o.img.rodeo\/ar_1,h_1.0,g_auto,c_crop\/w_860,f_webp,q_auto\/ghibli\/chihiro015\">\n            <img decoding=\"async\" src=\"https:\/\/o.img.rodeo\/image\/fetch\/f_png\/https:\/\/o.img.rodeo\/ar_1,h_1.0,g_auto,c_crop\/w_860,f_webp,q_auto\/ghibli\/chihiro015\">\n          <\/picture>\n          <dl>\n            <div class=\"d\">\n            <dt>Transformation<\/dt>\n            <dd><code>f_webp,q_auto<\/code><\/dd>\n            <\/div><div class=\"d\">\n            <dt>File size<\/dt>\n            <dd>48.6\u2009KB<\/dd>\n            <\/div><div class=\"d\">\n            <dt>SSIMULACRA<\/dt>\n            <dd>0.01553<\/dd>\n            <\/div>\n          <\/dl>\n        <\/div>\n      <\/article>\n      <article>\n        <h3 data-element=\"trigger\">AVIF<\/h2>\n        <div data-element=\"panel\" >\n          <picture>\n            <source \n              type=\"image\/avif\"\n              srcset=\"https:\/\/o.img.rodeo\/ar_1,h_1.0,g_auto,c_crop\/w_860,f_avif,q_auto\/ghibli\/chihiro015\">\n            <img decoding=\"async\" src=\"https:\/\/o.img.rodeo\/image\/fetch\/f_png\/https:\/\/o.img.rodeo\/ar_1,h_1.0,g_auto,c_crop\/w_860,f_avif,q_auto\/ghibli\/chihiro015\">\n          <\/picture>\n          <dl>\n            <div class=\"d\">\n            <dt>Transformation<\/dt>\n            <dd><code>f_avif,q_auto<\/code><\/dd>\n            <\/div><div class=\"d\">\n            <dt>File size<\/dt>\n            <dd>31.6\u2009KB<\/dd>\n            <\/div><div class=\"d\">\n            <dt>SSIMULACRA<\/dt>\n            <dd>0.01883<\/dd>\n            <\/div>\n          <\/dl>\n        <\/div>\n      <\/article>\n    <\/tabs-group>\n<\/div>\n<p><em>Image credit: <a href=\"https:\/\/www.ghibli.jp\/works\/chihiro\/\">Studio Ghibli, \u201cSpirited Away\u201d<\/a><\/em><\/p>\n<p>After rendering all three images with <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#automatic_quality_and_encoding_settings\"><code>q_auto<\/code><\/a>, I saw that their SSIMULACRA scores were all in the same ballpark. And they all look fantastic when presented at 2x, more or less indistinguishable from the original.<\/p>\n<p>The file size differences are stark, however. The WebP is 25% smaller than the JPEG, which is impressive enough, until you see that <strong>the AVIF is half the size of the JPEG<\/strong>.<\/p>\n<p>In Cloudinary\u2019s initial tests, <strong>AVIF typically compresses more efficiently than JPEG by around 50%.<\/strong> Converting to AVIF with Cloudinary only involves adding the <code>f_avif<\/code> transformation parameter to your URLs. We\u2019ve supported AVIF since it first shipped in a browser\u2014in Chrome last August\u2014and have been improving our implementation ever since.<\/p>\n<p>Want to know more? Read on.<\/p>\n<h2>Where Did AVIF Come From?<\/h2>\n<p>AVIF originated from the AV1 video codec. Here\u2019s the background:<\/p>\n<p>The <a href=\"https:\/\/en.wikipedia.org\/wiki\/High_Efficiency_Video_Coding#Patent_licensing\">patent minefields<\/a> surrounding MPEG\u2019s H.265 codec (aka HEVC) drove <a href=\"http:\/\/aomedia.org\/membership\/members\/\">the world\u2019s top tech companies<\/a> to form a consortium called the Alliance for Open Media to come up with a royalty-free-forever alternative. And lo, in 2018, the AOM released the <a href=\"https:\/\/en.wikipedia.org\/wiki\/AV1\">AV1 video format<\/a>.<\/p>\n<p>To build a next-gen video codec, one of the things you must do is create a next-gen <strong>image<\/strong> codec to encode the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Video_compression_picture_types#Intra-coded_(I)_frames\/slices_(key_frames)\">key frames<\/a>. And, as long as you already have an image codec that handily outperforms the status quo just kicking around inside your video codec, it\u2019s not too much trouble to split it off, wrap it up, and release it as a stand-alone image format.<\/p>\n<p>That was what Google did with VP8 when the company created <a href=\"https:\/\/developers.google.com\/speed\/webp\">WebP<\/a>. Similarly, iPhones now capture and store images with High Efficiency Image File Format (HEIF) containers around HEVC keyframe payloads, aka <a href=\"https:\/\/en.wikipedia.org\/wiki\/High_Efficiency_Image_File_Format#HEIC:_HEVC_in_HEIF\">HEIC files<\/a>.<\/p>\n<p>A few of the companies behind AV1 came up with the idea to use the HEIF container with AV1 keyframe payloads, thus creating the AV1 Image File Format (AVIF for short).<\/p>\n<h2>What\u2019s AVIF Good For?<\/h2>\n<p>Just about everything!<\/p>\n<p>Deciding which format to adopt for a given image on the Internet used to be pretty complicated. You had to determine whether the image contained any transparency (which ruled out JPEG), and whether its content was \u201cphotographic\u201d (with continuous tones and fuzzy edges, in which case JPEG or WebP would be your answer). If the image contained lots of sharp edges and flat colors instead, you\u2019d adopt PNG or lossless WebP, which is very different from regular WebP\u2014did I mention that the process was complicated?<\/p>\n<p>AVIF supports transparency, accommodating both sharp-edged and continuous-tone imagery. No matter what the input looks like, AVIF significantly outperforms WebP, JPEG, and PNG.<\/p>\n<p>Also! Unlike WebP, JPEG, and PNG, AVIF works well with 10-bit bit depths, which is a necessity for <a href=\"https:\/\/cloudinary.com\/glossary\/hdr\">HDR<\/a> and wide-gamut imagery.<\/p>\n<p>The one thing AVIF does not excel at is <strong>lossless<\/strong> compression. <a href=\"https:\/\/jakearchibald.com\/2020\/avif-has-landed\/#why-not-lossy\">But you don\u2019t really need that for the web<\/a>.<\/p>\n<p>As other new image formats emerge, their strengths, weaknesses, and feature sets might recomplicate things. But for now, AVIF is the only next-gen format that enjoys support from a shipping browser, and it consistently beats the web\u2019s other image formats by a wide margin.<\/p>\n<h2>Can I Adopt AVIF for Images?<\/h2>\n<p><a href=\"https:\/\/caniuse.com\/avif\">Yes!<\/a><\/p>\n<p>Desktop Chrome shipped AVIF support last Fall, and Firefox will ship AVIF support next week. Mobile Chrome will be on board in early March and, when that happens, <strong>most<\/strong> web traffic will come from browsers that work with AVIF.<\/p>\n<p>Safari remains mum, but given that HEIC\u2019s patent story is web hostile and that Apple is a founding member of the Alliance for Open Media, the odds look good.<\/p>\n<h2>How Do I Do That?<\/h2>\n<p>While you wait\u2014for years\u2014for universal support for AVIF and for nonsupporting browser versions to vanish from the scene, the only responsible way to serve AVIFs on the web is with fallbacks:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;picture&gt;\n  &lt;source type=&quot;image\/avif&quot; srcset=&quot;dog.avif&quot; \/&gt;\n  &lt;source type=&quot;image\/webp&quot; srcset=&quot;dog.webp&quot; \/&gt;\n  &lt;img src=&quot;dog.jpg&quot; alt=&quot;A dog chasing a ball.&quot; \/&gt;\n&lt;\/picture&gt;\n<\/code><\/pre>\n<p>To actually generate the little guys, you have a couple of options:<\/p>\n<p>First, you can encode AVIFs with the amazing <a href=\"https:\/\/squoosh.app\">Sqoosh app<\/a>, manually tuning them for a tradeoff between optimal quality and file size.<\/p>\n<p>Or, on Cloudinary, add <code>f_avif,q_auto<\/code> to the URLs and let the platform figure out the details. For example:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>https:\/\/o.img.rodeo\/image\/upload\/f_avif,q_auto,w_800\/dogs\/7\n<\/code><\/pre>\n<p>You might notice that encoding AVIFs with Squoosh is <strong>slow<\/strong>.<\/p>\n<p>In fact, with certain encoding settings, the open-source libraries in Squoosh can spend a whopping 50x the effort encoding an AVIF versus a JPEG. Spending 10 full seconds encoding a single image goes against Cloudinary\u2019s on-the-fly transformation experience. Hence, instead of an off-the-shelf, royalty-free codec, Cloudinary leverages the best proprietary codec available. We recently switched over to <a href=\"https:\/\/visionular.com\">Visionular\u2019s<\/a> <a href=\"https:\/\/visionular.com\/Works\/msu-codec-study-aurora1-av1-encoder-results-2020\/\">best-of-breed<\/a> encoder, which is significantly more efficient.<\/p>\n<p>Last, we\u2019re working on integrating AVIF into <code>f_auto<\/code>. If all goes as planned, we\u2019ll release beta support for serving AVIFs in response to <code>f_auto<\/code> requests soon.<\/p>\n<h2>Why Not Go Ahead?<\/h2>\n<p>If your URLs contain <code>f_auto,q_auto<\/code> transformations, you\u2019ll be able to reap the huge benefits of AVIF soon with no implementation effort at all.<\/p>\n<p>If you just can\u2019t wait to start delivering images that are <strong>half the size of JPEGs<\/strong>, opt for AVIF by adding <code>f_avif,q_auto<\/code> to your URLs and delivering them, along with the appropriate fallbacks, using the  <code>&lt;picture&gt;<\/code> element.<\/p>\n<p>In short, AVIF is here and it\u2019s great. The easiest way to adopt it is with Cloudinary. Not using Cloudinary? You can <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">sign up today for free and for life<\/a>!<\/p>\n<script src=\"https:\/\/ericportis.com\/etc\/avif-blog-examples\/js\/components\/tabs-group.js\" type=\"module\" defer><\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22294,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,34,227],"class_list":["post-22293","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-avif","tag-performance-optimization"],"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>Cloudinary AVIF | How to Use the AVIF Codec with Cloudinary<\/title>\n<meta name=\"description\" content=\"AVIF beats JPEG and WebP in file size, delivering similar quality. Cloudinary allows you to adopt AVIF even while it\u2019s not universally supported by all browsers.\" \/>\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\/how_to_adopt_avif_for_images_with_cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cloudinary AVIF | How to Use the AVIF Codec With Cloudinary\" \/>\n<meta property=\"og:description\" content=\"AVIF beats JPEG and WebP in file size, delivering similar quality. Cloudinary allows you to adopt AVIF even while it\u2019s not universally supported by all browsers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-18T23:26:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-07T01:00:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718854\/Web_Assets\/blog\/Cloudinary_support_AVIF_22294d02a2\/Cloudinary_support_AVIF_22294d02a2.jpg?_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\/jpeg\" \/>\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\/how_to_adopt_avif_for_images_with_cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Cloudinary AVIF | How to Use the AVIF Codec With Cloudinary\",\"datePublished\":\"2021-02-18T23:26:22+00:00\",\"dateModified\":\"2025-11-07T01:00:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718854\/Web_Assets\/blog\/Cloudinary_support_AVIF_22294d02a2\/Cloudinary_support_AVIF_22294d02a2.jpg?_i=AA\",\"keywords\":[\"Asset Management\",\"AVIF\",\"Performance Optimization\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary\",\"url\":\"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary\",\"name\":\"Cloudinary AVIF | How to Use the AVIF Codec with Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718854\/Web_Assets\/blog\/Cloudinary_support_AVIF_22294d02a2\/Cloudinary_support_AVIF_22294d02a2.jpg?_i=AA\",\"datePublished\":\"2021-02-18T23:26:22+00:00\",\"dateModified\":\"2025-11-07T01:00:25+00:00\",\"description\":\"AVIF beats JPEG and WebP in file size, delivering similar quality. Cloudinary allows you to adopt AVIF even while it\u2019s not universally supported by all browsers.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718854\/Web_Assets\/blog\/Cloudinary_support_AVIF_22294d02a2\/Cloudinary_support_AVIF_22294d02a2.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718854\/Web_Assets\/blog\/Cloudinary_support_AVIF_22294d02a2\/Cloudinary_support_AVIF_22294d02a2.jpg?_i=AA\",\"width\":1540,\"height\":847,\"caption\":\"Image showing graphic representation of Cloudinary AVIF compatibility with the AVIF and Cloudinary logos and an image of an airplane.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cloudinary AVIF | How to Use the AVIF Codec With Cloudinary\"}]},{\"@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":"Cloudinary AVIF | How to Use the AVIF Codec with Cloudinary","description":"AVIF beats JPEG and WebP in file size, delivering similar quality. Cloudinary allows you to adopt AVIF even while it\u2019s not universally supported by all browsers.","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\/how_to_adopt_avif_for_images_with_cloudinary","og_locale":"en_US","og_type":"article","og_title":"Cloudinary AVIF | How to Use the AVIF Codec With Cloudinary","og_description":"AVIF beats JPEG and WebP in file size, delivering similar quality. Cloudinary allows you to adopt AVIF even while it\u2019s not universally supported by all browsers.","og_url":"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2021-02-18T23:26:22+00:00","article_modified_time":"2025-11-07T01:00:25+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718854\/Web_Assets\/blog\/Cloudinary_support_AVIF_22294d02a2\/Cloudinary_support_AVIF_22294d02a2.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary"},"author":{"name":"","@id":""},"headline":"Cloudinary AVIF | How to Use the AVIF Codec With Cloudinary","datePublished":"2021-02-18T23:26:22+00:00","dateModified":"2025-11-07T01:00:25+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary"},"wordCount":10,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718854\/Web_Assets\/blog\/Cloudinary_support_AVIF_22294d02a2\/Cloudinary_support_AVIF_22294d02a2.jpg?_i=AA","keywords":["Asset Management","AVIF","Performance Optimization"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary","url":"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary","name":"Cloudinary AVIF | How to Use the AVIF Codec with Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718854\/Web_Assets\/blog\/Cloudinary_support_AVIF_22294d02a2\/Cloudinary_support_AVIF_22294d02a2.jpg?_i=AA","datePublished":"2021-02-18T23:26:22+00:00","dateModified":"2025-11-07T01:00:25+00:00","description":"AVIF beats JPEG and WebP in file size, delivering similar quality. Cloudinary allows you to adopt AVIF even while it\u2019s not universally supported by all browsers.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718854\/Web_Assets\/blog\/Cloudinary_support_AVIF_22294d02a2\/Cloudinary_support_AVIF_22294d02a2.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718854\/Web_Assets\/blog\/Cloudinary_support_AVIF_22294d02a2\/Cloudinary_support_AVIF_22294d02a2.jpg?_i=AA","width":1540,"height":847,"caption":"Image showing graphic representation of Cloudinary AVIF compatibility with the AVIF and Cloudinary logos and an image of an airplane."},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cloudinary AVIF | How to Use the AVIF Codec With Cloudinary"}]},{"@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\/v1649718854\/Web_Assets\/blog\/Cloudinary_support_AVIF_22294d02a2\/Cloudinary_support_AVIF_22294d02a2.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22293","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=22293"}],"version-history":[{"count":11,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22293\/revisions"}],"predecessor-version":[{"id":39163,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22293\/revisions\/39163"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22294"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}