تاريخ النشر: 8 أكتوبر 2025
يمكن أن يؤدي تقليل وقت تنزيل الصور إلى تحسين مدة التحميل المتوقعة للصفحة، بالإضافة إلى تحسين سرعة عرض أكبر محتوى مرئي.
أسباب تعذُّر عرض الإحصاءات
ستبرز الإحصاءات الصور التي يكون حجم تنزيلها كبيرًا بدون داعٍ. يتم احتساب عدد البايتات المقدَّر توفيرها من خلال مقارنة حجم تنزيل الصورة بنسبة بايتات/بكسل فعّالة لتنسيق الصورة.
كيفية تحسين وقت تنزيل الصور
تقدّم هذه الإحصاءات عدة استراتيجيات مقترَحة لتحسين وقت تنزيل الصورة استنادًا إلى حجمها المعروض وتنسيق ملفها. يمكن أن يكون نشر شبكة توصيل محتوى (CDN) للصور مفيدًا للغاية في كل هذه الاستراتيجيات.
زيادة عامل ضغط الصورة
تتيح معظم تنسيقات الصور مستوى ضغط يمكن ضبطه لتحسين حجم ملف الصورة على حساب جودة الصورة. يمكنك استخدام أدوات الصور، مثل ImageOptim وSquoosh وImagemin، لتحسين عامل ضغط الصورة.
استخدام تنسيقات صور حديثة
تنسيقا AVIF وWebP هما تنسيقا صور يتميّزان بخصائص ضغط وجودة أفضل مقارنةً بتنسيقي JPEG وPNG الأقدم. يُعدّ ترميز صورك بهذه التنسيقات الأحدث استراتيجية جيدة لتقليل حجم تنزيل الصور.
يتوافق تنسيق AVIF مع أحدث إصدار من جميع المتصفحات الرئيسية، ويوفر أحجام ملفات أصغر مقارنةً بالتنسيقات الأخرى التي تتضمّن إعدادات الجودة نفسها. يمكنك الاطّلاع على Codelab حول عرض صور بتنسيق AVIF للحصول على مزيد من المعلومات حول تنسيق 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 الإضافي لتحسين الصورة الذي يضغط صورك مع المحافظة على الجودة.