حمية الصور القاسية: ضغط البكسلات لويب أسرع

في جملة واحدة

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

المشكلة التي يحلها

في الأيام الأولى للويب، عندما كانت مودمات الدايل-أب (dial-up) تصدر أصواتًا كأنها روبوتات غاضبة، كان كل بايت مهمًا. تحميل صورة واحدة كان يستغرق دقائق. هذا الضغط أدى إلى ولادة الجيل الأول من صيغ صور الويب، كل منها متخصص في مجاله. أصبح JPEG ملك الصور الفوتوغرافية، وتولى GIF مسؤولية الرسوم المتحركة البسيطة والغرافيكس، ولاحقًا، وصل PNG ليقدم جودة فائقة وشفافية للشعارات والأيقونات.

لنتقدم سريعًا إلى اليوم. لدينا إنترنت فائق السرعة بشكل يبعث على السخرية، ولكن لدينا أيضًا شاشات 4K، وشاشات retina على هواتفنا، وشهية لا تشبع للمحتوى الغني بصريًا. المشكلة لم تختفِ؛ لقد تغير حجمها فقط. صورة واحدة غير محسّنة من هاتف ذكي حديث يمكن أن يصل حجمها إلى 10-15 ميغابايت. موقع ويب يحتوي على عشرات من هذه الصور هو موقع ميت عند وصوله، خاصة للمستخدمين على شبكات الهاتف المحمول مع باقات بيانات محدودة.

غوغل تعرف هذا. لهذا السبب سرعة الصفحة، وتحديدًا سرعة ظهور المحتوى الرئيسي (Largest Contentful Paint أو LCP)، هي عامل رئيسي في تصنيفات البحث. الصور بطيئة التحميل هي العدو الأول لنتيجة LCP جيدة.

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

كيف يعمل تحت الغطاء

لفهم تحويل الصور، عليك أن تفهم ما هي الصورة أصلاً: شبكة عملاقة من النقاط الملونة (pixels). السحر يكمن في كيفية تخزين تلك الشبكة من المعلومات بكفاءة.

البكسلات، الألوان، والبيانات الخام

في أبسط صورها، الصورة الرقمية هي مجرد أرقام. كل بكسل يُمثَّل عادةً بثلاث قيم للأحمر والأخضر والأزرق (RGB). كل قيمة تتراوح من 0 إلى 255 (والتي تتسع تمامًا في بايت واحد).

لنأخذ صورة Full HD قياسية: عرض 1920 بكسل في ارتفاع 1080 بكسل.

• إجمالي البكسلات: 1920 * 1080 = 2,073,600
• البيانات لكل بكسل: 3 بايت (1 للأحمر، 1 للأخضر، 1 للأزرق)
• الحجم الخام الإجمالي: 2,073,600 * 3 = 6,220,800 بايت، أو حوالي 6.2 ميغابايت.

إذا أضفت قناة رابعة للشفافية ("Alpha" في RGBA)، فهذا يضيف 2 ميغابايت أخرى. تخزين الصور بهذه الطريقة يسمى bitmap (BMP)، وهذا هو السبب في أن لا أحد يستخدم صور bitmap الخام على الويب. نحن بحاجة إلى الضغط.

الضغط الفاقد للبيانات (Lossy) مقابل الضغط غير الفاقد للبيانات (Lossless)

هذا هو أهم مفهوم في صيغ الصور.

الضغط غير الفاقد للبيانات (Lossless) يشبه أمين أرشيف مثالي يمكن عكس عمله. يجد الأنماط والتكرار في بيانات البكسل ويسجلها باختصار. على سبيل المثال، بدلاً من تخزين "أبيض، أبيض، أبيض، أبيض، أبيض"، يخزن "5 × أبيض". عند فتح الصورة، يتم إعادة بناء البيانات الأصلية بشكل مثالي، بت مقابل بت. لا يتم فقدان أي جودة. صيغتا PNG و GIF تستخدمان الضغط غير الفاقد للبيانات.

الضغط الفاقد للبيانات (Lossy) هو فنان براغماتي. يتخلص بشكل دائم من البيانات التي من غير المرجح أن تلاحظها العين البشرية. وهو جيد بشكل خاص في التعامل مع التباينات الدقيقة في اللون والسطوع الموجودة في الصور الفوتوغرافية. يحقق أحجام ملفات أصغر بكثير من الطرق غير الفاقدة للبيانات، ولكن على حساب الدقة. في كل مرة تحفظ فيها صورة بضغط فاقد للبيانات، يتم فقدان المزيد من البيانات إلى الأبد. وهذا ما يسمى "فقدان الجودة عبر الأجيال" (generation loss). صيغتا JPEG و WebP (النوع الفاقد للبيانات) تستخدمان هذه الطريقة.

