قائمة مراجعة لتحسين الصور: كل خطوة لصور الويب السريعة

آخر تحديث: June 28, 2026. أعد تشغيل قائمة التحقق هذه قبل كل نشر للحصول على نتائج متسقة.

تُعد تحسين الصور عملية تسلسلية، وليست خطوة واحدة. إذا تخطيت مرحلة ما، فستكون النتيجة إما بطيئة أو ضبابية. تستعرض قائمة التحقق هذه كل مرحلة - اختيار التنسيق، وتغيير الحجم (resizing)، والضغط (compression)، والتسليم المتجاوب (responsive delivery)، والتحميل الكسول (lazy loading)، وإعداد CDN - بالترتيب الذي تقوم به فعليًا، حتى تتمكن من المرور بها قبل كل عملية نشر ومعرفة أن الصور ستحمّل بسرعة وتبدو حادة.

إجابة سريعة: ما الذي يتضمنه التمرير الكامل لتحسين الصور؟

التمرير الكامل يعني اختيار التنسيق الصحيح (WebP للصور الفوتوغرافية، SVG للمتجهات، PNG للشفافية)، وتغيير الحجم ليناسب أبعاد العرض، والضغط للحصول على حجم ملف مستهدف، وتقديم متغيرات متجاوبة باستخدام srcset، وتحميل الصور الكسول تحت الطيّة (below-the-fold images)، والتسليم من خلال CDN. تخطي أي مرحلة يترك الأداء دون المستوى المطلوب - فالصورة غير المضغوطة بطيئة، والصورة ذات الحجم المفرط تهدر البايتات، والصورة التي لا تحتوي على تحميل كسول تؤخر العرض الأولي (initial render). قم بتشغيل قائمة التحقق بالكامل بدلاً من اختيار المراحل.

لماذا تشغل قائمة تحقق بدلاً من التحسين المتقطع؟

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

• تعالج كل مرحلة عامل أداء مميزًا.
• تخطي مرحلة يترك هذا العامل دون معالجة.
• المراحل مستقلة بما يكفي ليتم التحقق منها في قائمة مراجعة موثوق بها.

المرحلة 1: اختيار التنسيق الصحيح

يُعد التنسيق هو القرار الأول لأنه يقيد كل شيء بعده. طابق التنسيق مع محتوى الصورة.

• WebP — الافتراضي للصور الفوتوغرافية على المتصفحات الحديثة. أصغر من JPEG بنفس الجودة.
• AVIF — أصغر حتى من WebP، ويزداد دعمه. استخدمه مع WebP أو JPEG كخيار احتياطي (fallback).
• SVG — للشعارات والأيقونات والرسومات المتجهة (vector graphics). يتوسع إلى ما لا نهاية، وحجم ملف صغير جدًا.
• PNG — للصور التي تحتاج إلى شفافية وجودة غير فاقدة للبيانات (lossless quality).
• JPEG — الخيار الاحتياطي العالمي للصور الفوتوغرافية عندما تكون التنسيقات الحديثة غير مدعومة.

تغطي دليل مقارنة التنسيقات ودليل AVIF مقابل WebP المفاضلات بعمق. اختر التنسيق الذي يعطي أصغر ملف بجودة مقبولة للمحتوى.

المرحلة 2: تغيير الحجم ليناسب أبعاد العرض

لا تقم أبدًا بتقديم صورة أكبر من حجم عرضها. تستهلك صورة بحجم 4000 بكسل في خانة بحجم 600 بكسل نطاقاً ترددياً (bandwidth) وتبطئ الصفحة. قم بتغيير الحجم إلى أكبر حجم ستظهر به الصورة، مع الأخذ في الاعتبار شاشات Retina (2x).

يعد تغيير الحجم قبل الضغط أمرًا مهمًا لأن الضغط يعمل على عدد البكسلات - فعدد البكسلات الأقل يضغط إلى بايتات أقل. يغطي دليل تغيير الحجم كيفية القيام بذلك دون فقدان الجودة.

