خاصية image-set في CSS: إتقان اختيار الصور المتجاوبة لجمهور عالمي

في المشهد الرقمي المعاصر الذي يعتمد بشكل كبير على العناصر البصرية، يعد تقديم الصورة المناسبة للمستخدم المناسب في الوقت المناسب أمرًا بالغ الأهمية. مع وصول محتوى الويب إلى جمهور عالمي متنوع، أصبحت الحاجة إلى معالجة متطورة للصور أكثر إلحاحًا. يصل المستخدمون إلى المواقع الإلكترونية عبر مجموعة واسعة من الأجهزة، بدءًا من شاشات الهواتف المحمولة الصغيرة وأجهزة الكمبيوتر المكتبية القياسية وصولًا إلى شاشات Retina عالية الدقة والشاشات فائقة العرض، وغالبًا ما يكون ذلك في ظل ظروف شبكة متباينة. يمثل هذا تحديًا كبيرًا للمطورين الذين يهدفون إلى توفير تجربة مثالية للجميع في كل مكان. بينما تقدم حلول مثل عنصر <picture> وسمة srcset إمكانيات قوية لاختيار الصور المتجاوبة، يوفر CSS نفسه حلاً أنيقًا وغالبًا ما يتم التغاضي عنه: وهو دالة image-set().

فهم الحاجة إلى اختيار الصور المتجاوبة

قبل الخوض في تفاصيل image-set()، من الضروري فهم سبب عدم كون اختيار الصور المتجاوبة ترفًا بل ضرورة. تأمل السيناريوهات التالية:

• دقة الجهاز: سيستفيد المستخدم الذي يتصفح موقعك على شاشة بدقة 4K من صور ذات دقة أعلى بكثير من شخص يستخدم هاتفًا ذكيًا عاديًا. إن إرسال صورة كبيرة وعالية الدقة إلى جهاز منخفض الدقة يهدر النطاق الترددي ويبطئ أوقات تحميل الصفحة. وعلى العكس، فإن إرسال صورة صغيرة ومنخفضة الدقة إلى شاشة عالية الدقة يؤدي إلى تشويش الصورة وتجربة بصرية سيئة.
• ظروف الشبكة: في أجزاء كثيرة من العالم، يمكن أن يكون الاتصال بالإنترنت غير موثوق به أو بطيئًا. سيقدر المستخدمون الذين لديهم خطط بيانات محدودة أو في المناطق ذات الإشارة الضعيفة ملفات الصور المحسّنة والأصغر حجمًا التي يتم تحميلها بسرعة وكفاءة.
• التوجيه الفني: في بعض الأحيان، تحتاج الصورة إلى الاقتصاص أو العرض بشكل مختلف اعتمادًا على حجم الشاشة أو التخطيط. قد تعمل الصورة الأفقية بشكل جيد على شاشة سطح المكتب العريضة ولكنها تحتاج إلى تكييفها لتناسب تنسيقًا رأسيًا أو مربعًا للعرض على الهاتف المحمول.
• تحسين الأداء: ترتبط أوقات التحميل الأسرع ارتباطًا مباشرًا بتحسين تفاعل المستخدم، وانخفاض معدلات الارتداد، وتحسين تصنيفات محركات البحث. يعد تسليم الصور بكفاءة حجر الزاوية في أداء الويب الحديث.

بينما تعد حلول HTML مثل <picture> ممتازة لتوفير مصادر صور مختلفة بناءً على استعلامات الوسائط أو تنسيقات الصور (مثل WebP)، تقدم image-set() نهجًا أصليًا في CSS، مما يسمح باختيار الصور الديناميكي مباشرة داخل أوراق الأنماط، وغالبًا ما يكون مرتبطًا بكثافة العرض.

تقديم خاصية image-set() في CSS

تتيح لك دالة CSS image-set() توفير مجموعة من الصور لخاصية CSS معينة، مما يمكّن المتصفح من اختيار الصورة الأنسب بناءً على دقة الشاشة (كثافة البكسل) وربما عوامل أخرى في المستقبل. وهي مفيدة بشكل خاص لصور الخلفية، والحدود، والعناصر الزخرفية الأخرى حيث تريد ضمان الدقة البصرية عبر الشاشات المختلفة دون اللجوء إلى JavaScript أو هياكل HTML معقدة لكل حالة.

الصيغة والاستخدام

