كيف تضغط الصور لموقع ويب

وفقًا لتقرير Web Almanac لعام 2025 الصادر عن HTTP Archive، بلغ الوزن الوسيط للصفحة الرئيسية 2.56 MB على الهاتف المحمول، منها 911 KB صور. وعلى أجهزة الكمبيوتر المكتبية، حملت الصفحة الوسيطة 1,058 KB من الصور. والصور أيضًا هي ما ينتظره الزوار: فأكبر عنصر يظهر على الشاشة عند تحميل الصفحة، وهو العنصر الذي يقيسه مؤشر Largest Contentful Paint (LCP)، كان صورةً في 76% من صفحات الهاتف المحمول.

الصور الأخف تُحمَّل أسرع على الاتصالات البطيئة، وتستهلك قدرًا أقل من بيانات الهاتف لدى زوارك، وتقلّل ما تدفعه مقابل عرض النطاق. ومقياس LCP واحد من مؤشرات Core Web Vitals، وهي المقاييس التي تعتمدها Google لتقييم تجربة الصفحة، لذا قد تكلّفك الصور الثقيلة أكثر من بضع ثوانٍ من صبر الزوار.

لا يستطيع الضغط إنقاذ صورة أكبر بكثير من المساحة التي تشغلها. فصورة كاميرا بعرض 4000 بكسل تُعرض في عمود عرضه 800 بكسل تحمل 25 ضعف عدد البكسلات الذي تستطيع الصفحة الاستفادة منه. ويشير web.dev إلى أن إرسال صور بمقاس شاشات الكمبيوتر إلى الهواتف قد يستهلك من البيانات 2–4 أضعاف ما يلزم.

• اللافتات بعرض الصفحة كاملًا: يكفي عرض 1600–2000 بكسل تقريبًا لمعظم التصاميم.
• الصور داخل عمود المقال: نحو ضعف عرض العمود، كي تبقى حادة على الشاشات عالية الكثافة (مثلًا 1400 بكسل لعمود عرضه 700 بكسل).
• الصور المصغّرة والصور الرمزية: ضعف مقاس عرضها، وغالبًا ما يكون 200–400 بكسل.

تحدد الصيغة مدى كفاءة تخزين الصورة. باختصار: الصور الفوتوغرافية تناسبها JPG أو WebP، والشعارات ولقطات الشاشة وكل ما فيه شفافية تناسبه PNG أو WebP. وتشرح مقارنتنا بين JPG وPNG وWebP متى تتفوّق كل صيغة.

تعرض نحو 97% من المتصفحات المستخدمة صيغة WebP، وغالبًا ما تكون ملفاتها أصغر بشكل ملحوظ. لتجربتها، حوّل الصور عبر JPG إلى WebP أو PNG إلى WebP وقارن الناتج بالأصل: فالملف المحوَّل ليس أصغر دائمًا، خاصةً في الرسومات البسيطة.

يزيل الضغط بيانات يُستبعد أن تفتقدها العين. في أداة ضغط الصور من Bitinz يمكنك إفلات دفعة من ملفات JPG أو PNG أو WebP واختيار أحد ثلاثة مستويات:

• سريع: السرعة أولًا، للدفعات الكبيرة.
• متوازن: المستوى الافتراضي، ويناسب معظم صور المواقع.
• أقصى ضغط: يستغرق وقتًا أطول قليلًا مقابل ملفات أصغر؛ ويستحق ذلك في الصور التي تظهر في كل صفحة، مثل اللافتات والخلفيات.

عندما تُبقي على الصيغة نفسها، لا يعيد إليك Bitinz أبدًا ملفًا أكبر من الملف الذي رفعته. قارن الناتج بالأصل بالحجم الكامل، خاصةً الصور التي تحتوي على نص دقيق أو تدرجات لونية ناعمة، ثم نزّل ما يرضيك منها.

حتى الصورة المضغوطة جيدًا قد تُبطئ الصفحة إذا حُمّلت في الوقت الخطأ أو بالمقاس الخطأ. وبضع سمات HTML تؤدي معظم العمل:

• حدّد width وheight لكل صورة، كي يحجز المتصفح مساحتها ولا يقفز التخطيط أثناء التحميل.
• أضف loading="lazy" إلى الصور الموجودة في أسفل الصفحة، كي لا تُحمَّل إلا عندما يقترب منها الزائر أثناء التمرير.
• لا تستخدم التحميل الكسول أبدًا مع الصورة الرئيسية في أعلى الصفحة. بل يوصي web.dev بإضافة fetchpriority="high" إلى تلك الصورة، على ألا يتجاوز ذلك صورة أو صورتين.
• استخدم srcset وsizes لتقديم الصورة نفسها بعدة عروض، كي تنزّل الهواتف ملفًا أصغر مما تنزّله الشاشات الكبيرة.
• قدّم الصور بمدة تخزين مؤقت طويلة، وعبر شبكة CDN إن كانت لديك، كي لا يعيد الزوار العائدون تنزيلها.

افحص الصفحة باستخدام PageSpeed Insights أو لوحة Lighthouse في Chrome. منذ Lighthouse 13، جُمعت فحوصات الصور في عنصر واحد بعنوان «Improve image delivery» (تحسين تقديم الصور)، يسرد الصور التي يمكن ضغطها أكثر، أو تقديمها بصيغة حديثة، أو تصغير مقاسها. ولا تُدرج الصور التي يقلّ توفيرها عن 4 KiB، لذا فالقائمة القصيرة علامة جيدة.

ثم انظر إلى الصفحة بنفسك على الهاتف. فالحواف الحادة والنصوص داخل الصور ودرجات لون البشرة هي أول ما تظهر فيه مشكلات الضغط.

إذا كان موقعك يضيف صورًا كل يوم، عبر نظام لإدارة المحتوى أو متجر إلكتروني مثلًا، فاضغطها أثناء الرفع أو النشر بدلًا من ضغطها يدويًا. تستقبل واجهة API للمطورين من Bitinz الصورة عبر HTTP وتعيد رابطًا إلى الملف المضغوط، لذا يمكن تشغيلها من سكربت أو ضمن عملية البناء. ولكل حساب حصة شهرية مجانية.

1. 01اضبط أبعاد كل صورة على نحو ضعف المقاس الذي تُعرض به.
2. 02استخدم JPG أو WebP للصور الفوتوغرافية، وPNG أو WebP للرسومات والشفافية.
3. 03اضغط بمستوى «متوازن»، وجرّب «أقصى ضغط» مع أكبر الصور.
4. 04قارن الناتج بالأصل قبل أن تستبدله به.
5. 05حدّد العرض والارتفاع، واستخدم التحميل الكسول للصور الواقعة أسفل الجزء الظاهر من الصفحة، ولا تستخدمه أبدًا مع الصورة الرئيسية.
6. 06افحص الصفحة مجددًا في PageSpeed Insights.

هل ترفع صورًا إلى مكان آخر غير موقعك؟ لكل منصة قواعدها الخاصة: راجع متطلبات حجم الصور للبريد الإلكتروني والمتاجر الإلكترونية.