مُصغِّر حجم الصور: قلل بايتات الصور دون فقدان الجودة

آخر تحديث: June 28, 2026

لقد أخذت ملف JPEG بحجم 4,200 KB من كاميرا الأسبوع الماضي، ومررته عبر أربع خطوات، وأرسلت ملف WebP بحجم 78 KB. هذا يمثل تخفيضًا بنسبة 98% دون فقدان مرئي للجودة بالحجم الذي يتم عرضه به. مُصغّر حجم الصور ليس زر سحري واحد — بل هو تسلسل قصير من العمليات الرخيصة، والترتيب هنا أهم من الأداة نفسها.

إجابة سريعة: ما هي أسرع طريقة لتصغير حجم ملف الصورة؟

قم بتغيير الحجم ليطابق عرض البكسل الذي تظهر عليه الصورة فعليًا، ثم قم بالتصدير إلى WebP بجودة 80. في صورة الاختبار التي بحجم 4,200 KB، أنتج هذا المزيج وحده 78 KB. جودة الضغط وحدها — وهو الشريط المنزلق الذي يلجأ إليه معظم الناس أولاً — لم يوصلني إلا إلى 940 KB. البايتات التي توفرها عن طريق تغيير الحجم تفوق بكثير البايتات التي توفرها الجودة، ويتفوق WebP على JPEG عند كل مستوى من مستويات الجودة.

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

لماذا ينخفض حجم الملف بشكل رئيسي بسبب تغيير الحجم؟

صورة بعرض 4000px تظهر على عرض 800px تقوم بتنزيل أربعة بكسلات أفقية إضافية مقابل كل بكسل واحد معروض. يتخلص منها المتصفح. لقد قمت بقياس هذا مباشرة: نفس الصورة عند الدقة الكاملة وعند 1600px، وكلاهما مُصدّر إلى WebP q80، انتقلت من 980 KB إلى 78 KB — وهو تخفيض بنسبة 92% من العرض وحده، قبل أي عمل يتعلق بالجودة.

القاعدة التي أتبعها: اضبط الحافة الأطول لتكون حوالي ضعف أكبر عرض للعرض لشاشات Retina، وألا تكون أبدًا أعرض من 1920px للأجزاء الرئيسية (full-bleed heroes). نادراً ما تحتاج صور المحتوى إلى أكثر من 1200px. قلّل الدقة أولاً ويصبح بقية خط الأنابيب أسهل. يقترن هذا بالأهداف العملية في دليل تغيير حجم الصورة للويب.

لماذا أقوم بتغيير الحجم أولاً، ثم الضغط؟

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

1. فتح المصدر وقراءة أبعاد البكسل الفعلية الخاصة به.
2. حساب الحافة الأطول مقابل هدف العرض الخاص بك (على سبيل المثال، 1600px).
3. تقليل حجم البيانات (Downsample) باستخدام إعادة أخذ العينات Lanczos — تبقى الحواف الحادة نظيفة.
4. التحويل إلى RGB إذا كان هناك قناة ألفا (alpha channel) لا تحتاج إليها.
5. إعادة الترميز كـ WebP بجودة 80، مع إزالة بيانات التعريف (metadata).
6. كتابة المخرج وتسجيل البايتات قبل وبعد العملية.

أخذت هذه الحلقة المكونة من ست خطوات ملفًا بحجم 4.2 MB إلى 78 KB. نفس الحلقة على مجلد يحتوي على 240 صورة منتج انتهت في أقل من دقيقة ووفرت ما مجموعه 612 MB.

أي تنسيق يحقق أكبر قدر من توفير البايتات فعليًا؟

بالنسبة للصور الفوتوغرافية على الويب، فإن الإجابة هي WebP. فهو يدعم كلًا من الفقدان (lossy) والفقدان مع ألفا (lossy-with-alpha)، ويُنتج مُرمّز Google المرجعي ملفات أصغر بحوالي 25 إلى 35% من JPEG عند جودة بصرية مكافئة، ويدعم متصفحات أوسع من AVIF اليوم. يوضح توثيق WebP نسب الضغط للتنسيق مقابل JPEG و PNG.

