معرفی
تصاویر فشرده شده در AVIF نیمی از فضای ذخیره سازی JPEG و WebP را اشغال می کنند. از استاندارد HEIF ISO و کدک AV1 Mozilla، Google، Cisco و دیگران استفاده می کند. از سوی دیگر، ارائه دهنده CDN Cloudflare خدمات میزبانی و توزیع را برای وب سایت ها برای بهینه سازی بارگذاری محتوا برای کاربر ارائه می دهد. در 3 اکتبر، Cloudflare پشتیبانی از تحویل خودکار تصویر AVIF را اعلام کرد. اگر آمار وب را بررسی کنیم، می بینیم که بیش از نیمی از اندازه متوسط وب سایت را تصاویر اشغال می کنند. ما همچنین می توانیم آن را در مورد 15 درصد از وب سایت ها توسط Cloudflare طراحی شده اند، که به Cloudflare اهرم زیادی برای افزایش سرعت وب می دهد.
بهینه سازی تصاویر در قالب تصویر جدید AVIF نقطه عطفی برای سریعتر کردن وب است. فشرده سازی تصویر بهبود یافته است می تواند استفاده از پهنای باند را کاهش دهد و عملکرد وب را بهبود بخشد. خدمات و شرکت هایی مانند Discord، ILovePDF، Hubspot و Zendesk همگی از فناوری ارائه شده توسط Cloudflare برای عملکرد استفاده می کنند. ما فرض می کنیم که شما در این صفحه هستید زیرا از خدمات Cloudflare استفاده می کنید و می خواهید پشتیبانی AVIF را روشن کنید. اوه، ضمنا، این پست به هیچ وجه حمایت مالی نمی شود. اجازه بدید ببینم:
پشتیبانی از Cloudflare
با توجه به آخرین پست وبلاگ خود در مورد فرمت فایل AVIF، Cloudflare تصمیم گرفت از AVIF به دلیل مزایای زیر پشتیبانی کند:
- بزرگترین ایرادات WebP را برطرف می کند
- از نسل بعدی کدک ویدیویی VP10 استفاده می کند
- به عمق رنگ 8 بیتی محدود نمی شود و از رنگ 12 بیتی پشتیبانی می کند
- پشتیبانی از محدوده دینامیکی بالا
- از تکنیک فشرده سازی chrome-from-luma برای اندازه فایل کوچکتر استفاده می کند
- در حال حاضر شاهد پذیرش سریعتر از کدک‌های بدون حق امتیاز قبلی است
- یک فرمت غنی از امکانات با امکانات زیاد است
- در حال حاضر چندین پیاده سازی مستقل مانند rav1e،
طرح کسب و کار
قابلیت تغییر اندازه تصاویر را به فرمت AVIF تبدیل می کند. متأسفانه، این ویژگی رایگان نیست بلکه بخشی از طرح تجاری است. از آنجایی که یک طرح تجاری حدود 200 دلار یا بیشتر در ماه هزینه دارد، برای چنین ویژگی جزئی بیش از حد به نظر می رسد.
با این حال، در بخش نظرات دیگری از وبلاگ Cloudflare، Kornel Lesinski از Cloudflare گفت که تبدیل خودکار تصاویر شما به بهترین نوع برای کاربران شما در نهایت بخشی از برنامه های حرفه ای آنها در آینده خواهد بود. برنامه های حرفه ای از 20 دلار در ماه شروع می شوند و ویژگی های بسیار بیشتری دارند. انتخاب خودکار بهترین تنظیمات TCP، بهینه سازی خودکار موبایل و تصویر، فایروال بهتر، کپچاها، تجزیه و تحلیل حافظه پنهان و غیره. سایت اینترنتی.
کارگران
مرورگرهایی که از AVIF پشتیبانی می کنند، یک یادداشت تصویر/avif را به هدر درخواست پذیرش خود اضافه می کنند. برای درخواست فرمت AVIF از ماژول تغییر اندازه تصویر Cloudflare، گزینه format را روی avif قرار دهید. با استفاده از a فیلمنامه کارگر، می توانید به راحتی پشتیبانی AVIF را به صورت خودکار شناسایی و فعال کنید:
addEventListener('fetch', event => {
const imageURL = "https://yourdomain.com/image.jpg";
const resizingOptions = {
width: 800,
sharpen: 1.0,
};
const accept = event.request.headers.get("accept");
const isAVIFSupported = /image\/avif/.test(accept);
if (isAVIFSupported) {
resizingOptions.format = "avif";
}
event.respondWith(fetch(imageURL), {cf:{image: resizingOptions}})
})تغییر اندازه از طریق گزینه های یک درخواست فرعی واکشی در یک کارگر انجام می شود. همچنین عملکرد پویا بیشتر توابع تصویر بر اساس وضعیت شبکه می تواند مفید باشد. اگر بازدیدکنندگان شما پهنای باندی داشته باشند که از آن پشتیبانی می‌کند، تصاویر واضح در 4K هنوز باورنکردنی هستند و شما همچنان می‌توانید اندازه فایل بزرگ را مدیریت کنید.
عنصر تصویر
در آموزش ما در مورد نحوه استفاده از avif در HTML، ما به شما ارائه می دهیم
عنصر به عنوان بهترین گزینه برای ارائه فایل های AVIF در یک محیط HTML. اگر نمی‌خواهید از Workers استفاده کنید، Cloudflare به شما امکان می‌دهد از نقطه پایانی بهینه‌سازی تصویر برای انجام تبدیل استفاده کنید.
<picture>
<source type="image/avif"
srcset="/cdn-cgi/image/format=avif/image.jpg">
<img src="/image.jpg">
</picture>به خاطر داشته باشید که پشتیبانی از فرمت تصویر AVIF هنوز وجود ندارد. با این حال، فروشندگانی مانند اپل برای سافاری ادغام را تایید کرده اند. لطفاً برای اطلاعات بیشتر در مورد Cloudflare و پشتیبانی AVIF آنها، به منابع زیر نگاه کنید. به همین ترتیب، ما به هیچ وجه حمایت مالی نمی‌شویم، اما دوست داریم ببینیم شرکت‌ها فناوری را پیش می‌برند، کاری که Cloudflare مرتباً انجام می‌دهد. آنها قبلاً از HTTP/3 پشتیبانی اولیه دارند. آیا چیز دیگری وجود دارد که بخواهید در مورد avif بدانید؟ آیا پیشنهاد خوبی برای اسکریپت کارگر پیشرفته دارید؟ در توییتر جاستین به ما بگویید.