ضغط الصور — JPEG وPNG وWebP

ما هو ضغط الصور؟

// Compress a JPEG image in the browser using the Canvas API
async function compressImage(file, quality = 0.75) {
  const img = await createImageBitmap(file); // decode the image
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0);
  // quality: 0.0 (smallest file) → 1.0 (original quality)
  return new Promise((resolve) =>
    canvas.toBlob(resolve, 'image/jpeg', quality)
  );
}

// file comes from an <input type="file"> or drag-and-drop
const blob = await compressImage(file, 0.75);
console.log(`Original:   ${file.size} bytes`);
console.log(`Compressed: ${blob.size} bytes`);
// → Original:   2100000 bytes
// → Compressed:  672000 bytes  (~68% reduction)

الميزات الرئيسية

JPEG مقابل PNG مقابل WebP

أمثلة على الضغط

photo-landscape.jpg (2.1 MB, 4000×3000)

photo-landscape.jpg (680 KB at quality 75)

logo-transparent.png (450 KB, 1200×800)

logo-transparent.webp (85 KB at quality 80)

hero-banner.webp (800 KB, 1920×1080)

hero-banner.webp (250 KB at quality 75)

كيفية ضغط الصور عبر الإنترنت

1. 1

   ارفع صورك

   اسحب وأسقط الصور في منطقة الرفع، أو انقر لتصفح ملفاتك. يمكنك اختيار حتى 20 صورة JPEG أو PNG أو WebP دفعة واحدة، كل منها حتى 10 ميجابايت.

2. 2

   اضبط الجودة

   استخدم شريط تمرير الجودة لتحديد مستوى الضغط المطلوب (0-100). الافتراضي هو 75، مما يوفر توازناً جيداً. راقب أحجام الملفات ونسب الضغط تتحدث في الوقت الفعلي.

3. 3

   نزّل النتائج

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

حالات الاستخدام

تحسين أداء المواقع

قلّل أحجام ملفات الصور قبل رفعها إلى موقعك. الصور الأصغر تُحمّل أسرع، مما يُحسّن نتائج Core Web Vitals (خاصة Largest Contentful Paint)، ويُقلّل تكاليف النطاق الترددي، ويُحسّن ترتيب SEO.

تقليل حجم مرفقات البريد الإلكتروني

اضغط الصور قبل إرفاقها بالبريد الإلكتروني للبقاء ضمن حدود حجم المرفقات (عادة 10-25 ميجابايت). يمكن ضغط دفعة من 20 صورة من 50 ميجابايت إلى أقل من 10 ميجابايت.

تحضير الرفع لوسائل التواصل

اضغط الصور مسبقاً قبل رفعها إلى منصات التواصل الاجتماعي. بينما تُعيد المنصات ضغط الصور تلقائياً، البدء بملف مضغوط بشكل مثالي يمنحك مزيداً من التحكم.

تحسين أصول التطبيقات والألعاب

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

تحسين المستندات والعروض التقديمية

قلّل حجم الصور المضمنة في ملفات PDF ومستندات Word والعروض التقديمية. يمكن تقليل عرض تقديمي بحجم 50 ميجابايت إلى 10 ميجابايت بدون فقدان جودة ملحوظ.

التفاصيل التقنية

ضغط Canvas API

تستخدم هذه الأداة طريقة toBlob() في واجهة HTML5 Canvas API للضغط. يتم رسم الصورة على عنصر canvas غير مرئي، ثم إعادة ترميزها بمعامل الجودة المحدد.

تحويل PNG إلى WebP

بما أن Canvas toBlob() تتجاهل معامل الجودة لصور PNG (المخرجات دائماً بدون فقدان)، تُحوّل هذه الأداة ملفات PNG إلى تنسيق WebP عندما يكون شريط تمرير الجودة أقل من 100.

سلوك معامل الجودة

يُعيّن شريط تمرير الجودة معامل الجودة في Canvas toBlob(): 100 = 1.0 (أعلى جودة)، 0 = 0.0 (أدنى جودة). لـ JPEG، الجودة 75 (0.75) هي عادة النقطة المثالية.

ذاكرة المتصفح والحدود

كل صورة موجودة في الذاكرة ككائن الملف الأصلي وكائن Blob المضغوط. مع 20 صورة بحجم 10 ميجابايت لكل منها، يمكن أن يصل استخدام الذاكرة القصوى إلى حوالي 400 ميجابايت.

أفضل الممارسات

ابدأ بجودة 75 لـ JPEG/WebP

الجودة 75 هي نقطة البداية الموصى بها لمعظم الاستخدامات. تُقلّل حجم الملف عادة بنسبة 60-80% مع فقدان جودة مرئي ضئيل.

استخدم WebP عند الإمكان

ينتج WebP ملفات أصغر بنسبة 25-35% من JPEG بنفس الجودة البصرية ويدعم الشفافية مثل PNG. جميع المتصفحات الحديثة تدعم WebP.

احتفظ بالملفات الأصلية

احتفظ دائماً بصورك الأصلية غير المضغوطة كملفات مصدر. الضغط مع الفقدان لا رجعة فيه — إعادة ضغط صورة مضغوطة بالفعل تُدهور الجودة أكثر.

تحقق من الجودة قبل التنزيل

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

اجمع الصور المتشابهة معاً

الصور ذات الخصائص المتشابهة (نفس نوع المحتوى والدقة وعمق اللون) تُضغط بشكل أفضل بنفس إعداد الجودة.

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