المرحلة 3: الضغط للحصول على حجم ملف مستهدف

بعد تغيير الحجم، اضغط لتقليل البايتات. استهدف أصغر ملف بدون فقدان مرئي للجودة.

• الصور الفوتوغرافية: WebP أو JPEG بجودة 80.
• الرسومات ذات الألوان المسطحة (flat color): PNG أو WebP غير فاقد للبيانات.
• اختبر عند تكبير 100% للتأكد من عدم وجود تشوهات مرئية.
• استهدف الصور البطلة بأقل من 200 KB وصور المحتوى بأقل من 100 KB.

يغطي دليل الضغط التقنيات وإعدادات الجودة.

المرحلة 4: تقديم متغيرات متجاوبة (Responsive variants)

تحتاج الشاشات المختلفة إلى أحجام صور مختلفة. قم بتقديمها باستخدام srcset حتى يقوم كل جهاز بتنزيل الملف الصحيح بدلاً من ملف يناسب الجميع.

• قم بإنشاء متغيرات 1x و 2x و 3x لشاشات Retina.
• استخدم واصفات العرض (400w، 800w) مع sizes للتخطيط المتجاوب.
• دع المتصفح يختار الملف الصحيح.
• يغطي دليل الصور المتجاوبة بناء العلامات (markup).

المرحلة 5: التحميل الكسول للصور تحت الطيّة

لا ينبغي تحميل الصور الموجودة تحت الطيّة حتى يقوم المستخدم بالتمرير إليها. يحرر هذا النطاق الترددي للعرض الأولي ويحسن مقياس Largest Contentful Paint.

• أضف loading="lazy" إلى صور تحت الطيّة.
• حافظ على الصورة البطلة محملة بشغف (eager-loaded) حتى يتم تحميل عنصر LCP بسرعة.
• يغطي دليل التحميل الكسول التنفيذ.

المرحلة 6: التسليم من خلال CDN

قم بتقديم الصور من شبكة توصيل المحتوى (CDN) بحيث يتم تحميلها من موقع طرفي (edge location) قريب من كل مستخدم. يقلل الـ CDN زمن الوصول ويخفف الحمل عن الخادم الأصلي، وهو أمر مهم بشكل خاص للمواقع ذات الجمهور المنتشر جغرافيًا - فالمستخدم الموجود في قارة أخرى ينتظر خلاف ذلك أن تعبر كل صورة هذه المسافة من مصدرك. يغطي دليل CDN الإعدادات، بما في ذلك ميزات التحويل التي تسمح للـ CDN بتغيير الحجم وإعادة تنسيق الملف أثناء التنقل (on the fly)، ويربط دليل Core Web Vitals بين تسليم الصور السريع والمقاييس التي تؤثر على التصنيف.

يمتص الـ CDN أيضًا ارتفاعات حركة المرور (traffic spikes). عندما تنتشر صفحة بشكل فيروسي أو يرسل حملة دفعة من الزوار، يقوم التخزين المؤقت الطرفي (edge cache) بتقديم الصور بدلاً من المصدر، بحيث تظل الصفحة سريعة تحت الحمل الذي قد يغرق خادمًا واحدًا بخلاف ذلك. بالنسبة للمواقع التي يكون فيها استمرار التشغيل تحت حركة المرور مهمًا بقدر متوسط وقت التحميل، فإن هذه المرونة لا تقل قيمة عن تقليل زمن الوصول.

أخطاء التحسين الشائعة

حتى مع قائمة تحقق، تتكرر بعض الأخطاء وتلغي العمل المنجز. معرفتها تسرع خطوة التحقق.