الصيغة الأساسية لدالة image-set() هي كما يلي:

            background-image: image-set(
  'image-low.png' 1x,
  'image-high.png' 2x,
  'image-very-high.png' 3x
);

            

              
                Copy
              
            
          

دعنا نحلل هذه الصيغة:

• image-set(): هذه هي دالة CSS نفسها.
• عناوين URL للصور: داخل القوسين، تقدم قائمة من عناوين URL للصور مفصولة بفاصلة. يمكن أن تكون هذه المسارات نسبية أو مطلقة.
• واصفات الدقة: يتبع كل عنوان URL للصورة واصف دقة (مثل 1x، 2x، 3x). يخبر هذا المتصفح بكثافة البكسل التي صُممت الصورة من أجلها.
• 1x: يمثل الشاشات القياسية (1 بكسل CSS = 1 بكسل في الجهاز).
• 2x: يمثل الشاشات عالية الدقة (مثل شاشات Retina من Apple)، حيث يقابل 1 بكسل CSS بكسلين في الجهاز أفقيًا وبكسلين رأسيًا، مما يتطلب 4 أضعاف عدد البكسلات الفعلية.
• 3x (وأعلى): للشاشات ذات الكثافة الأعلى.

سيقوم المتصفح بتقييم الصور المتاحة واختيار الصورة التي تتطابق بشكل أفضل مع كثافة البكسل للجهاز الحالي. إذا لم يتطابق أي واصف، فإنه يعود عادةً إلى الصورة الأولى في المجموعة (1x).

مثال: تحسين صور الخلفية

تخيل أن لديك قسمًا رئيسيًا (hero section) يحتوي على صورة خلفية تحتاج إلى أن تبدو واضحة على كل من الشاشات القياسية وعالية الدقة. بدلاً من استخدام صورة واحدة كبيرة قد يتم تنزيلها دون داعٍ من قبل المستخدمين على الشاشات ذات الكثافة المنخفضة، يمكنك استخدام image-set():

            .hero-section {
  background-image: image-set(
    url('/images/hero-bg-1x.jpg') 1x,
    url('/images/hero-bg-2x.jpg') 2x
  );
  background-size: cover;
  background-position: center;
  height: 500px;
}

            

              
                Copy
              
            
          

في هذا المثال:

• المستخدمون على الشاشات القياسية (1x) سيستقبلون hero-bg-1x.jpg.
• المستخدمون على الشاشات عالية الكثافة (2x وما فوق) سيستقبلون hero-bg-2x.jpg، والتي يجب أن تكون نسخة ذات دقة أعلى من نفس الصورة.

يضمن هذا النهج حصول المستخدمين ذوي الشاشات عالية الكثافة على صورة أكثر وضوحًا دون إجبار المستخدمين على الشاشات القياسية على تنزيل ملف كبير بشكل غير ضروري.

دعم المتصفحات والحلول البديلة (Fallbacks)

بينما تعد image-set() ميزة قوية في CSS، يتطلب دعم المتصفح لها وتفاصيل تنفيذها دراسة متأنية، خاصة لجمهور عالمي حيث قد لا تزال إصدارات المتصفحات القديمة منتشرة.

دعم المتصفحات الحالي

تحظى image-set() بدعم جيد في المتصفحات الحديثة، بما في ذلك:

• Chrome (والمتصفحات القائمة على Chromium مثل Edge)
• Firefox
• Safari

ومع ذلك، هناك بعض الفروق الدقيقة:

• البادئات (Prefixes): قد تتطلب الإصدارات القديمة من بعض المتصفحات بادئات الموردين (vendor prefixes) (مثل -webkit-image-set()). بينما تخلت معظم المتصفحات الحديثة عنها، من المفيد أن تكون على دراية بها لتحقيق توافق أوسع.
• اختلافات الصيغة: تاريخيًا، كانت هناك اختلافات طفيفة في الصيغة. الصيغة القياسية الحالية مدعومة بشكل جيد بشكل عام.
• 2x كقيمة افتراضية: قد تتعامل بعض التطبيقات مع الواصف المفقود كحل بديل، ولكن الاعتماد على 1x الصريح هو أفضل ممارسة.

تنفيذ الحلول البديلة

من الضروري توفير آلية بديلة للمتصفحات التي لا تدعم image-set() أو للحالات التي لا يتطابق فيها أي من واصفات الدقة المحددة.

