فرمت های تصویر: AVIF

فرمت فایل تصویری AV1 (AVIF) یک رمزگذاری مبتنی بر کدک ویدیویی منبع باز AV1 است. AVIF حتی جدیدتر از WebP است، از سال 2020 فقط در کروم و اپرا، فایرفاکس در سال 2021 و سافاری در سال 2022 پشتیبانی می‌شود. مانند WebP، AVIF نیز در نظر دارد تا به هر مورد قابل استفاده برای تصاویر شطرنجی در وب بپردازد: انیمیشن‌های GIF مانند، شفافیت PNG مانند و کیفیت ادراکی بهبود یافته در اندازه فایل های کوچکتر از JPEG یا WebP.

تاکنون، AVIF وعده داده است. یک چارچوب آزمایشی که توسط Netflix - یکی از اعضای مؤسس Alliance for Open Media ، گروهی که مسئول توسعه کدک AV1 است، ایجاد شده است - کاهش قابل توجهی در اندازه فایل در مقایسه با JPEG یا WebP نشان می‌دهد. مطالعات اضافی توسط تیم کدک‌های کلودیناری و کروم، آن را با استانداردهای رمزگذاری فعلی مقایسه کرده است.

اگرچه ابزارسازی نسبتاً محدود است، می‌توانید و باید آزمایش AVIF را از امروز آغاز کنید ، به عنوان یکی از رمزگذاری‌های ارائه شده توسط Squoosh:

پشتیبانی از مرورگر

اکنون، اگر فکر می‌کنید چرا ما زمان زیادی را صرف بحث در مورد JPEG کرده‌ایم، در حالی که AVIF و WebP می‌توانند نتایج با کیفیت بالاتر و اندازه فایل‌های بسیار کوچک‌تری را به ما ارائه دهند، به این دلیل است که آنها - و هر کدگذاری تصویر جدید - با جذابیت زیادی همراه هستند. پشتیبانی از GIF، PNG و JPEG در همه مرورگرها تضمین شده است و برای چندین دهه است. نسبت به آن فرمت‌های تصویر قدیمی، AVIF کاملاً جدید است، و در حالی که پشتیبانی از WebP در مرورگرهای مدرن عالی است، در کل وب ارائه نشده است.

همانطور که می‌توانید تصور کنید، زمان و تلاش زیادی صرف توسعه فرمت‌های تصویری جدید شده است که هدفشان بهبود کیفیت و اندازه انتقال است. فرمت‌هایی مانند WebP، AVIF، و JPEG XL ( در هیچ مرورگری پشتیبانی نمی‌شوند ) هدفشان تبدیل شدن به راه‌حل یکپارچه‌کننده برای تصاویر شطرنجی در وب است، همانطور که SVG برای بردارها است. موارد دیگر، مانند JPEG 2000 (فقط در سافاری پشتیبانی می‌شود) برای برآورده کردن موارد استفاده مشابه یک JPEG پایه در نظر گرفته شده بود، اما روش‌های فشرده‌سازی را برای ارائه تصویری مشابه بصری اما بسیار کوچک‌تر بهبود می‌بخشند.

در حالی که برخی از این فرمت‌های جدیدتر نام JPEG را به اشتراک می‌گذارند، رمزگذاری‌های آن‌ها به همان اندازه که جاوا اسکریپت با جاوا تفاوت اساسی دارد. مرورگری که از رمزگذاری معینی پشتیبانی نمی‌کند، به هیچ وجه نمی‌تواند آن فایل تصویر را تجزیه کند - مثل این است که من به شما دستور داده‌ام شبکه پیکسل کاغذ نمودار خود را به زبانی که نمی‌فهمید پر کنید. مرورگر داده‌های تصویر را درخواست می‌کند، سعی می‌کند آن‌ها را تجزیه کند، و در صورت عدم موفقیت، آن‌ها را بدون ارائه هیچ چیزی دور می‌اندازد. منبع تصویری که خارج از مرورگرهای مدرن رندر نمی‌شود، برای محتوای ما و به طور کلی وب، یک تصویر شکسته و پهنای باند هدر رفته برای تعداد زیادی از کاربران در سراسر جهان، نقطه شکست بزرگی خواهد بود. شما نباید یک وب انعطاف پذیرتر را فدای یک وب با عملکرد بیشتر کنید.

برای مدت طولانی، دوست تک‌نگر ما <img> استفاده از هر فرمت تصویر جدید را به شدت دشوار می‌کرد، مهم نیست که چقدر امیدوارکننده به نظر می‌رسید. به یاد داشته باشید، <img> فقط از یک فایل منبع پشتیبانی می‌کرد و برای انتقال سریع آن فایل بسیار بهینه‌سازی شده بود—در واقع آنقدر سریع که نمی‌توانستیم آن درخواست را از طریق جاوا اسکریپت رهگیری کنیم. تا همین اواخر، تنها گزینه قابل اجرا این بود که به همه کاربران نوع جدید تصویر ارائه شود، و درخواست یکی از فرمت‌های «میراثی» زمانی که مرورگر خطایی را اجرا می‌کرد - انتقال فایل دوم پس از هدر رفتن تصویر اول، انجام می‌شد.

به همین دلیل و بیشتر، <img> همانطور که برای چندین دهه وجود داشت باید تغییر می کرد. در ماژول بعدی، Responsive Images ، با ویژگی های معرفی شده به مشخصات HTML برای رسیدگی به این مسائل و نحوه استفاده از آنها در کارهای روزمره خود آشنا خواهید شد.