عرض صور زخرفية محسّنة

يؤدي عرض الصور الزخرفية المحسّنة عبر 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
  );
}