از تصاویر AVIF به عنوان پس زمینه CSS استفاده کنید

معرفی

همانطور که در این آموزش می توانید بخوانید، استفاده از تصاویر AVIF از طریق HTML آسان است. علاوه بر این، آسان است زیرا HTML یک راهنمایی از نوع رسانه ارائه می دهد که به مرورگر کمک می کند بهترین نسخه تصویر شما را ارائه دهد. متاسفانه CSS چنین گزینه ای را ندارد. با این حال، با یک تابع ساده جاوا اسکریپت، می توانیم به راحتی از WebP و AVIF پشتیبانی کنیم. ما یک اسکریپت تشخیص ایجاد کرده‌ایم که با نوشتن کلاس‌ها، عنصر HTML صفحه شما را دستکاری می‌کند.

CSS چگونه کار می کند

باید به یاد داشته باشیم که در CSS قانون اول برنده نمی شود، اما آخرین قانون برنده است. ما یک اسکریپت ایجاد کرده‌ایم که پشتیبانی AVIF و WebP را با بارگذاری یک تصویر پیکسلی 1×1 با کدگذاری AVIF بررسی می‌کند. اگر مرورگر با موفقیت تصویر AVIF را بارگیری کند، عنصر HTML یک کلاس “avif” دریافت می کند. اگر مرورگر تصویر AVIF را بارگیری نکند، اسکریپت با استفاده از روشی که در بالا توضیح داده شد، پشتیبانی مرورگر از WebP را بیشتر بررسی می کند. اگر مرورگر شما با موفقیت تصویر را بارگیری کند، عنصر HTML یک کلاس “webp” دریافت می کند. البته این تابع اختیاری است و شما می توانید آن را با توجه به تنظیمات خود حذف کنید. اگر بعید است که مرورگر شما این تست را قبول نکند، عنصر HTML کلاسی به نام “fallback” دریافت می کند.

<html class="fallback"></html> <!-- you have to use jpg (oh god)-->
<html class="webp"></html> <!-- you can use webp-->
<html class="avif"></html> <!-- you can use avif (heck yeah!)-->

اسکریپت تشخیص پشتیبانی AVIF

برای جلوگیری از تغییرات قابل مشاهده تصویر هنگام افزودن کلاس avif/webp به DOM، محتوای زیر را به عنوان یک اسکریپت درون خطی در هدر خود بالای هر محتوای CSS اضافه کنید. نسخه کوچک شده این اسکریپت یک قطعه کوچک 600 بایتی است و بارگیری آن 5 میلی‌ثانیه طول می‌کشد، که برای مزایایی که ارائه می‌کند، کاملاً خوب است.

function addClass(className) {
 document.documentElement.classList.add(className);
}
var avif = new Image();
avif.src =
 "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=";
avif.onload = function () {
 addClass("avif");
};
avif.onerror = function () {
 check_webp_feature(function (isSupported) {
  if (isSupported) {
   return addClass("webp");
  }
  return addClass("fallback");
 });
};
function check_webp_feature(callback) {
var img = new Image();
img.onload = function () {
var result = img.width >  && img.height > ;
callback(result);
};
img.onerror = function () {
callback(false);
};
img.src =
"data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==";
}

نسخه کوچک شده (800 بایت):

function addClass(A){document.documentElement.classList.add(A)}var avif=new Image;function check_webp_feature(a){var e=new Image;e.onload=function(){var A=<e.width&&<e.height;a(A)},e.onerror=function(){a(!1)},e.src="data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA=="}avif.src="data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=",avif.onload=function(){addClass("avif")},avif.onerror=function(){check_webp_feature(function(A){return addClass(A?"webp":"fallback")})};

قطعه کد

پس از پیاده سازی، می توانیم از CSS زیر به دلیل کلاس های سطح بالا و cascading استفاده کنیم.

