ارائه تصاویر تزئینی بهینه‌شده

ارائه تصاویر تزئینی بهینه‌شده ازطریق CSS عملکرد درک‌شده را بدون فدا کردن کیفیت بصری بهبود می‌بخشد. بااستفاده از تابع CSS image-set()، می‌توانید چندین گزینه برای یک تصویر پس‌زمینه یا ماسک به مرورگر ارائه دهید. می‌توانید قالب‌های مدرن (مانند AVIF یا WebP) را درکنار وضوح‌های مختلف (مانند 1x و 2x) مشخص کنید. مرورگر به‌طور پویا کوچک‌ترین تصویر سازگار را که تراکم پیکسل مناسبی برای دستگاه کاربر ارائه می‌دهد انتخاب می‌کند.

احتیاط: اگر تصویر احتمالاً عنصر «بزرگ‌ترین نقاشی دارای محتوا» (LCP) باشد (برای مثال، یک بنر قهرمان بزرگ)، توجه داشته باشید که تصاویر ارجاع‌شده در CSS ازطریق image-set()‎ توسط اسکنر پیش‌بارگذاری مرورگر قابل‌شناسایی نیستند. این کار می‌تواند بار کردن تصویر را به‌طور قابل‌توجهی به‌تأخیر بیندازد و به «بزرگ‌ترین نقاشی دارای محتوا» آسیب برساند. برای نامزدهای LCP، استفاده از برچسب استاندارد HTML <img> یا <picture> را به‌جای آن یا به‌عنوان جایگزین درنظر بگیرید، همچنین پیش‌بارگیری تصویر بااستفاده از گزینه <link rel=preload> با مشخصه media.

پیاده‌سازی

تابع image-set() در هر جایی که CSS انتظار مقدار <image> را دارد استفاده می‌شود، معمولاً در background-image، content، یا mask-image. توجه داشته باشید که اگرچه ارائه قالب تصویر ازطریق type() و وضوح (مانند 1x یا 2x) بهترین نتایج را به‌همراه دارد، اما هر دو این آرگومان‌ها اختیاری هستند.

.gallery-item {
  /* Provide multiple resolutions and formats using image-set() */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.webp") type("image/webp") 1x,
    url("gallery-2x.webp") type("image/webp") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
  
  /* Standard decorative properties */
  background-size: cover;
  background-position: center;
}

راهبردهای جایگزین

برای مرورگرهای قدیمی‌تر که از تابع image-set() پشتیبانی نمی‌کنند، باید یک اعلان تصویر استاندارد قبل‌از قانون image-set() ارائه دهید. این استراتژی ارتقای پیش‌رو به ماهیت آبشاری CSS متکی است: قوانین پشتیبانی‌نشده نادیده گرفته می‌شوند.

.gallery-item {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  background-image: url("gallery.jpg");
  
  /* Modern browsers will apply this and override the fallback */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
}