تحسين الصور يقلل حجم الملفات مع الحفاظ على الجودة البصرية. سير العمل الأساسي: تغيير الحجم إلى أبعاد العرض، والضغط بجودة 75-85%، والتحويل إلى WebP أو AVIF، وإضافة التحميل الكسول، وتعيين سمات العرض والارتفاع بشكل صريح. حققت دراسة حالة من DebugBear خفضًا بنسبة 97.5% (من 4.3 ميجابايت إلى 109 كيلوبايت) باستخدام هذا التسلسل بالضبط.
لماذا يعد تحسين الصور مهمًا
تشكل الصور ما يقارب 64% من إجمالي حجم الصفحة (Sanity). الصور غير المحسنة تؤثر سلبًا بشكل مباشر على:
| المقياس | التأثير | السبب |
|---|---|---|
| LCP (أكبر طلاء محتوى) | تجاوز حد 2.5 ثانية | صور البطولة ضخمة |
| CLS (إزاحة التخطيط التراكمية) | قفز المحتوى عند التحميل | غياب سمات العرض/الارتفاع |
| معدل الارتداد | يزور الزوار ويغادرون قبل تحميل المحتوى | بطء الطلاء الأولي |
| ترتيب الهاتف المحمول | انخفاض الموضع في نتائج البحث | استهلاك مفرط لعرض النطاق على الشبكات المتغيرة |
الركائز الثلاث: تغيير الحجم، الضغط، الصيغة
الركيزة 1: تغيير الحجم — أكبر كسب منفرد
تقديم الصور بحجم عرضها الفعلي هو التحسين الأكبر. تُظهر دراسة حالة DebugBear صورة بدقة 7108×4744 تُعرض بحجم 1266×845: أدى تغيير الحجم وحده إلى تقليص الملف من 4.3 ميجابايت إلى 495 كيلوبايت (انخفاض 89%).
الخطوات:
- حدد أبعاد العرض — يوصي WordPress.com بالرفع بعرض 1.5-2 ضعف منطقة المحتوى للحصول على نتائج واضحة.
- غيّر الحجم قبل الرفع — استخدم Preview (Mac) أو Paint (Windows) أو GIMP.
- أضف صورًا متجاوبة مع سمات
srcsetوsizesلتقديم عروض مختلفة (400w، 800w، 1600w) بناءً على حجم إطار العرض.
هذا يتيح للمتصفح اختيار الملف المناسب لكل إطار عرض — مستخدمو الهواتف يحملون ملفات أصغر، ومستخدمو الحواسيب يحصلون على نسخ واضحة.
الركيزة 2: الضغط — مع فقدان مقابل بدون فقدان
| الوضع | كيف يعمل | حجم الملف | الأفضل لـ |
|---|---|---|---|
| مع فقدان | يزيل بعض البيانات بشكل دائم | أصغر (انخفاض 40-60%) | الصور والصور المعقدة |
| بدون فقدان | يحافظ على جميع البيانات بالضبط | أكبر | الشعارات والنصوص ولقطات الشاشة والشفافية |
لمعظم صور الويب، يوفر الضغط مع الفقدان بجودة 75-85 التوازن الأمثل. كل من WebP و AVIF يدعمان الوضعين.
الركيزة 3: اختيار الصيغة — WebP مقابل AVIF مقابل JPEG
| الصيغة | الضغط مقابل JPEG | سرعة الترميز | دعم المتصفحات (2026) | الأفضل لـ |
|---|---|---|---|---|
| WebP | أصغر بنسبة 25-35% | سريعة | 97%+ | صور LCP، الاستخدام العام |
| AVIF | أصغر بنسبة ~50% | أبطأ بنسبة 50% من WebP | 92%+ | أقصى ضغط |
| JPEG | خط الأساس | الأسرع | 100% | البديل الشامل |
إطار اتخاذ القرار:
| السيناريو | الصيغة الموصى بها |
|---|---|
| صورة بطولة LCP/فوق الطية | WebP (ترميز أسرع، دعم أوسع) |
| تقليل إجمالي وزن الصفحة | AVIF (ضغط أفضل) |
| تصوير المنتجات (HDR) | AVIF (نطاق ألوان واسع) |
| المحتوى الذي ينشئه المستخدمون | WebP (معالجة أسرع) |
| الرسوم المتحركة | WebP (دعم الرسوم المتحركة) |
| رسومات تحتوي على نص/خطوط حادة | WebP بدون فقدان |
النهج الهجين (موصى به): وفقًا لـ Framer، قدّم WebP عند الطلب الأول، وحوّل إلى AVIF في الخلفية، ثم قدّم AVIF في الزيارات اللاحقة. تحصل على تسليم أولي سريع وملفات مخزنة مؤقتًا أصغر.
التحميل الكسول والصور المتجاوبة
التحميل الكسول يؤخر الصور خارج الشاشة حتى الحاجة إليها، مما يوفر عرض النطاق ويحسّن التحميل الأولي. أضف loading="lazy" إلى أي وسم صورة أسفل الطية.
القواعد:
- لا تستخدم التحميل الكسول أبدًا للصور فوق الطية — فهذا يؤخر LCP.
- أعطِ الأولوية لصور LCP باستخدام
fetchpriority="high". -
حمّل مسبقًا صور خلفيات CSS الحرجة في
<head>باستخدامrel="preload" as="image" fetchpriority="high". -
حدد العرض والارتفاع بشكل صريح دائمًا في عناصر الصورة لمنع CLS.
مقارنة الأدوات
| الأداة | الأفضل لـ | الصيغ | معالجة دفعية | التكلفة |
|---|---|---|---|---|
| Squoosh | مقارنة الصيغ للمطورين | WebP، AVIF، JPEG، PNG | نعم | مجاني |
| TinyPNG | تحسين صورة واحدة للمصممين | WebP، JPEG، PNG | 20 ملفًا | مجاني |
| ImageLean | ضغط في المتصفح مع التركيز على الخصوصية | WebP، AVIF، JPEG، PNG | نعم | مجاني |
| Smush | أصحاب مواقع WordPress | WebP، AVIF، JPEG، PNG | جماعي | مجاني/احترافي |
| Cloudflare Images | التوسع العالمي عبر CDN | تحويل تلقائي | فوري | الدفع حسب الاستخدام |
| Next.js Image | مشاريع React/Next.js | WebP/AVIF تلقائي | تلقائي | مجاني |
التحسين عبر CDN مقابل الإضافات
| النهج | كيف يعمل | المزايا | العيوب |
|---|---|---|---|
| عبر CDN (Cloudflare، Fastly) | يحسّن عند حافة الشبكة ويخزن النتيجة مؤقتًا | بدون عمل يدوي، متكيف مع الجهاز | يتطلب اشتراك CDN |
| عبر إضافة (Smush، TinyPNG) | يعالج عند الرفع أو عبر واجهة برمجة التطبيقات | تحكم أكبر في المخرجات | يجب تشغيله جماعيًا على الصور الموجودة |
أفضل ممارسة: نهج هجين — CDN للتسليم الفوري + إضافة لضغط الرفع. تقلل شبكات CDN أوقات تحميل الصور بأكثر من 50% للزوار الدوليين (DebugBear).
سير عمل الأتمتة
خط أنابيب CI/CD
يمكن لـ GitHub Actions ضغط وتحويل الصيغ تلقائيًا عند كل دفع باستخدام Squoosh CLI أو sharp. يتم تحسين جميع الصور في الكود البرمجي قبل النشر.
نظام إدارة المحتوى المقترن (Headless CMS)
منصات مثل Sanity تقدّم صورًا محسنة مع تحويلات فورية — خزّن مصدرًا واحدًا عالي الجودة واحصل على صور مصغرة وأحجام متجاوبة وصيغ حديثة تلقائيًا.
التجارة الإلكترونية
- WooCommerce: يتكامل Smush مباشرة — ضغط تلقائي عند الرفع، وتحسين جماعي للمعارض، وCDN للتسليم العالمي.
- Shopify: خط الأنابيب المدمج يتولى التحسين. تأكد من أن الصور المصدر بالحجم الصحيح قبل الرفع وأن القوالب تولّد سمات
srcsetمناسبة.
إصلاح تحذيرات PageSpeed Insights
| التحذير | السبب | الإصلاح |
|---|---|---|
| “تحديد حجم الصور بشكل صحيح” | الصورة أكبر من حجم العرض | غيّر الحجم ليتناسب مع الحاوية + استخدم srcset |
| “تقديم الصور بتنسيقات الجيل التالي” | استخدام JPEG/PNG بدلاً من WebP/AVIF | حوّل باستخدام Squoosh أو التحويل التلقائي في Smush |
| “تأجيل الصور خارج الشاشة” | جميع الصور تُحمّل فورًا | أضف loading="lazy" للصور أسفل الطية فقط |
| “إزالة الموارد التي تمنع العرض” | صور كبيرة مشفرة بـ Base64 في CSS/HTML | قدّمها كملفات منفصلة؛ تجنب Base64 لأكثر من بضع مئات من البايتات |
الخلاصة
حسّن الصور بالتسلسل: تغيير الحجم ← الضغط ← التحويل إلى صيغة حديثة ← إضافة التحميل الكسول ← تعيين الأبعاد بشكل صريح. أتمت العملية بنهج هجين يجمع بين CDN والإضافة. ابدأ بتدقيق موقعك باستخدام DebugBear — نسبة التخفيض البالغة 97.5% من دراسة الحالة قابلة للتحقيق لمعظم المواقع باستخدام هذه التقنيات.
الأسئلة الشائعة
ما الفرق بين الضغط مع الفقدان وبدون فقدان؟
الضغط مع الفقدان يزيل البيانات بشكل دائم لملفات أصغر — مناسب للصور الفوتوغرافية. الضغط بدون فقدان يحافظ على جميع البيانات بالضبط — مناسب للشعارات والنصوص ولقطات الشاشة. كل من WebP و AVIF يدعمان الوضعين. لصور الويب، يُعد الضغط مع الفقدان بجودة 75-85% هو المعيار.
هل يجب أن أستخدم WebP أم AVIF في عام 2026؟
WebP لصور LCP/فوق الطية (ترميز أسرع، دعم أوسع). AVIF لأقصى ضغط (ملفات أصغر، ترميز أبطأ). استخدم النهج الهجين: WebP عند التحميل الأول، وAVIF للزيارات اللاحقة المخزنة مؤقتًا.
كيف أصلح تحذيري “تحديد حجم الصور بشكل صحيح” و“تنسيق الجيل التالي” في PageSpeed؟
غيّر حجم الصور لتتناسب مع أبعاد عرضها. حوّل JPEG/PNG إلى WebP أو AVIF. استخدم srcset مع عنصر <picture> لتقديم الإصدارات المناسبة حسب حجم الشاشة ودعم الصيغة. يمكن لمستخدمي WordPress أتمتة ذلك باستخدام إضافة Smush.
اترك تعليقاً