الطريقة القياسية للقيام بذلك هي بوضع إعلان background-image عادي *قبل* إعلان image-set(). سيحاول المتصفح تحليل image-set(). إذا لم يفهمها، فسيتجاهلها ويعود إلى الإعلان الأبسط الذي يسبقه.

            .hero-section {
  /* Fallback for older browsers */
  background-image: url('/images/hero-bg-fallback.jpg');

  /* Modern browsers using image-set() */
  background-image: image-set(
    url('/images/hero-bg-1x.jpg') 1x,
    url('/images/hero-bg-2x.jpg') 2x,
    url('/images/hero-bg-3x.jpg') 3x
  );

  background-size: cover;
  background-position: center;
  height: 500px;
}

            

              
                Copy
              
            
          

اعتبارات هامة للحلول البديلة:

• اختر صورة بديلة معقولة: يجب أن تكون هذه صورة محسّنة بشكل جيد توفر تجربة لائقة عبر معظم الأجهزة. قد تكون نسخة 1x أو نسخة محسّنة خصيصًا للمتصفحات القديمة.
• ترتيب CSS مهم: يجب أن يأتي الحل البديل أولاً. ستقوم الإعلانات اللاحقة بتجاوز أو استكمال الإعلانات السابقة إذا فهمها المتصفح.

مقارنة image-set() مع <picture> / srcset

من المهم فهم مكان image-set() ضمن مجموعة أدوات الصور المتجاوبة الأوسع:

• image-set(): بشكل أساسي لتبديل الدقة (كثافة البكسل) وهي الأنسب لصور الخلفية التي يتم التحكم فيها بواسطة CSS. إنه حل أصلي في CSS.
• <picture> و srcset: أكثر تنوعًا. يمكن استخدامهما للتوجيه الفني (الاقتصاص، نسب عرض إلى ارتفاع مختلفة) وتبديل التنسيق (على سبيل المثال، تقديم WebP للمتصفحات الداعمة و JPG لغيرها). يعملان على مستوى HTML ويستخدمان عادةً لعلامات <img>.

غالبًا، يوفر مزيج من هذه التقنيات الحل الأكثر قوة. قد تستخدم <picture> لصور المحتوى الرئيسية و image-set() للخلفيات الزخرفية.

تقنيات متقدمة واعتبارات عالمية

بينما تعد image-set() ممتازة لتبديل الدقة، يمكن توسيع تطبيقها، وتدخل العديد من الاعتبارات العالمية في الصورة.

استخدام تنسيقات صور مختلفة

تقبل دالة image-set() بشكل أساسي عناوين URL. ومع ذلك، تعتمد فعالية عناوين URL هذه على التنسيقات التي تختارها. بالنسبة للجماهير العالمية، يعد النظر في تنسيقات الصور الحديثة التي توفر ضغطًا وجودة أفضل أمرًا بالغ الأهمية.

• WebP: يوفر ضغطًا فائقًا مقارنةً بـ JPEG و PNG، مما يؤدي غالبًا إلى أحجام ملفات أصغر بجودة مماثلة أو أفضل.
• AVIF: تنسيق أحدث يمكن أن يوفر ضغطًا أكبر وميزات مثل دعم HDR.

بينما لا تحدد image-set() نفسها التنسيقات مباشرةً كما يمكن أن يفعل عنصر HTML <picture> باستخدام <source type="image/webp" ...>، يمكنك الاستفادة من دعم المتصفح لهذه التنسيقات من خلال توفير عناوين URL مختلفة داخل image-set(). ومع ذلك، هذا لا يضمن بطبيعته اختيار التنسيق. لاختيار التنسيق بشكل صريح، يظل عنصر <picture> هو الطريقة المفضلة.

إن اتباع نهج CSS أكثر مباشرة لاختيار التنسيق والدقة غير مدعوم أصلاً بواسطة دالة CSS واحدة بنفس الوضوح الذي يوفره عنصر <picture> في HTML. ومع ذلك، يمكنك تحقيق تأثير مماثل باستخدام قاعدة @supports أو عن طريق توفير إعلانات image-set() متعددة بتنسيقات مختلفة، مع الاعتماد على المتصفح لاختيار أول واحد يفهمه ويدعمه، وهو أمر أقل موثوقية.

لتحقيق تبديل حقيقي للتنسيق والدقة، يظل الجمع بين عنصر <picture> في HTML مع سمتي srcset و type هو الحل الأكثر قوة.

مستقبل image-set()

تعمل مجموعة عمل CSS بنشاط على تحسينات لـ image-set(). قد تسمح التكرارات المستقبلية بمعايير اختيار أكثر تطورًا تتجاوز مجرد الدقة، ومن المحتمل أن تشمل:

• سرعة الشبكة: اختيار صور ذات نطاق ترددي أقل على الاتصالات البطيئة.
• نطاق الألوان (Color Gamut): تقديم صور محسّنة لمساحات ألوان محددة (مثل شاشات Wide Color Gamut).
• التفضيلات: احترام تفضيلات المستخدم لجودة الصورة مقابل استخدام البيانات.

في حين أن هذه الميزات لم يتم تنفيذها على نطاق واسع بعد، فإن الاتجاه يشير إلى معالجة صور أكثر ذكاءً وتكيفًا داخل CSS.

استراتيجيات تحسين الأداء العالمية

عند خدمة جمهور عالمي، يعد تحسين تسليم الصور تحديًا متعدد الأوجه. تعد image-set() أداة واحدة ضمن مجموعة أدوات أكبر.

• شبكات توصيل المحتوى (CDNs): قم بتوزيع صورك عبر خوادم في جميع أنحاء العالم. يضمن هذا أن يقوم المستخدمون بتنزيل الصور من خادم أقرب إليهم جغرافيًا، مما يقلل بشكل كبير من زمن الوصول ويحسن أوقات التحميل.
• أدوات ضغط وتحسين الصور: استخدم أدوات (عبر الإنترنت أو مدمجة في عملية البناء) لضغط الصور دون فقدان كبير للجودة. أدوات مثل Squoosh أو TinyPNG أو ImageOptim لا تقدر بثمن.
• التحميل الكسول (Lazy Loading): قم بتنفيذ التحميل الكسول للصور غير المرئية فورًا في منفذ العرض. هذا يعني أنه يتم تحميل الصور فقط عندما يقوم المستخدم بالتمرير لأسفل الصفحة، مما يوفر النطاق الترددي ويسرع العرض الأولي للصفحة. يمكن تحقيق ذلك باستخدام سمات HTML الأصلية (loading="lazy") أو مكتبات JavaScript.
• اختيار أبعاد الصورة الصحيحة: قم دائمًا بتقديم الصور بالأبعاد التي سيتم عرضها بها. يؤدي تكبير الصور الصغيرة في CSS إلى تشويشها، بينما يؤدي تقديم صور كبيرة الحجم إلى إهدار الموارد.
• الرسوميات المتجهة (SVG): للشعارات والأيقونات والرسوم التوضيحية البسيطة، تعتبر الرسوميات المتجهة القابلة للتحجيم (SVG) مثالية. فهي مستقلة عن الدقة، ويمكن تغيير حجمها إلى ما لا نهاية دون فقدان الجودة، وغالبًا ما تكون أصغر حجمًا من الصور النقطية.
• فهم الأجهزة المختلفة: بينما تتعامل image-set() مع الكثافة، تذكر الاختلافات الشاسعة في أحجام الشاشات. لا يزال تخطيط CSS الخاص بك (باستخدام Flexbox و Grid) واستعلامات الوسائط ضروريًا لتكييف *تخطيط* و *عرض* الصور والمحتويات الأخرى.

أمثلة عملية وحالات استخدام

دعنا نستكشف المزيد من التطبيقات العملية لـ image-set().

1. خلفيات زخرفية مع أيقونات

فكر في قسم به نمط خلفية دقيق أو أيقونة مصاحبة يجب أن تظهر بوضوح على جميع الشاشات.

            .feature-item {
  padding: 20px;
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 32px 32px;
  background-image: image-set(
    url('/icons/feature-icon-1x.png') 1x,
    url('/icons/feature-icon-2x.png') 2x
  );
}

            

              
                Copy
              
            
          

اعتبار عالمي: تأكد من أن أيقوناتك مصممة بوضوح عالمي ولا تعتمد على صور ذات خصوصية ثقافية قد لا تكون مفهومة عالميًا.

2. صور رئيسية بعرض كامل مع تراكبات نصية

بالنسبة للأقسام الرئيسية الجذابة، يعد تحسين صورة الخلفية أمرًا أساسيًا.

            .hero-banner {
  color: white;
  text-align: center;
  padding: 100px 20px;
  background-size: cover;
  background-position: center;
  /* Fallback */
  background-image: url('/images/hero-banner-lg.jpg');
  /* High-density screens */
  background-image: image-set(
    url('/images/hero-banner-1x.jpg') 1x,
    url('/images/hero-banner-2x.jpg') 2x,
    url('/images/hero-banner-3x.jpg') 3x
  );
}

            

              
                Copy
              
            
          

