ضغط الصور دفعة واحدة لمطوري الويب | Bulk Image Compressor

Published December 18, 2025

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

السؤال ليس ما إذا كان يجب الضغط. بل أين في سير عملك يجب أن يحدث الضغط وأي أداة تناسب كل حالة.

أين يتناسب ضغط الصور في سير عمل المطور

هناك ثلاث نقاط رئيسية يمكنك فيها ضغط الصور أثناء التطوير:

قبل الالتزام (Before commit). تقوم بتحسين الصور محلياً قبل أن تدخل إلى نظام التحكم بالإصدارات. هذا يحافظ على خفة مستودعك ويعني أن كل بيئة (الاختبار، الإنتاج، أجهزة المطورين الآخرين) تحصل على النسخ المحسّنة تلقائياً.

أثناء البناء (During build). أدوات البناء مثل Vite أو webpack تتعامل مع الضغط كجزء من خط أنابيب الأصول. تبقى الصور المصدر بجودة كاملة في المستودع، وتقوم عملية البناء بإنشاء نسخ محسّنة للنشر.

في طبقة CDN. خدمات مثل Cloudflare وImgix وCloudinary تقوم بتحويل وضغط الصور بشكل فوري بناءً على الجهاز والمتصفح الطالب.

لكل نهج مقايضاته، ويمكنك دمجها.

الأدوات عبر الإنترنت مقابل إضافات البناء

لمهمة سريعة لمرة واحدة، مثل ضغط مجموعة من لقطات الشاشة لمنشور مدونة أو تحسين مجموعة من الأيقونات، الأداة عبر الإنترنت هي الخيار الأسرع. افتح Bulk Image Compressor، واسحب ملفاتك، واضبط الجودة، وحمل. يتم الأمر في أقل من دقيقة.

إضافات البناء تتعامل مع التحسين الآلي المستمر. إليك كيف يبدو ذلك عملياً.

Vite

مستخدمو Vite يمكنهم استخدام vite-plugin-imagemin أو إضافات مماثلة:

// vite.config.js
import imagemin from 'vite-plugin-imagemin';

export default {
  plugins: [
    imagemin({
      mozjpeg: { quality: 80 },
      webp: { quality: 80 },
      pngquant: { quality: [0.7, 0.8] },
    }),
  ],
};

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

webpack

مع webpack، image-minimizer-webpack-plugin يقوم بنفس المهمة:

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.sharpMinify,
          options: {
            encodeOptions: {
              jpeg: { quality: 80 },
              webp: { quality: 80 },
            },
          },
        },
      }),
    ],
  },
};

متى تستخدم أي منها

استخدم أداة عبر الإنترنت عندما:

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

استخدم إضافات البناء عندما:

مشروعك لديه بالفعل خط أنابيب بناء
عدة مطورين يساهمون بالصور وتريد تحسيناً متناسقاً
تحتاج تحويل التنسيق (مثل إنشاء نسخ WebP تلقائياً)
تريد صوراً مصدرية بجودة كاملة في المستودع لإمكانية المعالجة المستقبلية

تحسين الصور في CI/CD

إضافات البناء تعمل أثناء البناء المحلي، لكن يمكنك أيضاً إضافة تحسين الصور إلى خط أنابيب CI/CD. هذا يلتقط الصور غير المحسّنة التي تتسرب، بغض النظر عن من قام بالالتزام.

نهج بسيط هو تشغيل سكريبت في خط أنابيب CI الخاص بك يتحقق من أحجام ملفات الصور:

# فشل البناء إذا كانت أي صورة أكبر من 500KB
find public/images -type f \( -name "*.jpg" -o -name "*.png" -o -name "*.webp" \) -size +500k | tee oversized.txt
if [ -s oversized.txt ]; then
  echo "تم العثور على صور كبيرة الحجم. قم بالضغط قبل النشر."
  exit 1
fi

للضغط الآلي في CI، أدوات مثل sharp-cli أو imagemin-cli يمكنها معالجة الصور كخطوة بناء. هذا يضمن عدم وصول أي شيء إلى الإنتاج غير مضغوط.

