عرض الصور المتجاوبة مع مختلف الأجهزة

Katie Hempenius

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

الصور المتجاوبة ومؤشرات Core Web Vitals

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

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

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

تغيير حجم الصور

من بين أدوات تغيير حجم الصور الأكثر شيوعًا حزمة sharp npm وأداة ImageMagick CLI.

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

حاد

لاستخدام sharp كنص برمجي لبرنامج Node، احفظ هذا الرمز البرمجي كنص برمجي منفصل في مشروعك، ثم شغِّله لتحويل صورك:

const sharp = require('sharp');
const fs = require('fs');
const directory = './images';

fs.readdirSync(directory).forEach(file => {
  sharp(`${directory}/${file}`)
    .resize(200, 100) // width, height
    .toFile(`${directory}/${file}-small.jpg`);
  });

ImageMagick

لتغيير حجم صورة إلى %33 من حجمها الأصلي، شغِّل الأمر التالي في الوحدة الطرفية:

convert -resize 33% flower.jpg flower-small.jpg

لتغيير حجم صورة لتلائم مساحة بعرض 300 بكسل وارتفاع 200 بكسل، نفِّذ العبارة التالية:

# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg

# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg

كم عدد نُسخ الصور التي يجب إنشاؤها؟

لا تتوفّر إجابة "صحيحة" واحدة لهذا السؤال. ومع ذلك، من الشائع عرض الصورة بأحجام مختلفة تتراوح بين 3 و5 أحجام. من الأفضل عرض المزيد من أحجام الصور من أجل تحسين الأداء، ولكنّ ذلك يشغل مساحة أكبر على خوادمك ويتطلّب منك كتابة مزيد من رمز HTML.

خيارات أخرى

ننصحك أيضًا بالاطّلاع على خدمات الصور، مثل Thumbor (المفتوح المصدر) وCloudinary. وكلاهما يقدّم راهيتَين بسيطتَين لإنشاء صور سريعة الاستجابة تتيح أيضًا تعديل الصور عند الطلب. لإعداد Thumbor، ثبِّته على خادمك. تهتم منصة Cloudinary بتفاصيل عملية التحويل ولا تتطلّب إعداد الخادم.

عرض نُسخ متعددة من الصور

عند تحديد إصدارات متعددة من الصورة، يختار المتصفّح أفضل إصدار لاستخدامه:

تتفاعل السمات src وsrcset وsizes العلامات الـ <img> لتحقيق هذه النتيجة النهائية.

السمة "src"

تجعل سمة src هذا الرمز يعمل في المتصفحات التي لا تتوافق مع سمتَي srcset وsizes. وتستخدم هذه المتصفّحات بديلاً وهو تحميل المورد المحدّد في سمة src.

سمة "srcset"

سمة srcset هي قائمة مفصولة بفواصل تتضمّن أسماء ملفات الصور وملفاتها وصفات العرض أو الكثافة.

يستخدم هذا المثال وصفات العرض، التي تُعلم المتصفّح بعرض الصورة كي لا يحتاج إلى تنزيل الصورة لمعرفة ذلك. 480w هو وصف العرض الذي يُعلم المتصفّح بأنّ flower-small.jpg يبلغ عرضه 480 بكسل. 1080w هو وصف للعرض يُعلم المتصفح بأنّ flower-large.jpg يبلغ عرضه 1080 بكسل.

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

سمة "المقاسات"

تُعلم سمة sizes المتصفّح بعرض الصورة عند عرضها، إلا أنّها لا تؤثّر في حجم عرض الصورة، لذا ستظل بحاجة إلى استخدام CSS لذلك.

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

إذا لم يتعرّف المتصفّح على السمة "sizes"، سيعود إلىتحميل الصورة المحدّدة من خلال السمة "src". (تمّ تقديم sizes وsrcset في الوقت نفسه، لذا يتوافق كلّ متصفّح مع كلّ من السمتَين أو لا يتوافق مع أيّ منهما).

رصيد إضافي: إذا أردت أن تُظهر أسلوبًا أنيقًا، يمكنك أيضًا استخدام سمة sizes لتحديد مقاسات خانات متعددة. يتيح ذلك للّوحات الإعلانية عرض المواقع الإلكترونية التي تستخدم تنسيقات مختلفة لأحجام إطارات عرض مختلفة. يمكنك الاطّلاع على هذا النموذج المخصّص لرمز خانات متعددة لمعرفة كيفية إجراء ذلك.

(المزيد) رصيد إضافي

بالإضافة إلى كل المساهمات الإضافية التي سبق ذكرها (الصور معقّدة)، يمكنك أيضًا استخدام هذه المفاهيم نفسها في الإشراف الفني. يُقصد بالاتجاه الفني عرض صور مختلفة الشكل (بدلاً من عرض نُسخ مختلفة من الصورة نفسها) على إطارات عرض مختلفة. يمكنك قراءة المزيد من المعلومات في مختبر رموز Art Direction.

تأكيد

بعد تنفيذ الصور المتوافقة مع جميع الأجهزة، يمكنك استخدام Lighthouse للتأكّد من عدم تفويت أي صور. أجرِ عملية تدقيق الأداء في Lighthouse (Lighthouse > الخيارات > الأداء) وابحث عن نتائج عملية التدقيق في تصغير حجم الصور بشكلٍ مناسب. تعرض هذه النتائج الصور التي لا تزال بحاجة إلى تغيير حجمها.