كيفية ضغط الصور للويب
يُهدر معظم حجم الصورة قبل أن يعمل المُرمِّز أصلًا. هذا هو ترتيب الخطوات الذي يزيل البايتات فعلًا، والإعدادات التي تستحق الاهتمام.
لماذا يهم حجم الصور
في معظم المواقع، تُعدّ الصور أكبر مساهم منفرد في حجم الصفحة؛ كثيرًا ما يتجاوز مجموع النصوص البرمجية والأنماط والخطوط معًا. ويترتب على ذلك نتيجتان. الأولى: الزائر الذي يستخدم بيانات الجوال ينتظر أطول ويدفع ثمن ذلك. والثانية: ينعكس حجم الصور مباشرة على مؤشر Largest Contentful Paint، وهو مؤشر Core Web Vital الذي يُلام غالبًا على ضعف نتيجة الأداء، لأن أكبر عنصر في الصفحة يكون عادة صورة الواجهة الرئيسية.
والخبر السار أن حجم الصور هو أيضًا أسهل ما يمكن إصلاحه. لا شيء مما يلي يتطلب إعادة بناء خط الإنتاج.
اعمل بترتيب الأثر
تدفعك أدوات الضغط إلى التوجه أولًا نحو شريط الجودة، لكنه أصغر الروافع الثلاث. الترتيب الصحيح هو:
- تغيير الأبعاد — أكبر مكسب بفارق كبير.
- اختيار الصيغة — مكسب كبير يحدث مرة واحدة.
- ضبط الجودة — تحسين دقيق بعائد حقيقي لكن محدود.
1. غيّر الأبعاد أولًا
صورة بعرض 4000 بكسل تُعرض في مساحة بعرض 800 بكسل تحمل نحو 25 ضعف عدد البكسلات التي تستطيع إظهاره. ولا تستطيع أي صيغة ترميز أن تسدّ هذه الفجوة. تقديم صورة مفرطة الحجم ثم ضغطها بقوة هو الخطأ الكلاسيكي: تدفع الثمن مرتين، وتكون النتيجة المرئية أسوأ مما لو غيّرت الأبعاد بشكل صحيح من البداية.
اضبط الأبعاد على مقاس العرض الفعلي، مع مضاعفتها لشاشات الكثافة العالية إن كانت الصورة مهمة. وكقاعدة عامة، نادرًا ما تحتاج صورة الواجهة بعرض الصفحة الكامل إلى أكثر من نحو 2000 بكسل عرضًا، ونادرًا ما تحتاج صور المحتوى داخل الصفحة إلى أكثر من 1200.
2. اختر الصيغة
ينبغي أن تذهب الصور الفوتوغرافية إلى AVIF أو WebP. أما الرسومات ذات الحدود الحادة أو النصوص أو الشفافية فتبقى بصيغة PNG أو WebP بدون فقد. يغطي دليل الصيغ المقايضات بالتفصيل؛ والخلاصة أن اختيار الصيغة قرار يتعلق بنوع كل صورة، لا قرار شامل.
3. اضبط الجودة
في الصيغ ذات الفقد، الجودة مقياس من 0 إلى 100 يوازن بين الدقة والحجم. وهي ليست خطية: الانتقال من 90 إلى 80 يقتطع غالبًا ثلث الملف دون فرق ملحوظ، بينما الانتقال من 50 إلى 40 لا ينتج في الغالب سوى تشوهات مرئية.
نقاط بداية معقولة:
| المحتوى | الهدف التقريبي | ملاحظات |
|---|---|---|
| صور فوتوغرافية للويب | جودة JPEG/WebP نحو 75 | النقطة المثالية المعتادة؛ وتصل AVIF إلى جودة مماثلة عند قيمة أقل |
| الصور المصغّرة والصور الرمزية | جودة 60–70 | صغر حجم العرض يخفي أكثر مما تتوقع |
| لقطات الشاشة والواجهات والنصوص | بدون فقد (PNG / WebP بدون فقد) | أي ضغط بفقد يلطّخ الحدود والرموز بسماكة بكسل واحد |
| الأرشفة / الطباعة | جودة 90+، أو الأصل | احتفظ بالأصل؛ فهذا ليس سيناريو تسليم ويب |
احكم بمقاس العرض، لا بالتكبير. قارن الصورة المضغوطة والأصل بالحجم الذي ستظهر به فعلًا. الاختلافات الصارخة عند تكبير 400% تكون عادة غير مرئية في السياق.
سير عمل دفعي قابل للتوسع
- اجمع كل شيء في مجلد واحد — لقطات الشاشة والصور والصادرات.
- قسّمها إلى مجموعتين: فوتوغرافية ورسومية. ولكل منهما صيغ وإعدادات مختلفة.
- غيّر أبعاد كل مجموعة إلى أبعاد التسليم الخاصة بها.
- اضغط المجموعة الفوتوغرافية إلى AVIF وWebP؛ واضغط المجموعة الرسومية بدون فقد.
- قارن كل نتيجة بأصلها. وكل ما زاد حجمه يُستبعد — فهذا مؤشر، لا فشل.
- احتفظ بالأصول. الناتج المضغوط أثر من أثر البناء؛ أما أصولك فهي الأرشيف.
يتولى tinyimg الخطوتين 4 و5 لما يصل إلى 30 ملفًا في المرة، ويمكنه إخراج عدة صيغ في تمريرة واحدة لتقارن الأحجام مباشرة. كما أن المعالجة الدفعية في المتصفح تعني أن مجلدًا من صور العملاء أو الصور الشخصية لا يغادر جهازك أبدًا — وهي ميزة تستحق الاحتفاظ بها إن كانت سياسات الرفع من الاعتبارات.
أخطاء تهدر أكبر قدر من البايتات في صمت
- إرسال صورة ضخمة واحدة إلى كل الأجهزة. ملف JPEG واحد بعرض 2000 بكسل ليس استراتيجية متجاوبة. استخدم
srcsetليجلب الهاتف نسخة أصغر. - إعادة حفظ ملفات JPEG مرارًا. كل جيل بفقد يراكم الضرر. أعد الترميز دائمًا من الأصل.
- استخدام PNG للصور الفوتوغرافية. غالبًا أكبر بمقدار 5–10 أضعاف من JPEG المكافئ دون أي فائدة مرئية.
- السعي إلى «أصغر حجم ممكن» بما يتجاوز المفيد. توفير 40% ممتاز؛ أما 45% مع تدرجات ظاهرة في السماء فليس كذلك.
- نسيان التحميل المتأخر. لا ينبغي للصور الواقعة أسفل الشاشة الأولى أن تعوق أول رسم. التحميل المتأخر تغيير في سمة واحدة بأثر كبير.
- عدم إعادة القياس أبدًا. حدّد ميزانية ثم تحقق منها — وإلا فهي تتزايد موردًا بعد مورد.
كيف تعرف أنك انتهيت
اختر ميزانية للصفحة والتزم بها. والهدف المعقول لصفحة محتوى هو إبقاء إجمالي حمولة الصور دون نحو ميغابايت واحد، مع تولّي صورة الواجهة الرئيسية أكبر نصيب. وإذا تجاوزت صفحة هذا الحد بكثير، فالسبب المعتاد صورة واجهة رئيسية بأبعاد غير معدّلة، أو صورة فوتوغرافية محفوظة بصيغة PNG، أو عدة صور زخرفية كان يمكن أن تكون SVG أو CSS.
المهمة غير لامعة لكنها قصيرة: غيّر الأبعاد، واختر صيغة، واضبط جودة معقولة، وتحقق بمقاس العرض، واحتفظ بالأصول. هذا التسلسل يزيل الغالبية الساحقة من وزن الصور الذي يمكن تفاديه في أي موقع تقريبًا.