• الضغط قبل تغيير الحجم — يهدر الجهد على البكسلات التي سيتم التخلص منها. قم دائمًا بتغيير الحجم أولاً.
• تقديم حجم واحد لجميع الأجهزة — تقوم الهواتف بتنزيل ملفات بحجم سطح المكتب. استخدم srcset.
• التحميل الكسول للصورة البطلة — يؤخر عنصر LCP. حافظ على الصورة فوق الطيّة محملة بشغف (eager).
• نسيان سمات العرض والارتفاع — يتسبب في تحول التخطيط (layout shift) أثناء تحميل الصور. قم دائمًا بتضمينها.
• استخدام PNG للصور الفوتوغرافية — يضخم حجم الملف. استخدم WebP أو JPEG للمحتوى التصويري.

التحقق: هل نجح التحسين؟

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

1. قم بتشغيل Google PageSpeed Insights وتحقق من الفرص المتعلقة بالصور.
2. تأكد من أن عنصر LCP يتم تحميله في غضون 2.5 ثانية.
3. تحقق من علامة التبويب network للتأكد من تحميل الملف بالحجم المناسب لكل جهاز.
4. تحقق من أن الصور المحملة بشكل كسول تتأخر حتى التمرير (scroll).

يوثق دليل قياس أداء web.dev كيفية حصول PageSpeed على درجات للصفحات، ويغطي دليل الأداء الخاص بـ Mozilla المقاييس بعمق. الصفحة التي تجتاز هذه الفحوصات بعد قائمة التحقق لديها صور سريعة حقًا - وليست مجرد صور تبدو محسّنة. بالنسبة لسياق SEO الأوسع، يربط دليل تحسين الصور لمحركات البحث بين مكاسب الأداء هذه وتصنيف محركات البحث.

الأسئلة المتكررة

ما الذي يتضمنه التمرير الكامل لتحسين الصور؟

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

لماذا تشغل قائمة تحقق بدلاً من التحسين المتقطع؟

لأن التحسين المتقطع يفوت مراحل - قد يقوم مطور بالضغط ولكنه ينسى تغيير الحجم، أو يضيف srcset ولكنه ينسى التحميل الكسول. تضمن قائمة التحقق أن كل صورة تحصل على كل مرحلة، بشكل متسق، عبر موقع كامل. الاتساق هو ما يحرك Core Web Vitals على نطاق واسع.

ما هو أكبر مكسب لتحسين الصور؟

تغيير الحجم ليناسب أبعاد العرض. تعتبر صورة كاميرا بحجم 6000 بكسل يتم تقديمها عند 800 بكسل أكبر هدر فردي في معظم المواقع. غيّر الحجم أولاً؛ وكل شيء آخر يتراكم على أساس بالحجم الصحيح.

كيف يمكنني تقديم متغيرات متجاوبة؟

قم بتوليد كل صورة بالأحجام التي تحتاج إليها نقاط التوقف (breakpoints)، ثم استخدم srcset و sizes للسماح للمتصفح باختيار الملف الصحيح حسب مساحة العرض (viewport). يقوم المتصفح بتنزيل المتغير الذي يحتاجه فقط، مما يوفر البايتات على الشاشات الصغيرة. راجع دليل الصور المتجاوبة.

كم مرة يجب علي إعادة تحسين الصور؟

كلما أضفت صورًا جديدة، وقم بمراجعة المجموعة الحالية عندما تنخفض Core Web Vitals. قد تكون الصور القديمة التي تم تحسينها قبل سنوات بتنسيق JPEG بينما كان WebP سيكون أصغر الآن. يلتقط التدقيق الدوري انحراف التنسيق والضغط.

كيف أقوم بتدقيق صور موقع موجود؟

قم بتشغيل زحف (crawl) (Lighthouse، أو أداة مثل Screaming Frog) لسرد كل صورة بحجمها وأبعادها، ثم ضع علامة على أي منها كبير الحجم بالنسبة لخانته المعروضة، أو مقدم كـ JPEG بينما كان WebP أصغر، أو يفتقر إلى سمات العرض/الارتفاع. قم بإصلاح أكبر المخالفين أولاً - فعدد قليل من الصور الضخمة عادة ما يشكل معظم وزن الصفحة. أعد تشغيل التدقيق بعد الإصلاحات لتأكيد التحسن.