/* Simple approach */
.fallback .img { background-image: url('avif-in-css.jpg') }
.webp .img { background-image: url('avif-in-css.webp') }
.avif .img { background-image: url('avif-in-css.avif') }
/* Add Support for high Pixel Ratio Devices (Retina) */
@media
  screen and (min-resolution: 2dppx),
  screen and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-resolution: 192dpi) {
  .fallback img { background-image: url('[email protected]') }
  .webp .img { background-image: url('av[email protected]') }
  .avif .img { background-image: url('[email protected]') }
}

استفاده از این اسکریپت منجر به اسکرین شات های زیر می شود. کروم در حال حاضر از AVIF پشتیبانی می کند، بنابراین AVIF نمایش داده می شود. Edge از AVIF پشتیبانی نمی کند و از WebP پشتیبانی می کند، بنابراین سایت ما دارای کلاس webp است.

وب سایت ما در کروم یک کلاس avif دریافت می کند microsoft edge با کلاس webp در عنصر html

میکس پس زمینه SCSS

در اوایل این هفته، Raoul Kramer یک میکس پس‌زمینه SCSS را منتشر کرد که می‌تواند برای پشتیبانی از AVIF و WebP استفاده شود.

@mixin bg-url($url, $url2x: false, $webp1x: false, $webp2x: false, $avif1x: false, $avif2x: false) {
 background-image: url($url);
 @if $webp1x { .webp & { background-image: url($webp1x) }}
 @if $avif1x { .avif & { background-image: url($avif1x) }}
 @if $url2x {
  @media
  screen and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {
   background-image: url($url2x);
   @if $webp2x {.webp & {background-image: url($webp2x)}}
   @if $avif2x {.avif & {background-image: url($avif2x)}}
  }
 }
}

اجرای آینده

کنسرسیوم وب جهانی (W3C) در حال توسعه ماژول تصاویر CSS سطح 4 است که به ما امکان می دهد نوع تصویر را تعریف کنیم. ویژگی image-set ما را قادر می سازد تا فرمت های مختلف تصویر را مشخص کنیم. مرورگر اولین فرمت تصویر پشتیبانی شده توسط مرورگر را ارائه می کند.
مثال زیر نشان می‌دهد که type() چگونه می‌تواند چندین تصویر را در قالب‌های با کیفیت بالا و قدیمی‌تر ارائه دهد که بیشتر مورد استفاده قرار می‌گیرند. توجه داشته باشید که AVIF ابتدا نشان داده می شود، زیرا هر دو تصویر دارای وضوح یکسان هستند. JPEG که در رتبه دوم قرار می گیرد، به طور خودکار در عوامل کاربری که از تصاویر AVIF پشتیبانی می کنند حذف می شود. با این حال، عوامل کاربری قدیمی‌تر تصاویر AVIF را نادیده می‌گیرند، زیرا می‌دانند که از فایل‌های تصویر/avif پشتیبانی نمی‌کنند و در عوض تصاویر JPEG را انتخاب می‌کنند.

background-image:
 image-set(
  "zebra.avif" type("image/avif"),
  "zebra.webp" type("image/webp"),
  "zebra.png" type("image/png")
 );

در حال حاضر، 90 درصد مرورگرها از مجموعه تصاویر پشتیبانی می کنند اما هنوز از اعلان نوع پشتیبانی نمی کنند. این یک ویژگی کاملاً جدید برای CSS4 است. تا زمانی که مرورگرها از این ویژگی پشتیبانی نکنند، باید از جاوا اسکریپت برای شناسایی پشتیبانی AVIF و WebP استفاده کنیم.

تولید تصاویر AVIF

ایجاد فایل های AVIF با avif.io بازی کودکانه است. فایل ها را به داخل مبدل بکشید و بقیه کارها را انجام می دهد. در کمترین زمان بهترین نتیجه را خواهید گرفت.

به روز رسانی

با تشکر فراوان از Stephanie Hsu برای اشاره به اینکه تصویر بازگشتی نیز به کلاس نیاز دارد، در غیر این صورت JPG و AVIF دانلود خواهند شد. ما آموزش را به روز کردیم!

سئو PBN | خبر های جدید سئو و هک و سرور
مطالب پیشنهادی  پشتیبانی Baidu AVIF | avif.io ✨