كيف تضغط الصور لتسريع موقعك
الصور الكبيرة هي السبب الأول لبطء تحميل صفحات الويب. تعلّم كيف يعزّز ضغطها السرعة والسيو وتجربة المستخدم — مجانًا.
إذا كان موقعك يبدو بطيئًا، فالصور عادة هي السبب. صورة واحدة غير مضغوطة قد تبلغ عدة ميغابايت — أثقل من كل نصوصك وأكوادك وخطوطك مجتمعة. ضغط الصور هو أسرع مكسب لموقع أسرع.
لماذا حجم الصورة مهم جدًا
سرعة الصفحة تؤثّر على كل شيء: الزوار يغادرون الصفحات البطيئة، وGoogle تستخدم السرعة (Core Web Vitals) كعامل ترتيب. الصور الأصغر تعني تحميلًا أسرع، وسيو أفضل، وتكلفة بيانات أقل، ومستخدمين أكثر رضا — خصوصًا على شبكات الهاتف.
كيف يعمل الضغط
يقلّل الضغط حجم الملف بطريقتين: خفض الجودة قليلًا (وهو غالبًا غير مرئي للعين) وتغيير حجم الصورة إلى الأبعاد التي تُعرض بها فعلًا. صورة بعرض 4000 بكسل تُعرض في عمود 800 بكسل تهدر 80% من بياناتها.
اضغط الصور في متصفحك
لست بحاجة إلى Photoshop. يتيح لك ضاغط الصور المجاني رفع صورة JPG أو PNG، وضبط الجودة والعرض الأقصى، وتحميل ملف أصغر بكثير — كل ذلك محليًا في متصفحك، فلا تُرفع صورك لأي خادم.
نصائح عملية
- استهدف أقل من 200 كيلوبايت لمعظم صور الويب.
- غيّر الحجم إلى أكبر حجم تُعرض به الصورة فعلًا.
- ابدأ بجودة 70–80% وخفّضها حتى تلاحظ فرقًا.
- احتفظ بنسخة أصلية في حال احتجت التعديل لاحقًا.
افعل هذا لكل صورة في موقعك وستقلّل غالبًا وزن الصفحة الإجمالي إلى النصف — تغيير سيقدّره زوّارك وترتيبك في البحث معًا.
اختر الصيغة المناسبة قبل الضغط
الضغط لا يصلح اختيار صيغة غير مناسبة. JPEG فعالة للصور الفوتوغرافية، وPNG مناسبة للتفاصيل بلا فقدان أو للشفافية، بينما WebP تعطي غالباً حجماً أصغر للصور والرسومات. قارن النتيجة بصرياً ولا تعتمد على رقم الحجم وحده.
طابق أبعاد الصورة مع التصميم
حدد أولاً أكبر عرض تظهر به الصورة. بطاقة لا تتجاوز 600 بكسل لا تحتاج ملف كاميرا بعرض 4000 بكسل. يمكن التصدير بحوالي ضعفي عرض CSS للحفاظ على الوضوح في الشاشات عالية الكثافة، ثم استعمال صور متجاوبة حتى يختار الهاتف ملفاً أصغر.
اختبار جودة قابل للتكرار
- احتفظ بالملف الأصلي خارج مجلد الموقع.
- غيّر حجم نسخة إلى أكبر أبعاد عرض فعلية.
- صدّر بجودة 80% وقارن عند تكبير 100%.
- اخفض الجودة تدريجياً حتى تظهر العيوب، ثم ارجع خطوة.
- أعد قياس الصفحة ولا تفترض أن الحجم وحده حل كل مشكلات السرعة.
حدد العرض والارتفاع في الصفحة لمنع تغير التخطيط، وحمّل الصورة الرئيسية بسرعة مع تأجيل الصور البعيدة. يشرح دليل web.dev للصور الصيغ والأحجام والتسليم بتفصيل أكبر.
قس النتيجة قبل وبعد
ابدأ بالأدلة: سجل الأبعاد والحجم الأصلي، واضغط نسخة، ثم قارنها داخل الصفحة. تعرض أدوات المطور الحجم المنقول ووقت التحميل، ويمكن لـLighthouse أو PageSpeed كشف الصور الأكبر من اللازم ومشكلات أكبر عنصر مرئي. كرر الاختبار لأن ظروف الشبكة تتغير.
مثال للصور المتجاوبة
قد تظهر صورة بعرض 360 بكسل في الهاتف و700 في اللوحة و1000 في الحاسوب. إرسال ملف بعرض 2400 لكل جهاز يهدر البيانات. أنشئ عدة أحجام واستعمل srcset وsizes أو مكون صور موثوقاً، حتى يختار المتصفح الملف المناسب قبل التحميل.
احم الصورة الرئيسية
لا تؤجل الصورة التي تحدد Largest Contentful Paint بلا داع. أعطها أبعاداً ثابتة ومصدراً فعالاً وأولوية مناسبة. أما الصور أسفل الشاشة الأولى فيمكن تحميلها عند الحاجة. لا تمنح الأولوية لكل الصور لأن ذلك يلغي فائدتها.
اختر حسب المحتوى
| المحتوى | البداية المناسبة | ما يجب فحصه |
|---|---|---|
| صورة فوتوغرافية | WebP أو JPEG | الوجوه والظلال والتدرجات |
| لقطة شاشة | WebP أو PNG | النص الصغير والحواف |
| شعار أو رمز | SVG عند الملاءمة | الأبعاد والوصف الميسر |
| رسم شفاف | WebP أو PNG | الحواف على خلفيات مختلفة |
الصورة الصغيرة المشوهة ليست تحسيناً، وإخفاء صورة كبيرة بـCSS لا يمنع تنزيلها. وثق الأحجام والجودة، وأتمت التغيير المتكرر، وراجع الملفات الكبيرة دورياً حتى لا تعود المشكلة.
أسئلة شائعة
ما إعداد الجودة المناسب؟
لا يوجد رقم واحد. ابدأ بين 75 و85% للصورة الفوتوغرافية وافحصها بحجم العرض الحقيقي.
هل WebP أصغر دائماً؟
غالباً وليس دائماً. قارن الملفات الفعلية؛ قد يكون JPEG جيد أصغر من WebP بإعداد ضعيف.
هل أؤجل كل الصور؟
لا. تأجيل الصورة الرئيسية قد يبطئ LCP. أجل الصور الموجودة أسفل الشاشة الأولى.
هل CSS يقلل حجم التنزيل؟
لا، فهو يغير العرض فقط. أنشئ مصدراً أصغر واستعمل صوراً متجاوبة.
هل أضغط الملف مرات كثيرة؟
الحفظ المتكرر بصيغة فاقدة يراكم العيوب. ارجع إلى الأصل لكل نسخة جديدة.
هل الضغط يكفي لدرجة PageSpeed ممتازة؟
لا. الاستجابة وJavaScript والخطوط والتخزين والتخطيط والسكربتات الخارجية عوامل أخرى.