الميزة	ضغط غير فاقد (PNG, GIF)	ضغط فاقد (JPEG, WebP)
الهدف	إعادة بناء مثالية	أصغر حجم ملف ممكن
البيانات	لا يتم التخلص من أي بيانات	يتم التخلص من البيانات غير المهمة
الأفضل لـ	الشعارات، النصوص، الأيقونات، الرسوم الخطية	الصور الفوتوغرافية، التدرجات اللونية المعقدة
إعادة الحفظ	آمن، لا تدهور في الجودة	يدهور الجودة في كل مرة
تشبيه	أرشيف ZIP	ملخص لرواية

جولة سريعة على الصيغ

• JPEG (Joint Photographic Experts Group): حصان العمل للصور منذ التسعينيات. يستخدم تقنية ضغط فاقدة ذكية تتضمن تحويل جيب التمام المتقطع (DCT) لتجميع البكسلات في كتل 8x8 وتنعيم التفاصيل التي لن تفتقدها العين. لا يدعم الشفافية أو الرسوم المتحركة.
• PNG (Portable Network Graphics): تم إنشاؤه كبديل متفوق وخالٍ من براءات الاختراع لـ GIF. ضغطه غير الفاقد للبيانات (يسمى "Deflate") ممتاز للصور ذات المساحات اللونية المسطحة، مثل الشعارات وعناصر واجهة المستخدم. ميزته القاتلة هي قناة ألفا 8-بت، مما يسمح بشفافية جزئية وسلسة.
• GIF (Graphics Interchange Format): جد صور الويب. يشتهر بالرسوم المتحركة، لكنه محدود تقنيًا. يمكنه فقط استخدام لوحة ألوان من 256 لونًا لكل إطار وشفافيته ثنائية—إما أن يكون البكسل شفافًا بنسبة 100٪ أو معتمًا بنسبة 100٪، مما يؤدي إلى حواف متعرجة.
• WebP: صيغة غوغل الحديثة المصممة لتكون "الصيغة التي تحكمهم جميعًا". يمكن أن تعمل في وضعي الضغط الفاقد وغير الفاقد. يعتمد ضغطها الفاقد على مرمّز الفيديو VP8 وغالبًا ما يكون أكثر كفاءة من JPEG، مما ينتج عنه ملفات أصغر بنفس الجودة المرئية. كما أنه يدعم شفافية ألفا والرسوم المتحركة، مما يجعله بديلاً محتملاً لكل من PNG و GIF.

رياضيات تغيير الحجم

عندما تغير أبعاد الصورة، فأنت لا تقوم فقط بتمديدها. يجب على البرنامج إنشاء شبكة جديدة تمامًا من البكسلات. تسمى هذه العملية إعادة المعاينة (resampling) أو الاستيفاء (interpolation).

• التصغير (Downsizing): تبحث الخوارزمية في مجموعة من البكسلات في الصورة الأصلية وتحسب بكسلًا واحدًا جديدًا لتمثيلها في الصورة الأصغر. قد يكون هذا متوسطًا بسيطًا أو حسابًا مرجحًا أكثر تعقيدًا.
• التكبير (Upsizing): هذا أصعب بكثير لأن الخوارزمية يجب أن تخترع بكسلات جديدة لملء الفجوات. تنظر إلى البكسلات المجاورة وتخمن ما يجب أن يكون بينها. هذا هو السبب في أن تكبير صورة صغيرة عادة ما يؤدي إلى فوضى ضبابية أو متكتلة.

الخلاصة الرئيسية: قم دائمًا بتغيير الحجم من النسخة الأصلية الأكبر والأعلى جودة لديك.

قصص من الواقع

### كارثة المتجر الإلكتروني

أنفق متجر إلكتروني جديد ثروة على صور منتجات رائعة. المطور، الذي كان يركز على إطلاق الموقع، قام برفع ملفات PNG الضخمة بحجم 8 ميغابايت مباشرة من المصور. بدا الموقع مذهلاً... على اتصال الألياف البصرية في المكتب. بالنسبة للعملاء الفعليين على الهاتف المحمول، كانت صفحات المنتجات تستغرق 15 ثانية للتحميل. كان معدل الارتداد (bounce rate) مرتفعًا للغاية، وكانت المبيعات الأولية صفرًا. كانوا يقدمون ملفات فائقة الجودة وغير فاقدة للبيانات لمحتوى فوتوغرافي، وهو خطأ كلاسيكي.

الدرس: استخدم الصيغ الفاقدة للبيانات مثل JPEG أو WebP للصور الفوتوغرافية. التخفيض الهائل في حجم الملف (غالبًا 80-90٪) مع فقدان ضئيل في الجودة الملحوظة سينقذ أوقات تحميل صفحتك وعملك.

### الشعار الذي بدا... مضروبًا

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

