كيفية تحسين صور موقعك الإلكتروني: دليل شامل لعام 2026

الصور تشكّل نحو 40% من وزن صفحة الويب المتوسطة. حسّنها بالشكل الصحيح ويمكنك تقليص حجم صفحتك إلى النصف، وتحقيق مقياس LCP أقل من 2.5 ثانية، والحصول على ترتيب أعلى في نتائج البحث. إليك العملية الكاملة، خطوة بخطوة.

لماذا تحسين الصور أهم من أي وقت مضى

وفقاً لبيانات HTTP Archive، صفحة الويب المتوسطة تزن حوالي 2.5 ميجابايت على الهاتف المحمول، والصور تشكّل نحو 1 ميجابايت من ذلك. مؤشرات Core Web Vitals من Google — وتحديداً Largest Contentful Paint (LCP) — تقيس مباشرة سرعة تحميل أكبر عنصر مرئي. في معظم الصفحات، هذا العنصر هو صورة.

المعيار: LCP يساوي 2.5 ثانية أو أقل يُعتبر "جيد". فوق 4 ثوانٍ يُعتبر "ضعيف". الصفحات التي يكون عنصر LCP فيها صورة لديها زمن تحميل عند النسبة المئوية 75 أبطأ بمرتين تقريباً من صفحات LCP النصية. الفرق بين صورة غلاف محسّنة وأخرى متخمة غالباً هو الفرق بين نتيجة Core Web Vitals خضراء وأخرى حمراء.

الخطوة 1: اختر الصيغة المناسبة

اختيار الصيغة له أكبر تأثير على حجم الملف. إليك كيف تُقارن صيغ الويب الرئيسية:

لمعظم المواقع، WebP هو الخيار الأكثر أماناً. يتعامل مع الصور والرسومات على حد سواء، يضغط بقوة، ويعمل في كل مكان. إذا كانت بنيتك التحتية تدعم ذلك، قدّم AVIF كصيغة أساسية مع WebP كاحتياطي باستخدام عنصر <picture>. يمكنك تحويل JPG إلى WebP أو التحويل إلى AVIF مع Vizua — كل شيء يعمل في متصفحك بدون رفع أي ملف.

تريد مقارنة أعمق؟ راجع تحليل JPEG مقابل PNG وشرح الضغط مع الخسارة مقابل بدون الخسارة.

الخطوة 2: غيّر الأبعاد لحجم العرض الفعلي

صورة بأبعاد 4000 × 3000 بكسل من كاميرتك تُعرض بأبعاد 800 × 600 على موقعك تهدر نحو 80% من بكسلاتها. هذه البكسلات غير المرئية لا تزال تكلّف عرض نطاق ووقت معالجة.

القاعدة: قدّم الصور بحجم عرضها الفعلي أو قريباً منه. على شاشة عادية، طابق أبعاد البكسل بالضبط. على شاشة Retina بدقة 2x، قدّم صورة بضعف عرض العرض للحصول على وضوح — لكن ليس أكثر.

الأهداف العملية:

• غلاف بعرض الصفحة: 1600-1920 بكسل عرضاً (حتى 2x لشاشات Retina)
• صورة محتوى المدونة: 800-1200 بكسل عرضاً
• صورة مصغّرة: 300-400 بكسل عرضاً
• صورة رمزية: 64-128 بكسل (حتى 256 بكسل لدقة 2x)

استخدم أداة تغيير حجم الصور في Vizua لتصغير الصور إلى العرض المطلوب بالضبط قبل الضغط. هذا وحده يمكن أن يقلّل حجم الملف بنسبة 70-90%.

الخطوة 3: اضغط بإعداد الجودة المناسب

بعد اختيار الصيغة وتغيير الأبعاد، الضغط هو المكان الذي تستخلص فيه التوفير المتبقي. شريط الجودة أهم مما يظن معظم الناس — العلاقة بين الجودة وحجم الملف ليست خطية. تقليل جودة JPEG من 100 إلى 80 يوفّر مساحة هائلة؛ تقليلها من 80 إلى 60 يعطي عوائد متناقصة مع تشوّهات مرئية.

إعدادات الجودة الموصى بها:

• JPEG: 75-85 — النقطة المثالية للصور. JPEG بجودة 80 عادةً أصغر بـ 60-80% من الأصل غير المضغوط بدون فرق مرئي.
• WebP: 75-80 — جودة بصرية مكافئة لـ JPEG 85 في ملف أصغر.
• AVIF: 60-75 — الأرقام الأقل لا تزال تبدو رائعة بفضل كفاءة المشفّر.
• PNG: استخدم أقصى مستوى ضغط (بدون خسارة). لتوفير إضافي، قلّل إلى 8 بت (256 لون) عندما يسمح الرسم.

أداة ضغط JPEG في Vizua تتعامل مع هذا تلقائياً باستخدام خوارزميات محسّنة تحافظ على الحواف والتدرجات. لتفصيل مفصّل حسب الصيغة، راجع دليل ضغط الصور بدون فقدان الجودة.

الخطوة 4: وصّل الصور بكفاءة

الضغط الجيد هو نصف القصة فقط. كيف توصّل الصور للمتصفح مهم بنفس القدر للأداء.

حدّد الأبعاد بشكل صريح

دائماً أضف سمتي width وheight على وسوم <img> (أو استخدم CSS aspect-ratio). هذا يمنع انزياح التخطيط — تحرّك المحتوى مع تحميل الصور — الذي يؤثر مباشرة على مقياس CLS.

التحميل الكسول للصور أسفل الطية

أضف loading="lazy" لأي صورة غير مرئية عند التحميل الأول للصفحة. المتصفح سيؤجّل تحميلها حتى يقترب المستخدم منها بالتمرير، مما يوفّر عرض نطاق عند التحميل الأولي.

أعطِ الأولوية لصورة الغلاف

افعل العكس لأهم صورة فوق الطية: أضف fetchpriority="high" وتأكد أنها لا تحتوي loading="lazy". اختبارات Google نفسها تُظهر أن صور LCP المحمّلة مسبقاً تحقق أداءً شبه مثالي (364 مللي ثانية عند النسبة المئوية 75)، بينما صور LCP الكسولة أبطأ بمرتين تقريباً (720 مللي ثانية).

استخدم الصور المتجاوبة

سمتا srcset وsizes تسمحان للمتصفح باختيار أفضل نسخة من الصورة لحجم شاشة المستخدم ودقتها. قدّم صورة بعرض 400 بكسل للهاتف، و800 بكسل للتابلت، و1600 بكسل لسطح المكتب — كل ذلك من وسم <img> واحد.

الخطوة 5: راقب وقِس

التحسين ليس مهمة لمرة واحدة. كل صورة جديدة تضيفها هي فرصة للتراجع.

• PageSpeed Insights: شغّل PageSpeed Insights من Google على صفحاتك الرئيسية. انظر لمقياس LCP وأي توصيات بشأن "تقديم الصور بصيغ حديثة" أو "تحجيم الصور بشكل صحيح".
• تحليل الشبكة: افتح تبويب Network في أدوات المطور بالمتصفح. رتّب حسب الحجم. إذا تجاوزت أي صورة 200 ك.ب، اسأل نفسك: هل يمكن تصغيرها أو إعادة ضغطها أو تحويلها لصيغة أفضل؟
• الأتمتة: أضف تحسين الصور لمسار البناء. اكتشف الصور كبيرة الحجم قبل أن تُنشر.

قائمة مراجعة سريعة

• استخدم WebP أو AVIF كصيغتك الافتراضية
• غيّر أبعاد الصور لحجم العرض الفعلي (لا أعرض من اللازم)
• اضغط: JPEG/WebP بجودة 75-85، AVIF بجودة 60-75
• حدّد width وheight لكل <img>
• fetchpriority="high" لصورة الغلاف/LCP
• loading="lazy" لكل ما هو أسفل الطية
• استخدم srcset/sizes للتوصيل المتجاوب
• أبقِ صور الغلاف تحت 200 ك.ب والصور المصغّرة تحت 80 ك.ب
• أزل البيانات الوصفية غير الضرورية (EXIF، ملفات ICC) — راجع دليل خصوصية بيانات EXIF
• راقب بانتظام باستخدام PageSpeed Insights

الأسئلة الشائعة