تحسين عرض الصور

تاريخ النشر: 8 أكتوبر 2025

يمكن أن يؤدي تقليل وقت تنزيل الصور إلى تحسين مدة التحميل المتوقعة للصفحة، بالإضافة إلى تحسين سرعة عرض أكبر محتوى مرئي.

أسباب تعذُّر عرض الإحصاءات

تُبرز هذه الإحصاءات الصور التي يكون حجم تنزيلها كبيرًا بدون داعٍ. يتم احتساب مقدار البايتات المقدَّر توفيرها من خلال مقارنة حجم تنزيل الصورة بنسبة بايتات إلى بكسل فعّالة لتنسيق الصورة.

إحصاءات "تحسين عرض الصور" في "أدوات مطوّري البرامج":

كيفية تحسين وقت تنزيل الصور

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

زيادة عامل ضغط الصورة

تتيح معظم تنسيقات الصور مستوى ضغط يمكن ضبطه لتحسين حجم ملف الصورة على حساب جودة الصورة. يمكنك استخدام أدوات الصور، مثل ImageOptim وSquoosh وImagemin، لتحسين عامل ضغط الصورة.

استخدام تنسيقات صور حديثة

‫AVIF وWebP هما تنسيقان للصور يتميّزان بضغط وجودة أفضل مقارنةً بتنسيقي JPEG وPNG الأقدم. يُعد ترميز صورك بهذه التنسيقات الأحدث استراتيجية جيدة لتقليل حجم تنزيل الصور.

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

يتوافق تنسيق WebP مع جميع المتصفّحات الرئيسية ويوفّر ضغطًا أفضل مع وبدون فقدان لمعلومات الصور على الويب. يمكنك الاطّلاع على مقالة استخدام صور WebP لمزيد من المعلومات حول تنسيق WebP.

استخدام تنسيقات الفيديو للمحتوى المتحرّك

ملفات GIF الكبيرة غير فعّالة في عرض محتوى الصور المتحركة مقارنةً بالفيديوهات. يمكنك استخدام فيديوهات بتنسيق MPEG4 أو WebM للصور المتحركة وتنسيق PNG أو WebP للصور الثابتة بدلاً من ملف GIF لتوفير وحدات البايت على الشبكة.

اطّلِع على مقالة استبدال صور GIF المتحركة بفيديوهات لتحميل الصفحات بشكل أسرع للتعرّف على كيفية استبدال صور GIF بفيديوهات.

عرض صور ذات حجم متجاوب

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

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

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

على سبيل المثال، يحتوي العنصر <img> على السمتَين srcset وsizes اللتَين يمكنهما تحديد عناوين URL للصور بأحجام مختلفة:

إذا كنت بحاجة إلى تغيير الصورة بالكامل، يمكنك استخدام عنصر <picture>:

يمكنك الاطّلاع على الصور السريعة الاستجابة وعنصر الصورة لمعرفة المزيد.

إرشادات خاصة بكل حزمة

تقدّم هذه الإحصاءات أيضًا إرشادات خاصة بالحزمة لصفحات تستخدم التقنيات التالية:

AMP

  • يجب عرض جميع مكوِّنات amp-img بتنسيق WebP مع تحديد عنصر احتياطي مناسب للمتصفّحات الأخرى.
  • بالنسبة إلى المحتوى الذي يتضمن صورًا متحركة، يمكنك استخدام amp-anim لتقليل استخدام وحدة المعالجة المركزية (CPU) عندما يكون المحتوى خارج الشاشة.

Drupal

  • يمكنك استخدام وحدة تتولّى تلقائيًا مهمّة تحسين وتقليل حجم الصور التي يتم تحميلها على موقعك الإلكتروني مع المحافظة على مستوى الجودة.
  • يُرجى التأكّد من أنّك تستخدم أنماط الصور السريعة الاستجابة المضمّنة والتي يوفّرها Drupal لجميع الصور التي يتم عرضها على الموقع الإلكتروني.

Joomla

يمكنك استخدام مكوّن إضافي أو خدمة تتيح لك تحويل صورك المحمَّلة إلى أفضل التنسيقات تلقائيًا.

Magento

يمكنك استخدام إضافة خارجية في Magento لتحسين الصور.

WordPress

يمكنك استخدام مكوّن WordPress الإضافي لتحسين الصورة الذي يضغط صورك مع المحافظة على الجودة.

الموارد