اعتبار عالمي: تأكد من أن أي نص يتم تراكبه فوق الصورة له تباين كافٍ مع جميع أشكال الصور المحتملة. ضع في اعتبارك استخدام ظلال النص أو تراكبات خلفية شبه شفافة للنص إذا لزم الأمر.

3. الحدود والفواصل

يمكنك حتى استخدام image-set() لتصميمات حدود أكثر تعقيدًا أو أنماط خلفية متكررة تحتاج إلى التدرج مع الدقة.

            .section-divider {
  height: 10px;
  border-bottom: 0;
  background-image: image-set(
    url('/patterns/divider-light.png') 1x,
    url('/patterns/divider-dark.png') 2x /* Example: different color for higher density */
  );
  background-repeat: repeat-x;
}

            

              
                Copy
              
            
          

اعتبار عالمي: كن حذرًا في اختيارات الألوان. بينما يمكن لـ image-set() أن تقدم صورًا مختلفة، تأكد من أن التأثير البصري ورمزية الألوان مفهومة عالميًا قدر الإمكان، أو اختر لوحات ألوان محايدة.

التحديات وأفضل الممارسات

على الرغم من قوتها، إلا أن image-set() لا تخلو من التحديات.

• صيانة الصور: تحتاج إلى إنشاء وإدارة إصدارات متعددة من كل صورة (1x، 2x، 3x، إلخ). هذا يزيد من العبء الإداري للأصول.
• تضخم حجم الملف: إذا لم تتم إدارتها بعناية، فقد ينتهي بك الأمر بتقديم صور كبيرة بشكل غير ضروري حتى مع تبديل الدقة، خاصة إذا كانت صورة 1x لا تزال كبيرة جدًا.
• لا يوجد توجيه فني: image-set() مخصصة بشكل أساسي لتبديل الدقة، وليس لتغيير نسبة العرض إلى الارتفاع أو اقتصاص الصورة بناءً على منفذ العرض. للتوجيه الفني، استخدم عنصر <picture>.
• دعم متصفح محدود للميزات الأحدث: كما ذكرنا، قد لا تكون التحسينات المستقبلية مدعومة عالميًا. قم دائمًا بتوفير حلول بديلة قوية.

ملخص أفضل الممارسات:

• تحسين كل صورة: قبل إنشاء إصدارات متعددة، تأكد من أن صورتك الأساسية (1x) محسّنة قدر الإمكان.
• استخدم التنسيقات المناسبة: ضع في اعتبارك استخدام WebP أو AVIF حيثما كان ذلك مدعومًا، ولكن تأكد من وجود حلول بديلة بتنسيق JPG/PNG.
• الاختبار عبر الأجهزة: اختبر تنفيذك بانتظام على مختلف الأجهزة وظروف الشبكة لضمان أنه يعمل كما هو متوقع عالميًا.
• حافظ على البساطة: لا تفرط في استخدام image-set(). استخدمها حيث تحدث الدقة فرقًا ملموسًا في الجودة البصرية، وعادةً ما يكون ذلك للخلفيات والعناصر الزخرفية.
• اجمعها مع HTML: لصور المحتوى الهامة (علامات <img>)، يوفر عنصر <picture> مع srcset مزيدًا من التحكم في التوجيه الفني واختيار التنسيق.

الخاتمة

تعد دالة image-set() في CSS أداة حيوية لأي مطور يهدف إلى تقديم تجارب ويب عالية الجودة وعالية الأداء لجمهور عالمي. من خلال تمكين المتصفحات من اختيار الصور بذكاء بناءً على دقة العرض، فإنها تساعد على تحسين النطاق الترددي، وتحسين أوقات التحميل، وضمان الدقة البصرية عبر التنوع المتزايد باستمرار للأجهزة. في حين أنها تكمل ولا تحل محل تقنيات الصور المتجاوبة القائمة على HTML مثل <picture> و srcset، فإن فهم وتنفيذ image-set() بشكل صحيح هو علامة على مطور واجهات أمامية ماهر يركز على تجربة المستخدم في عالم متصل.

احتضن image-set() لجعل خلفياتك أكثر وضوحًا، وأيقوناتك أكثر نقاءً، ومواقعك أكثر تكيفًا. تذكر دائمًا توفير حلول بديلة قوية والنظر في السياق الأوسع لتحسين الأداء العالمي لرحلات مستخدم استثنائية حقًا.