التحميل البطيء والصور المتجاوبة

الضغط وحده لا يكفي. كيفية تحميل الصور مهمة بنفس القدر.

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

الصور المتجاوبة (Responsive images) تقدم أحجاماً مختلفة بناءً على عرض الشاشة. الهاتف لا يحتاج صورة بحجم 2400px مخصصة لشاشة مكتبية. استخدم خصائص srcset وsizes للسماح للمتصفح باختيار النسخة المناسبة:

<img
  src="product-800.webp"
  srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
  sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1600px"
  alt="صورة المنتج"
  width="1600"
  height="1067"
  loading="lazy"
>

قم بإنشاء هذه المتغيرات الحجمية كجزء من عملية البناء أو باستخدام أداة دفعية قبل الرفع.

توصيل CDN

CDN (شبكة توصيل المحتوى) تقدم الصور من خوادم قريبة جغرافياً لزوارك. هذا يقلل زمن الوصول، لكن بعض شبكات CDN تذهب أبعد من ذلك مع تحسين الصور بشكل فوري.

Cloudflare Image Resizing يمكنها تغيير حجم الصور وتحويلها إلى WebP أو AVIF تلقائياً بناءً على متصفح الزائر. لست بحاجة لإنشاء المتغيرات بنفسك.

Imgix وCloudinary هي شبكات CDN مخصصة للصور. تقوم برفع مصدر واحد عالي الجودة، وهي تنشئ أي حجم وتنسيق وجودة تطلبها عبر معاملات URL. هذا قوي لكنه يضيف تكلفة لكل صورة.

لمعظم المشاريع، ضغط الصور قبل الرفع وتقديمها عبر CDN قياسي (Cloudflare, Fastly, AWS CloudFront) كافٍ. شبكات CDN المخصصة للصور منطقية عندما يكون لديك آلاف الصور المرفوعة من المستخدمين وتحتاج تغيير حجم ديناميكي. للخلفية حول أهمية الضغط للويب، دليلنا حول لماذا تحتاج صور الويب إلى الضغط يغطي الأساسيات.

الأخطاء الشائعة التي يرتكبها المطورون

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

استخدام PNG للصور الفوتوغرافية. PNG مخصصة للرسومات ولقطات الشاشة والصور ذات الشفافية. الصورة الفوتوغرافية المحفوظة كـ PNG تكون عادة أكبر من 3 إلى 5 مرات من نفس الصورة كـ JPEG أو WebP. استخدم التنسيق المناسب لنوع المحتوى. راجع دليل مقارنة التنسيقات للتفاصيل.

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

الإفراط في الضغط. دفع الجودة إلى 30 أو 40% للحصول على ملفات صغيرة ينتج تشوهات مرئية. لصور الويب، جودة 75 إلى 82% تحقق التوازن الصحيح بين الحجم والمظهر.

تجاهل أبعاد الصورة. ضغط صورة بحجم 4000px بجودة 80% جيد، لكن إذا كانت تظهر بعرض 600px على صفحتك، فأنت لا تزال ترسل بكسل أكثر بكثير من اللازم. غيّر الحجم إلى أبعاد العرض أولاً، ثم اضغط.

عدم استخدام WebP. دعم المتصفح لـ WebP أصبح عالمياً الآن. إذا كنت لا تزال تقدم JPEG وPNG حصراً، فأنت تترك توفير 25 إلى 35% في حجم الملف على الطاولة.

نهج عملي

لمعظم مشاريع الويب، إليك ما يعمل بشكل جيد:

غيّر حجم الصور واضغطها قبل الالتزام، باستخدام أداة عبر الإنترنت مثل Bulk Image Compressor أو سكريبت محلي.
أضف إضافة بناء كشبكة أمان لالتقاط أي شيء تسرب.
استخدم التحميل البطيء والصور المتجاوبة في HTML الخاص بك.
قدم من خلال CDN.

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

Ready to compress your images?

Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.

Try Bulk Image Compressor