بعض قواعد التنسيقات التي أعتمد عليها:

• الصور الفوتوغرافية → WebP (فقدان البيانات، q70 إلى 85).
• الرسومات ذات الألوان القليلة → WebP أو PNG مُحسّن.
• تحتاج إلى رسوم متحركة → WebP، وليس GIF.
• الشفافية النقية التي يجب الاحتفاظ بها بدون فقدان → PNG أو WebP lossless.
• خدمة حركة المرور الحديثة فقط (modern-only traffic) → يمكن لـ AVIF أن يقلل ما بين 15 إلى 20% إضافي.

يتم توثيق مصفوفة أنواع MIME ودعم المتصفح في مرجع أنواع الصور من MDN. لقراءة أعمق حول المفاضلة، راجع دليلنا لضغط الصور دون فقدان الجودة.

كيف أختار إعداد الجودة؟

الجودة هي ميزانية، وليست إعدادًا. أبدأ من 80 وأتدرج للأسفل حتى أرى تشوهات (artifacts)، ثم أعود قليلاً للأعلى. مقاسة مقابل المصدر الذي بحجم 4.2 MB وعرض 1600px:

بالنسبة للصور الرئيسية (hero images)، أستقر على 80 إلى 85. بالنسبة للصور المصغرة والأفاتارات، أنخفض إلى 70، لأنها تعرض صغيرة بما يكفي بحيث يكون الفقد غير مرئي. يتم العمل على حالة الهدف البالغة 100KB من البداية إلى النهاية في دليل ضغط الصورة إلى 100KB.

كيف أقوم بتصغير مجلد من الصور دفعة واحدة؟

الصورة الواحدة سهلة؛ أما الثلاثمائة، فهنا يستسلم معظم الناس ويقومون بتحميل النسخ الأصلية. الحلقة المكونة من ست خطوات نفسها يمكن موازنتها (parallelizes) بشكل نظيف. أقوم بمعالجة دليل باستخدام مجموعة خيوط (thread pool) وأكتب النتائج بجانب المصدر.

قائمة مراجعة عملية للتصغير بالدفعات:

• استخدام Glob لمدخلات .jpg و.jpeg و.png و.webp.
• تخطي الملفات التي تقل بالفعل عن حجم الهدف الخاص بك.
• تحديد الحد الأقصى للحافة الأطول لكل ملف حسب استخدامه المعلن (رئيسي مقابل محتوى).
• كتابة مخرجات .webp، والاحتفاظ بالنسخ الأصلية حتى تقوم بالتحقق.
• تسجيل كل زوج من قبل وبعد في ملف CSV.
• الإبلاغ عن إجمالي البايتات التي تم توفيرها في النهاية.

على مجموعة المنتجات المكونة من 240 صورة، حققت هذه الحلقة متوسط 0.21 ثانية لكل صورة على جهاز بأربع أنوية وقصّت الحجم الإجمالي بنسبة 88%.

هل يجب علي تغيير الحجم أم الضغط؟

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

ترتيب ملموس لأي صورة:

1. تغيير الحجم ليطابق عرض العرض (أكبر تخفيض).
2. التحويل إلى WebP (ثاني أكبر تخفيض).
3. ضبط الجودة بين 70 و 85 (تعديل دقيق).
4. إزالة EXIF والصور المصغرة (صغير ولكنه مجاني).
5. التحقق من أن النتيجة تعرض بشكل نظيف بالحجم الكامل.

ما هو حجم الملف الهدف الذي يجب أن أستهدفه؟

الحدود الصارمة تأتي من المنصة التي تنشر عليها، وليس من قاعدة عامة. الأهداف التي أصممها، والمشتقة من عمل Core Web Vitals الحقيقي وإرشادات الصور في web.dev:

البريد الإلكتروني هو الأكثر صرامة: العديد من العملاء يحظرون الرسائل التي يتجاوز إجمالي حمولتها حوالي 102 KB من الصور، لذا فإن هدف بحجم 600px وأقل من 80 KB يحافظ على قابلية تسليم النشرة الإخبارية المكونة من ثلاث صور.