الدرس: للشعارات والأيقونات وأي شيء يتطلب خطوطًا حادة أو خلفية شفافة، استخدم صيغة غير فاقدة للبيانات مثل PNG أو صيغة متجهة (vector) مثل SVG. صيغة JPEG ستدمر حوافك الواضحة وتتركك مع حمولة زائدة غير مرغوب فيها.

### فشل أنيميشن الصفحة الرئيسية

أرادت وكالة تصميم تسلسلًا متحركًا لافتًا للنظر يملأ الشاشة على الصفحة الرئيسية لأحد العملاء. سلموا بفخر ملف GIF متحرك بحجم 12 ميغابايت. كان يعمل بشكل جميل، لكنه خنق أداء الموقع بالكامل، مما تسبب في فشله الذريع في تدقيق Core Web Vitals. أدى عدد الإطارات المرتفع وعدد الألوان إلى تضخيم حجم GIF بشكل غير معقول.

الدرس: GIF هو خيار سيء للرسوم المتحركة المعقدة والحديثة. كان من الممكن أن يكون ملف WebP المتحرك أصغر حجمًا بكثير. والأفضل من ذلك، بالنسبة للرسوم المتحركة الرئيسية (hero animations)، غالبًا ما يوفر عنصر <video> المضغوط بشكل صحيح مع autoplay muted loop جودة أعلى بكثير بجزء صغير من حجم الملف.

أخطاء وشراك شائعة

• استخدام الصيغة الخاطئة للمهمة. هذه هي الخطيئة الكبرى. لا تستخدم JPEG لشعار أو PNG ضخم لصورة إجازة. طابق نقاط قوة الصيغة مع محتواك.
• تغيير الحجم باستخدام HTML/CSS بدلاً من تغيير حجم الملف فعليًا. تعيين <img src="giant-image.jpg" width="200"> لا يجعل الملف أصغر. لا يزال المتصفح يقوم بتنزيل giant-image.jpg بالكامل ثم يقوم بتقليصه. أنت تهدر عرض النطاق الترددي (bandwidth) وتبطئ الصفحة دون سبب.
• إعادة حفظ ملفات JPEG مرارًا وتكرارًا. في كل مرة تحفظ فيها ملف JPEG، فإنه يخضع لجولة أخرى من الضغط الفاقد. هذا "الفقدان عبر الأجيال" يدهور الصورة بسرعة إلى فوضى متكتلة. اعمل دائمًا من الملف المصدر الأصلي.
• تجاهل شريط تمرير "الجودة". عند تصدير JPEG أو WebP، لا تقبل فقط إعداد الجودة الافتراضي "100". يمكنك غالبًا خفضه إلى 75-85 دون أي فرق مرئي تقريبًا وتخفيض هائل في حجم الملف. جرّب!
• نسيان البدائل (fallbacks) للجيل الجديد. بينما أصبح دعم WebP الآن ممتازًا (أكثر من 97٪ من المتصفحات)، قد ترغب في توفير بديل JPEG أو PNG للصور الهامة لعدد قليل من المستخدمين على أنظمة قديمة جدًا. عنصر <picture> في HTML مصمم لهذا الغرض.

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="وصف لصورتي">
</picture>

لماذا يجب أن تضعه على رادارك

إذا كنت مطور ويب، أو مصممًا، أو حتى منشئ محتوى، فإن تحسين الصور ليس خيارًا إضافيًا "لطيفًا". إنها مسؤولية أساسية.

• الأداء هو تجربة المستخدم: الموقع السريع هو موقع جيد. الصور البطيئة هي السبب الرئيسي لتضخم صفحات الويب وإحباط المستخدم.
• تحسين محركات البحث (SEO) مهم: تستخدم غوغل صراحة سرعة الصفحة ومؤشرات Core Web Vitals كإشارة للتصنيف. يمكن للصور المحسّنة أن تحسن بشكل مباشر ظهورك في البحث.
• الموبايل أولاً: غالبية حركة مرور الويب تأتي من الهواتف المحمولة. احترم باقات بيانات المستخدمين واتصالاتهم التي قد تكون متقطعة من خلال تقديم ملفات بأحجام معقولة لهم.
• إنها أسهل خطوة بأكبر تأثير: غالبًا ما يكون تحسين الصور أحد أسهل تحسينات الأداء وأكثرها تأثيرًا التي يمكنك إجراؤها على موقع ويب.

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

تعمق أكثر

• MDN Web Docs: Image file type and format guide - الدليل النهائي لمطوري الويب حول صيغ الصور المختلفة.
• web.dev: Image optimization - دليل متعمق من غوغل حول عملية تحسين الصور بأكملها.
• Wikipedia: Comparison of graphics file formats - جدول ضخم ومفصل يقارن كل صيغة تحت الشمس.
• Google Developers: A new image format for the Web - المصدر الأصلي والتوثيق لصيغة WebP.
• MDN Web Docs: The Picture element - تعلم كيفية تطبيق الصور المتجاوبة مع بدائل للصيغ المختلفة.