[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-content-what-is-avif":3},"\u003Cp>Have you ever wondered what AVIF is? Why is it currently popping up everywhere? What are the advantages, and can I utilize it for my own web presence?\u003C\u002Fp>\u003Cp>I got you covered! In this blog, we are going to discuss what it is, how it works and how you can use it to enhance your own webpages.\u003C\u002Fp>\u003Ch3 id=\"what-is-avif\">What is AVIF?\u003C\u002Fh3>\u003Cp>AVIF is an image format, that offers superior compression capabilities while preserving extremely high quality. It utilizes the AV1 compression, which delivers smaller file sizes compared to the JPEG format. When it comes to SEO, AVIF can help you decrease loading times and therefore makes your webpage more performant. By the way, \u003Ca href=\"https:\u002F\u002Fcroppy.at\u002F\" rel=\"noreferrer\">Croppy\u003C\u002Fa> fully supports the AVIF format, enabling you  to conveniently use it for your own CMS systems like WordPress.\u003C\u002Fp>\u003Cfigure class=\"kg-card kg-image-card\">\u003Cimg src=\"\u002Fimages\u002Fblog\u002Fwhat-is-avif-seadev_studios_a_stunning_picture_or_illustration_that_shows_th_745554ef-504c-4c1b-84f6-c7e32b629280_1024x1024.webp\" class=\"kg-image\" alt=\"Illustration representing the AVIF image format and its compression capabilities\" loading=\"lazy\" width=\"1024\" height=\"1024\" srcset=\"\u002Fimages\u002Fblog\u002Fwhat-is-avif-seadev_studios_a_stunning_picture_or_illustration_that_shows_th_745554ef-504c-4c1b-84f6-c7e32b629280_1024x1024.webp 600w, \u002Fimages\u002Fblog\u002Fwhat-is-avif-seadev_studios_a_stunning_picture_or_illustration_that_shows_th_745554ef-504c-4c1b-84f6-c7e32b629280_1024x1024.webp 1000w, \u002Fimages\u002Fblog\u002Fwhat-is-avif-seadev_studios_a_stunning_picture_or_illustration_that_shows_th_745554ef-504c-4c1b-84f6-c7e32b629280_1024x1024.webp 1024w\" sizes=\"(min-width: 720px) 720px\">\u003C\u002Ffigure>\u003Ch3 id=\"why-would-i-want-to-use-it\">Why would I want to use it?\u003C\u002Fh3>\u003Cp>The real question is, why wouldn't you? AVIF is like the best of all formats. You can utilize the transparency of PNG, the great compression of WEBP, use animations just like GIF and utilize color depths of up to 12 bits! AVIF even has better image quality than JPEG, with less image blocking while being smaller than any other format. \u003C\u002Fp>\u003Cp>The format is already supported by all major browsers in the newer versions (2020 upwards),  including \u003Ca href=\"https:\u002F\u002Fcaniuse.com\u002Favif\" rel=\"noreferrer\">Chrome, Firefox and Safari. \u003C\u002Fa>\u003C\u002Fp>\u003Ch3 id=\"advantages-of-avif\">Advantages of AVIF\u003C\u002Fh3>\u003Cp>There are many, many advantages of AVIF, here are the most important ones:\u003C\u002Fp>\u003Cul>\u003Cli>Royalty free\u003Cul>\u003Cli>use it without having to worry about licenses\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>optimal compression\u003Cul>\u003Cli>one of the best ones available\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>Many, modern features\u003Cul>\u003Cli>like HDR, transparency, animations, ...\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>Backed by the big players (Apple, Google, Netflix, ...)\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"can-i-convert-old-images-to-avif\">Can I convert old images to AVIF?\u003C\u002Fh3>\u003Cp>Yes. You can use \u003Ca href=\"https:\u002F\u002Fcroppy.at\u002F\" rel=\"noreferrer\">this\u003C\u002Fa> tool here, to convert any image to AVIF.\u003C\u002Fp>\u003Ch3 id=\"does-wordpress-support-it\">Does WordPress support it?\u003C\u002Fh3>\u003Cp>WordPress added AVIF support with \u003Ca href=\"https:\u002F\u002Fmake.wordpress.org\u002Fcore\u002F2024\u002F02\u002F23\u002Fwordpress-6-5-adds-avif-support\u002F\" rel=\"noreferrer\">version 6.5\u003C\u002Fa>. They have seen the immense potential it holds and decided to utilize it to make WordPress even more flexible and innovative. Be assured, in the next years we will see AVIF popping up everywhere, as it holds many unique advantages over other formats.\u003C\u002Fp>\u003Ch3 id=\"conclusion\">Conclusion\u003C\u002Fh3>\u003Cp>Summing up, AVIF is one of the newest image formats and contains many unique features, that optimize how we can use pictures. Especially because of the modern AV1 compression algorithm, file sizes are at minimum while still maintaining almost perfect quality. When it comes to websites, AVIF can help you reduce the initial loading time and improve the overall performance of your webpage.\u003C\u002Fp>\u003Cp>If you are tired of managing your website's images, tired of images being too big or wrongfully cropped, maybe take a look at \u003Ca href=\"https:\u002F\u002Fcroppy.at\u002F\" rel=\"noreferrer\">this\u003C\u002Fa> tool here. It even supports direct upload to your \u003Ca href=\"https:\u002F\u002Fcroppy.at\u002Fguides\u002Fwebsites\" rel=\"noreferrer\">favorite CMS system\u003C\u002Fa> and uses AI to choose the perfect crop for each image.\u003C\u002Fp>\u003Cp>To be updated all the time, just sign up!\u003C\u002Fp>\u003Cdiv class=\"kg-card kg-signup-card kg-width-wide \" data-lexical-signup-form=\"\" style=\"background-color: #F0F0F0; display: none;\">\n            \n            \u003Cdiv class=\"kg-signup-card-content\">\n                \n                \u003Cdiv class=\"kg-signup-card-text \">\n                    \u003Ch2 class=\"kg-signup-card-heading\" style=\"color: #000000;\">\u003Cspan style=\"white-space: pre-wrap;\">Sign up for SEADEV Studios Blog\u003C\u002Fspan>\u003C\u002Fh2>\n                    \u003Cp class=\"kg-signup-card-subheading\" style=\"color: #000000;\">\u003Cspan style=\"white-space: pre-wrap;\">News, Updates, Learnings & Insights\u003C\u002Fspan>\u003C\u002Fp>\n                    \n        \u003Cform class=\"kg-signup-card-form\" data-members-form=\"signup\">\n            \n            \u003Cdiv class=\"kg-signup-card-fields\">\n                \u003Cinput class=\"kg-signup-card-input\" id=\"email\" data-members-email=\"\" type=\"email\" required=\"true\" placeholder=\"Your email\">\n                \u003Cbutton class=\"kg-signup-card-button kg-style-accent\" style=\"color: #FFFFFF;\" type=\"submit\">\n                    \u003Cspan class=\"kg-signup-card-button-default\">Subscribe\u003C\u002Fspan>\n                    \u003Cspan class=\"kg-signup-card-button-loading\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" height=\"24\" width=\"24\" viewBox=\"0 0 24 24\">\n        \u003Cg stroke-linecap=\"round\" stroke-width=\"2\" fill=\"currentColor\" stroke=\"none\" stroke-linejoin=\"round\" class=\"nc-icon-wrapper\">\n            \u003Cg class=\"nc-loop-dots-4-24-icon-o\">\n                \u003Ccircle cx=\"4\" cy=\"12\" r=\"3\">\u003C\u002Fcircle>\n                \u003Ccircle cx=\"12\" cy=\"12\" r=\"3\">\u003C\u002Fcircle>\n                \u003Ccircle cx=\"20\" cy=\"12\" r=\"3\">\u003C\u002Fcircle>\n            \u003C\u002Fg>\n            \u003Cstyle data-cap=\"butt\">\n                .nc-loop-dots-4-24-icon-o{--animation-duration:0.8s}\n                .nc-loop-dots-4-24-icon-o *{opacity:.4;transform:scale(.75);animation:nc-loop-dots-4-anim var(--animation-duration) infinite}\n                .nc-loop-dots-4-24-icon-o :nth-child(1){transform-origin:4px 12px;animation-delay:-.3s;animation-delay:calc(var(--animation-duration)\u002F-2.666)}\n                .nc-loop-dots-4-24-icon-o :nth-child(2){transform-origin:12px 12px;animation-delay:-.15s;animation-delay:calc(var(--animation-duration)\u002F-5.333)}\n                .nc-loop-dots-4-24-icon-o :nth-child(3){transform-origin:20px 12px}\n                @keyframes nc-loop-dots-4-anim{0%,100%{opacity:.4;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}\n            \u003C\u002Fstyle>\n        \u003C\u002Fg>\n    \u003C\u002Fsvg>\u003C\u002Fspan>\n                \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"kg-signup-card-success\" style=\"color: #000000;\">\n                Email sent! Check your inbox to complete your signup.\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"kg-signup-card-error\" style=\"color: #000000;\" data-members-error=\"\">\u003C\u002Fdiv>\n        \u003C\u002Fform>\n        \n                    \u003Cp class=\"kg-signup-card-disclaimer\" style=\"color: #000000;\">\u003Cspan style=\"white-space: pre-wrap;\">No spam. Unsubscribe anytime.\u003C\u002Fspan>\u003C\u002Fp>\n                \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>"]