كيف تقلل حجم الصور من غير أن تفسد جودتها؟

صورة بحجم 4 ميجابايت لا تصبح “ممتازة” لأنها حادة، وصورة بحجم 80 كيلوبايت لا تصبح “محسنة” إذا صار الوجه فيها بلا تفاصيل. تحسين الصور هو فن التخلص من البيانات التي لا يحتاجها الزائر، مع إبقاء ما يحتاجه فعلًا.

ابدأ من السؤال الذي يتجاهله أغلب الناس: كم ستظهر الصورة فعلًا؟

إذا كان مكان الصورة داخل المقال لا يتجاوز تقريبًا 1200 بكسل، فلا معنى لإرسال ملف بعرض 4000 أو 5000 بكسل إلى كل زائر. CSS قد يصغر الصورة على الشاشة، لكنه لا يمحو البيانات التي اضطر المتصفح إلى تنزيلها.

Google توضح في دليلها الرسمي عن الصور المتجاوبة أن تقديم صور بحجم سطح المكتب لأجهزة الهاتف قد يستهلك بيانات أكثر من اللازم، وأن استخدام صور متجاوبة يسمح للمتصفح باختيار مصدر أنسب لقدرات الجهاز ومساحة العرض. [المصدر: Google web.dev]

ما الذي يقلل حجم الصورة فعلًا؟

تقليل الأبعاد ليس هو تقليل الجودة

هذه نقطة عملية جدًا. عندما تقلل أبعاد صورة من 4000×2667 إلى 1600×1067، أنت تقلل عدد البكسلات نفسها. عندما تخفض جودة JPG أو WebP، أنت تطلب من الخوارزمية ضغط البيانات بصورة أشد.

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

متى تبدأ آثار الضغط بالظهور؟

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

الصيغة قد توفر أكثر من خفض الجودة

إذا كانت لديك صورة فوتوغرافية كبيرة محفوظة كـPNG، فالمشكلة قد تكون اختيار الصيغة قبل أي شيء آخر. تحويلها إلى WebP أو JPG بإعداد منطقي يمكن أن يعطي ملفًا أخف بكثير مع مظهر مناسب للويب.

Google تنشر توثيق WebP الرسمي وتوضح أن الصيغة تدعم الضغط الفقدي وغير الفقدي والشفافية. لذلك هي خيار عملي يستحق المقارنة، لا ضمانًا بأن كل WebP سيكون أصغر من كل JPG. [المصدر: Google for Developers]

نوع الصورة وطريقة عرضها على الويب

صورة المنتج ليست مثل صورة خلفية

في المتجر، الصورة تحمل معلومة: نسيج القماش، اللون، تفاصيل الحافة، أو شكل القطعة. إذا ضحيت بهذه التفاصيل لتربح 100 كيلوبايت، فقد ربحت رقمًا وخسرت وظيفة الصورة.

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

الصور المتجاوبة تحل مشكلة لا يحلها الضغط وحده

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

Google web.dev تشرح أن هذه الآليات تسمح بتوفير عدة مصادر للصورة، ويختار المتصفح المصدر الأنسب بناءً على مساحة العرض وكثافة الشاشة وظروف الجهاز. هذا يخفف نقل بيانات غير ضرورية بدل الاعتماد على ملف واحد لكل الحالات. [المصدر: Google web.dev]

كيف تصل إلى نقطة جيدة؟

أشياء لا تفعلها إذا أردت نتيجة نظيفة

• لا تضغط نسخة مضغوطة مرارًا إذا كانت الصيغة فقدية؛ ارجع إلى الأصل الجيد.
• لا تجعل أصغر حجم ممكن هو الهدف الوحيد.
• لا ترفع صورة بعرض آلاف البكسلات إذا كان التصميم لن يعرضها بهذا الحجم.
• لا تستخدم PNG تلقائيًا لكل صورة لمجرد أنه غير فقدي.
• لا تعتمد على رقم الجودة وحده؛ قارن النتيجة بصريًا.

كيف تعرف أنك وصلت إلى نقطة جيدة؟

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

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