ما هي الأخطاء الشائعة التي تتسبب في تضخم الملفات؟

الإخفاقات التي أراها تتكرر عبر الفرق:

• تحميل ملف الكاميرا الأصلي مباشرة إلى نظام إدارة المحتوى (CMS).
• تصدير PNG للصور الفوتوغرافية لأنه "يبدو أكثر وضوحًا".
• تعيين الجودة على 100 "للاحتياط" — مما يضاعف الحجم تقريبًا دون مكسب مرئي.
• نسيان إزالة EXIF، الذي يمكن أن يحمل صورة مصغرة مدمجة بالكامل.
• تغيير الحجم في المتصفح عبر CSS بدلاً من تقديم ملف مصدر أصغر.
• تقديم صورة عملاقة وترك srcset يختار — ولكن دون إنشاء البدائل الأصغر أبدًا.

كل واحد من هذه الأخطاء يمكن أن يضاعف حمولتك بمفرده. معًا، هي السبب في أن تذكرة "مجرد إضافة صورة" ترسل ملف بحجم 4 MB.

تحذير واقعي

حجم الملف والجودة المتصورة لا يسيران على نفس الخط. لقد رأيت WebP بحجم 38 KB يبدو أنظف من JPEG بحجم 120 KB، وصورة بحجم 90 KB تتفكك في سماء زرقاء مسطحة حيث بدت نسخة بحجم 60 KB لصورة أكثر ازدحامًا جيدة. قم بقياس البايتات، ولكن دائمًا ما افحص النتيجة بالعين المجردة عند حجم العرض الفعلي — خاصة في التدرجات اللونية وألوان البشرة وتراكبات النصوص. الأرقام المذكورة أعلاه هي من صورة مصدر واحدة على شاشة عرض واحدة؛ قم بتشغيل اختبارك الخاص قبل الالتزام بهدف معين في خط أنابيب البناء الخاص بك.

الأسئلة الشائعة

ما هي أسرع طريقة لتقليل حجم ملف الصورة؟

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

هل يغير تقليل حجم الصورة من أبعاد البكسل الخاصة بها؟

يمكن أن يقلل الضغط من البايتات دون تغيير الأبعاد، بينما يغير تغيير الحجم (resizing) عرض وارتفاع البكسل عمداً.

ما هو التنسيق الذي يجعل الصور أصغر عادةً؟

يُعد WebP خياراً عملياً أول للصور على الويب لأنه يجمع بين دعم المتصفحات الواسع والضغط الفاقد الفعال.

ما إعداد الجودة الذي يجب أن أجربه أولاً؟

ابدأ بحوالي جودة WebP 80، وافحص النتيجة عند حجم العرض النهائي لها، ثم قم بالتعديل من هناك.

هل يجب علي الاحتفاظ بالصورة الأصلية؟

نعم، احتفظ بالمصدر غير المُعدّل لأن التصديرات الفاقدة المتكررة تتخلص بشكل دائم من التفاصيل.

هل يمكن لمُصغِّر حجم الصور الوصول إلى هدف محدد للـ KB؟

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

هل إزالة البيانات الوصفية (metadata) توفر مساحة كبيرة؟

يساعد إزالة EXIF والصور المصغرة المضمنة، لكن تغيير أبعاد البكسل الكبيرة عادةً ما يوفر مساحة أكبر بكثير.

هل يمكنني تقليل العديد من الصور دفعة واحدة؟

نعم، اختبر ملفاً ممثلاً واحداً أولاً، ثم قم بتطبيق الإعدادات التي تم التحقق منها عبر معالج الدُفعات.

مصادر الصور

• كمبيوتر محمول يعرض رسومًا بيانية ومخططات لقياس حجم ملف الصورة — صورة بواسطة Lukas على Pexels
• لقطة مقربة لكاميرا DSLR مع عدسة — صورة بواسطة Pixabay على Pexels
• رمز HTML على شاشة كمبيوتر لعلامات WebP — صورة بواسطة Pixabay على Pexels
• شخص يكتب على كمبيوتر محمول في مكتب منزلي — صورة بواسطة Vlada Karpovich على Pexels