تحسين صور خلفية CSS باستخدام طلبات البحث عن الوسائط

Demián Renzulli

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

المتطلبات الأساسية

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

فهم صور الخلفية سريعة الاستجابة

أولاً، عليك تحليل حركة بيانات الشبكة للإصدار التجريبي غير المحسَّن:

  1. افتح الإصدار التجريبي غير المحسَّن في علامة تبويب جديدة في Chrome.
  2. اضغط على Ctrl ‏+ Shift ‏+ J (أو Command ‏+ Option ‏+ J على نظام التشغيل Mac) لفتح DevTools.
  3. انقر على علامة التبويب الشبكة.
  4. إعادة تحميل الصفحة

ستلاحظ أنّ الصورة الوحيدة التي يتمّ طلبها هي background-desktop.jpg التي يبلغ حجمها 1006 كيلوبايت:

تتبُّع الشبكة في DevTools لصورة الخلفية غير المحسَّنة

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

يمكنك الاطّلاع على الأنماط التي تتحكّم في صورة الخلفية في style.css:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

في ما يلي معنى كلّ سمة من السمات المستخدَمة:

  • background-position: center center: يجب وضع الصورة في منتصف الشاشة عموديًا وأفقيًا.
  • background-repeat: no-repeat: عرض الصورة مرة واحدة فقط
  • background-attachment: fixed: تجنَّب الانتقال إلى أعلى أو أسفل صورة الخلفية.
  • background-size: cover: تغيير حجم الصورة لتغطية الحاوية بالكامل
  • background-image: url(images/background-desktop.jpg): عنوان URL للصورة.

وعند دمج هذه الأنماط، يطلب المتصفّح من الصورة الخلفية أن تكيّف نفسها مع ارتفاعات وعرض مختلفَين للشاشة. هذه هي الخطوة الأولى نحو إنشاء خلفية سريعة الاستجابة.

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

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

في القسم التالي، ستتعرّف على كيفية تطبيق تحسين لتحميل صور خلفية مختلفة، وفقًا لجهاز المستخدم.

استخدام طلبات الاستعلام عن الوسائط

إنّ استخدام طلبات الاستعلام عن الوسائط هو أسلوب شائع لتعريف أوراق الأنماط التي لن تنطبق إلا على أنواع معيّنة من الوسائط أو الأجهزة. ويتم تنفيذها باستخدام قواعد@media التي تتيح لك تحديد مجموعة من نقاط التوقف التي يتم فيها تحديد أنماط معيّنة. عند استيفاء الشروط المحدّدة بقاعدة @media (على سبيل المثال، عرض شاشة معيّن)، سيتم تطبيق مجموعة الأنماط المحدّدة داخل نقطة التوقف.

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

  • في style.css، أزِل السطر الذي يحتوي على عنوان URL لصورة الخلفية:
body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}
  • بعد ذلك، أنشئ نقطة توقّف لكلّ عرض شاشة، استنادًا إلى الأبعاد الشائعة بالبكسل التي تتسم بها عادةً شاشات الأجهزة الجوّالة والأجهزة اللوحية وأجهزة الكمبيوتر المكتبي:

على الأجهزة الجوّالة:

@media (max-width: 480px) {
    body {
        background-image: url(images/background-mobile.jpg);
    }
}

بالنسبة إلى الأجهزة اللوحية:

@media (min-width: 481px) and (max-width: 1024px) {
    body {
        background-image: url(images/background-tablet.jpg);
    }
}

بالنسبة إلى أجهزة الكمبيوتر المكتبي:

@media (min-width: 1025px) {
    body {
        background-image: url(images/background-desktop.jpg);
   }
}

افتح النسخة المحسّنة من style.css في المتصفّح للاطّلاع على التغييرات التي تم إجراؤها.

القياس على الأجهزة المختلفة

