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

Katie Hempenius

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

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

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

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

يؤدي تقليل مُدد تحميل الموارد إلى خفض وقت تحميل صورة 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، يجب تثبيته على الخادم. السحابة الإلكترونية حيث تعتني بالتفاصيل من أجلك ولا تتطلب أي إعداد للخادم.

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

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

إنّ العلامة <img> src, srcset, وsizes أن تتفاعل جميعها معًا لتحقيق هذه النتيجة النهائية.

تشير "src" سمة

تجعل السمة src هذه الرمز متوافقة مع المتصفّحات غير المتوافقة إتاحة srcset وsizes ذات الصلة. وتعود هذه المتصفحات إلى تحميل المورد المحدد في src.

تُعد "srcset" سمة

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

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

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

"الأحجام" سمة

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

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

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

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

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

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

إثبات الهوية

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