كيف تقلّل حجم الصور دون فقدان ظاهر في الجودة

الصور في الغالب أثقل ما في صفحة الويب، وقد تزن صورة واحدة غير محسَّنة أكثر من كل ما في الصفحة من HTML و CSS و JavaScript مجتمعةً. والخبر السارّ أن معظم هذا الوزن غير مرئي: بكسلات لا يراها أحد وتفاصيل لا تلتقطها العين. وإزالته تجعل الصفحات أسرع، خصوصًا على الهواتف واتصالات الجوال، دون أن تسوء هيئتها في شيء.

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

اعثر أولًا على أثقل صورك

افتح أدوات المطوّرين في متصفحك، وانتقل إلى تبويب Network، وصفِّ بحسب «Img»، ثم أعد تحميل الصفحة ورتّب بحسب الحجم. أكبر الملفات هي حيث ستوفّر أكثر. يشغّل فاحص سرعة الموقع من Rudra أداة Lighthouse على الصفحة ويسرد الفحوص التي لم تنجح، ومنها فحوص الصور (كالصور الأكبر من اللازم أو الضعيفة الضغط) متى انطبقت. وفي عمليات الزحف إلى الموقع كاملًا، ينبّه Rudra أيضًا إلى الصور التي بلا خاصيتَي العرض والارتفاع، وإلى الصفحات التي تحمّل أكثر من عشر صور دون تحميل مؤجَّل.

كيف تقلّل حجم الصور، خطوة بخطوة

1. غيّر المقاس إلى الحجم الذي تُعرض به الصورة

هذا في العادة أكبر مكسب. فالصورة التي عرضها 4000 بكسل وتُعرض في عمود عرضه 800 بكسل تحمل نحو 25 ضعف ما تحتاج إليه من البكسلات. اعرف أكبر مقاس تُعرض به الصورة فعلًا (افحصها في أدوات المطوّرين)، وصدّرها بذلك العرض، أو بما يصل إلى ضعفه لتبقى حادّة على الشاشات العالية الكثافة. وتصغير الصورة عبر CSS لا يقلّل حجم التنزيل؛ فالملف الكامل يُرسَل على كل حال.

2. اختر الصيغة المناسبة

• JPEG: للصور الفوتوغرافية والصور المعقّدة، حين تحتاج إلى أوسع توافق ممكن.
• PNG: للصور التي تحتاج إلى جودة بلا فقد أو إلى شفافية بحواف حادّة، مثل لقطات الشاشة للواجهات أو المخططات القليلة الألوان. و PNG خيار سيئ للصور الفوتوغرافية.
• WebP: تدعمها جميع المتصفحات الرئيسية الحالية، وهي في العادة أصغر من JPEG أو PNG عند جودة بصرية مماثلة. وتدعم الشفافية والحركة كذلك.
• AVIF: أصغر في الغالب حتى من WebP عند الجودة البصرية نفسها، وتدعمها جميع المتصفحات الرئيسية الحالية، وإن كان ترميزها أبطأ.
• SVG: للشعارات والأيقونات والرسوم التوضيحية البسيطة. وهي صيغة متّجهية، فتبقى حادّة بأي مقاس، وحجمها ضئيل في الغالب.
• الفيديو بدلًا من GIF: صورة GIF المتحركة أكبر في العادة بأضعاف كثيرة من المقطع نفسه بصيغة فيديو MP4 أو WebM. استخدم <video autoplay muted loop playsinline>.

3. اضغط، وتحقق بعينيك

الصيغ التي تضغط مع فقد (JPEG و WebP و AVIF) تتيح لك الموازنة بين حجم الملف والجودة. في الصور الفوتوغرافية، إعداد جودة في حدود 70–85 نقطة بداية شائعة، وكثيرًا ما تبدو نتيجته مطابقة للأصل، لكن القيمة الصحيحة تتوقف على الصورة، فقارن النتيجة بالحجم الفعلي. وأزل كذلك البيانات الوصفية، كتفاصيل الكاميرا وموقع GPS، فهي تزيد الوزن وقد تكشف أكثر مما تقصد. أدوات مفيدة:

• Squoosh (في المتصفح): قارن الصيغ ومستويات الجودة جنبًا إلى جنب، صورةً صورة.
• ImageOptim (على macOS) أو أدوات سطح المكتب المشابهة: اسحب إليها مجلدًا لتحسينه بلا فقد أو مع فقد.
• سطر الأوامر: cwebp -q 80 photo.jpg -o photo.webp يحوّل إلى WebP؛ و magick photo.jpg -resize 1600x -quality 80 photo-1600.jpg يغيّر المقاس ويعيد الضغط باستخدام ImageMagick.
• ضمن مسار البناء: مكتبات مثل sharp (على Node.js) تستطيع تغيير مقاس كل صورة وتحويلها تلقائيًا وقت البناء أو الرفع.

4. قدّم مقاسات مختلفة للشاشات المختلفة

لا ينبغي للهاتف أن ينزّل الصورة المعدّة لشاشة سطح مكتب كبيرة. مع srcset و sizes يختار المتصفح أصغر ملف يبدو حادًّا:

<img src="hero-800.jpg" srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w" sizes="(min-width: 1024px) 800px, 100vw" width="1600" height="900" alt="Hikers crossing a ridge at sunrise">

srcset تسرد الملفات وعروضها؛ و sizes تخبر المتصفح بالعرض الذي ستُعرض به الصورة (800 بكسل على الشاشات الكبيرة، وعرض منفذ العرض كاملًا في ما عدا ذلك). ولتقديم الصيغ الحديثة مع بديل احتياطي، ضع الصورة داخل <picture> مع <source type="image/avif" srcset="..."> و <source type="image/webp" srcset="..."> قبل <img>؛ فالمتصفحات تستخدم أول صيغة تدعمها.

5. أجّل تحميل الصور الواقعة أسفل الصفحة، لا الصورة الرئيسية

أضف loading="lazy" إلى الصور الواقعة في أسفل الصفحة، فلا يجلبها المتصفح إلا حين يقترب الزائر منها بالتمرير. ولا تؤجّل تحميل الصورة الرئيسية في أعلى الصفحة: فهي في الغالب عنصر Largest Contentful Paint، وتأخيرها يجعل الصفحة تبدو أبطأ. ولهذه الصورة فكّر في fetchpriority="high" ليجلبها المتصفح مبكرًا.

6. حدّد العرض والارتفاع دائمًا

خاصيتا العرض والارتفاع تتيحان للمتصفح حجز المساحة الصحيحة قبل وصول الصورة، فلا يقفز النص عند تحميلها، وهذا سبب شائع لإزاحة التخطيط (CLS). اضبطهما على المقاس الأصلي للصورة، وأبقِ الصور مرنة عبر img { max-width: 100%; height: auto; } في ملف CSS.

7. أتمِت العملية

التحسين اليدوي لا يصمد أمام الرفع التالي. دع منصّتك تتولى الأمر: فـ WordPress يولّد عدة مقاسات من كل صورة مرفوعة ويضيف srcset تلقائيًا، وإضافات التحسين تستطيع إضافة الضغط والتحويل إلى WebP أو AVIF؛ ومكوّن <Image> في Next.js يغيّر المقاس ويحوّل الصيغة ويؤجّل التحميل افتراضيًا؛ وشبكات CDN الخاصة بالصور تحوّل الصور لحظيًّا بحسب معاملات عنوان URL. واقرن ذلك بمدد تخزين مؤقت طويلة لملفات الصور كي لا ينزّلها الزوّار العائدون من جديد.

أخطاء شائعة

• تأجيل تحميل الصورة الرئيسية، وهو ما يؤخّر أهم محتوى في الصفحة.
• رفع صور الكاميرا أو الهاتف بدقتها الكاملة وترك تصغيرها لـ CSS.
• حفظ الصور الفوتوغرافية بصيغة PNG.
• وضع الصور المهمة في خلفيات CSS، حيث يكتشفها المتصفح متأخرًا ولا يمكن أن يكون لها نص بديل.
• إعادة ضغط صورة JPEG مضغوطة أصلًا مرة بعد مرة، وهو ما يضيف تشوّهات ظاهرة في كل مرة.
• نسيان العرض والارتفاع، والتسبب في إزاحة التخطيط.
• المبالغة في ضغط صور المنتجات حتى تضيع التفاصيل التي يريد العملاء رؤيتها.

ما الذي تستطيع الأدوات الحكم عليه وما لا تستطيع

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