بعد ذلك، يمكنك عرض الموقع الإلكتروني الناتج بأحجام شاشات مختلفة وفي أجهزة جوّالة محاكية:

  1. افتح الموقع الإلكتروني المحسَّن في علامة تبويب جديدة في Chrome.
  2. اجعل إطار العرض ضيّقًا (أقل من 480px).
  3. اضغط على Ctrl ‏+ Shift ‏+ J (أو Command ‏+ Option ‏+ J على نظام التشغيل Mac) لفتح DevTools.
  4. انقر على علامة التبويب الشبكة.
  5. إعادة تحميل الصفحة لاحظ كيف تم طلب صورة background-mobile.jpg.
  6. اجعل إطار العرض أوسع. بعد أن يصبح أعرض من 480px، لاحظ كيف يتم طلب background-tablet.jpg. بعد أن يصبح أعرض من 1025px، لاحظ كيف يتم طلب background-desktop.jpg.

عند تغيير عرض شاشة المتصفّح، يتم طلب صور جديدة.

على وجه الخصوص، عندما يكون العرض أقل من القيمة المحدّدة في نقطة توقّف الأجهزة الجوّالة (480 بكسل)، يظهر لك سجلّ الشبكة التالي:

تتبُّع الشبكة في DevTools لصورة الخلفية المحسّنة

حجم الخلفية الجديدة للأجهزة الجوّالة أصغر بنسبة% 67 من حجم الخلفية لأجهزة الكمبيوتر المكتبي.

التأثيرات على مقياس "سرعة عرض أكبر محتوى مرئي" (LCP)

تُعدّ العناصر التي تحتوي على صور خلفية من CSS مرشحة لقياس سرعة عرض أكبر محتوى مرئي (LCP)، ولكن لا يمكن لبرنامج فحص التحميل المُسبَق للمتصفّح اكتشاف صور خلفية CSS، ما يعني أنّه قد يتأخّر ظهور مقياس LCP لموقعك الإلكتروني في حال عدم الانتباه إلى ذلك.

الخيار الأول الذي يجب مراعاته هو ما إذا كانت الصورة المُرشّحة لسرعة عرض أكبر محتوى مرئي (LCP) يمكن أن تعمل في عنصر <img> مع سمات srcset وsizes للاستجابة السريعة. سي يعثر "أداة فحص التحميل المُسبَق" في المتصفّح على عناصر <img>، ويُرسِل طلبات بشأنها عندما يكون المُحلِّل محظورًا أثناء العرض.

إذا لم تتمكّن من تجنُّب استخدام صورة خلفية في CSS (أو لم تكن تريد ذلك)، سيكون الخيار الثاني هو التحميل المُسبَق للصور المتوافقة مع الأجهزة الجوّالة لضمان التحميل المُسبَق للصورة المناسبة لحجم مساحة العرض المناسب. تشير سمات <link> media وimagesrcset وimagesizes إلى المتصفّح بأنّ تلميحًا معيّنًا للمورد لا ينطبق إلا في حالات معيّنة لإطار العرض، ما يتجنّب عمليات التحميل المُسبَق المُهدَرة المتعدّدة عندما تريد تحميل المورد الوحيد الملائم لإطار العرض الحالي فقط.

ملخّص

في هذا الدليل، تعرّفت على كيفية تطبيق طلبات البحث عن الوسائط لطلب صور خلفية مصمّمة لأحجام شاشات معيّنة وتوفير وحدات البايت عند الوصول إلى الموقع الإلكتروني على الأجهزة الأصغر حجمًا، مثل الهواتف الجوّالة. إذا كنت قد استخدمت القاعدة @media لتطبيق خلفية متجاوبة تتوفّر هذه الطريقة على نطاق واسع في جميع المتصفحات. يمكن استخدام ميزة جديدة في CSS: image-set()‎، للغرض نفسه باستخدام عدد أسطر رمز أقل. في وقت كتابة هذه المقالة، لا تتوفّر هذه الميزة في جميع المتصفّحات، ولكن ننصحك بمواكبة تطور استخدامها، لأنّها يمكن أن تمثّل بديلاً مثيرًا للاهتمام لهذه التقنية.