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

Katie Hempenius

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

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

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

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

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

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

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

تشكّل حزمة sharp خيارًا جيدًا لأتمتة تغيير حجم الصور (على سبيل المثال، إنشاء أحجام متعددة للصور المصغّرة لجميع الفيديوهات على موقعك الإلكتروني). وهو سريع ويتكامل بشكل جيد مع نصوص وأدوات الإنشاء. إنّ 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 بتفاصيل عملية التحويل ولا تتطلّب إعداد الخادم.

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

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

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

سمة src

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

سمة "srcset"

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

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

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

سمة sizes

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

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

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

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

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

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

تأكيد

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