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

Katie Hempenius

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

الصور المتجاوبة ومؤشرات أداء الويب الأساسية

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

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

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

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

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

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

حاد

لاستخدام Sharp كنص برمجي للعقدة، احفظ هذه التعليمة البرمجية كنص برمجي منفصل في مشروعك، ثم شغّلها لتحويل صورك:

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 في الوقت نفسه، لذا يتيح كل متصفّح استخدام كلتا السمتين أو عدم توافقهما مع أي منهما).

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

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

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

إثبات الهوية

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