كيف يعمل ضغط الصور في المتصفح
كل تمريرة ضغط تعمل كليًا بـ JavaScript. لا تُنزَّل أي مكتبة ترميز ولا يُشرَك أي خادم. تتولى Canvas API الأصلية للمتصفح فك ترميز الصورة، ثم تعيد ترميزها بجودة أقل، وتسلّمك Blob يمكن للصفحة معاينته أو تنزيله أو ضغطه في ملف ZIP. لأن كل خطوة تبقى داخل صندوق الرمل الخاص بعلامة التبويب، لا تلمس الملفات الأصلية الشبكة أبدًا.
- يُقرأ كل ملف مرفوع بوصفه Blob وينشئ عنوان URL للكائن لكي يتمكن المتصفح من فك ترميزه محليًا، دون نسخ بايتات إلى خادم أو كتابتها على القرص.
- تُرسم الصورة المفكوكة على عنصر Canvas خارج الشاشة بأبعاد البكسل الأصلية، جاهزةً لإعادة الترميز.
- يستدعي
canvas.toBlob(callback, mimeType, quality)لإعادة ترميز وحدات البكسل. في وضع الجودة يُعيَّن قيمة شريط التمرير مباشرةً على إعداد التكميم في المُشفِّر؛ وفي وضع الحجم المستهدف تُنصِف الصفحة قيمة الجودة حتى يتناسب Blob المخرج مع ميزانية البايتات الخاصة بك. - تعرض قراءةً قبل/بعد مع الحجم الأصلي والحجم المضغوط ونسبة الوفر، ثم تتيح تنزيل كل صورة على حدة أو ملف ZIP واحد لكامل الدُّفعة. يُبنى ملف ZIP في الذاكرة باستخدام fflate، مكتبة حجمها 8 كيلوبايت تُحمَّل عند الحاجة الأولى.
لماذا ضغط الصور؟
- الصور الأصغر تُحمَّل أسرع. خفض صورة hero بحجم 4 ميغابايت إلى 600 كيلوبايت يُحسِّن Largest Contentful Paint مباشرةً، وهو أحد Core Web Vitals الذي تستخدمه Google في التصنيف. في صفحة تضم عدة صور يتضاعف هذا الوفر في رسم أول سريع.
- حدود الرفع والمرفقات في كل مكان. كثير من منصات CMS وأدوات التذاكر وأنظمة البريد الإلكتروني ترفض الملفات التي تتجاوز 1 أو 2 ميغابايت. تمريرة ضغط سريعة تُنزِل الصورة تحت الحد دون الحاجة لفتح محرر كامل.
- عرض النطاق الترددي والتخزين يكلفان مالًا على نطاق واسع. شحن WebP بجودة 0.8 بدلًا من PNG كامل الحجم يمكن أن يقلص حمل الصور بثُلثٍ أو أكثر، مما يخفض فواتير إخراج CDN واستهلاك بيانات الجوال لزوارك.
- بعض الصور لا يجوز رفعها أصلًا. لأن كل شيء يعمل في متصفحك، فإن صور الهوية والصور الطبية ولقطات الشاشة الداخلية تبقى على جهازك — لا خادم جهة خارجية كـ TinyPNG في الحلقة يدعو للقلق.
الاستخدامات الشائعة
الضغط يظهر في كل مرة تكون فيها الصورة أكبر من المكان المقصودة له. ثلاثة أنماط نراها مرارًا وتكرارًا.
- إعداد صور المنتجات لمتجر إلكتروني. تُضغط أصول JPEG إلى جودة 0.8 (أو هدف 200 كيلوبايت) لكي يظل واجهة المتجر سريعةً وتجتاز Core Web Vitals على الجوّال.
- تصغير لقطات الشاشة قبل إرفاقها بتذكرة متتبع الأخطاء أو الويكي. دُفعة من التقاطات PNG تُحوَّل إلى JPEG بجودة 0.85 كثيرًا ما تنخفض من عشرات الميغابايت إلى بضعة.
- إنزال صورة تحت حد الرفع — بوابة طلبات توظيف ترفض الملفات التي تتجاوز 1 ميغابايت، أو بريد إلكتروني ذو حد مرفقات ضيق، أو صورة رمزية لمنتدى تحتاج أن تقع ضمن ميزانية بايت.
مثال عملي: JPEG بحجم 4 ميغابايت إلى 400 كيلوبايت
ملف JPEG بحجم 4 ميغابايت مباشرةً من كاميرا الهاتف هو حمل شائع يُعيق حدود الرفع ويُبطّئ الصفحات. إنه معيار قياس عادل لما يوفره الضغط.
أسقط ملف JPEG في منطقة الرفع، اترك التنسيق على JPEG، ثم إما اسحب شريط تمرير الجودة إلى 0.7 أو انتقل إلى وضع الحجم المستهدف واكتب 400 KB. في وضع الجودة تُعيد خط أنابيب Canvas الترميز مرة واحدة وتعرض النتيجة، عادةً حوالي 500 إلى 700 كيلوبايت حسب الصورة. في وضع الحجم المستهدف تجرّب الصفحة بضع قيم للجودة وتستقر على أعلى قيمة لا تزال أقل من 400 كيلوبايت، وتُبلّغ عن نسبة الوفر. انقر تنزيل على البطاقة للحصول على الملف الفردي، أو انقر تنزيل .zip إن ضغطت عدة صور دفعةً واحدة. تستغرق الرحلة ذهابًا وإيابًا أقل من ثانية لصورة بهذا الحجم ولا تستهلك أي نطاق ترددي بعد انتهاء تحميل الصفحة ذاتها.
ما الفرق بين وضع الجودة ووضع الحجم المستهدف؟
وضع الجودة يمنحك شريط تمرير واحدًا من 0.1 إلى 1.0 يُعيَّن على إعداد التكميم في مُشفِّر JPEG أو WebP — الأرقام المنخفضة تعني ملفات أصغر وعيوبًا أكثر ظهورًا. وضع الحجم المستهدف يقلب المعادلة: تُسمي حجمًا بالكيلوبايت وتُنصِف الصفحة قيمة الجودة، مُشفِّرةً بضع مرات حتى تجد أعلى جودة لا تزال ضمن ميزانيتك. وضع الحجم المستهدف مناسب حين يكون الحد صارمًا (حد رفع 1 ميغابايت مثلًا)؛ وضع الجودة أسرع وأفضل حين تريد نتيجة بصرية متوقعة فحسب. PNG بلا ضياع فلا ينطبق عليه أي من الوضعين.
هل يحدث هذا على جهازي؟
نعم، كليًا. تستخدم الصفحة Canvas API الأصلية للمتصفح وWeb File API لفك ترميز كل صورة وإعادة ترميزها في الذاكرة. لا تُرسَل أي بيانات صور إلى خادم، ولا رفع مؤقت، ولا جولة ذهابًا وإيابًا إلى السحابة. يمكنك التحقق بنفسك: افتح DevTools، انتقل إلى لوحة Network، ونفِّذ ضغطًا. الطلبات الصادرة الوحيدة التي ستراها هي تحميل الصفحة الأولي واستدعاءات الإعلانات. لا شيء على شكل صورة يغادر علامة التبويب.
لماذا يُقلِّص ضغط PNG في بعض الأحيان حجمه قليلًا جدًا؟
PNG تنسيق بلا ضياع، لذا لا تستطيع Canvas API التخلي عن تفاصيل لتصغيره — بإمكانها فقط إعادة تعبئة وحدات البكسل ذاتها. بالنسبة للصور الفوتوغرافية، يكون حجم PNG كبيرًا أصلًا وإعادة الترميز بلا ضياع تُحقق وفرًا ضئيلًا. الفوز الحقيقي يأتي من تبديل تنسيق المخرج إلى JPEG أو WebP، اللذان يستخدمان ضغطًا مع ضياع يناسب الصور الفوتوغرافية وعادةً ما يصلان إلى حجم أصغر بـ 4 إلى 10 مرات. احتفظ بـ PNG حين تحتاج إلى جودة بلا ضياع أو شفافية؛ وإلا فاختر JPEG للصور الفوتوغرافية أو WebP لأفضل توازن بين الحجم والجودة.
أي تنسيق ينبغي لي اختياره؟
للصور الفوتوغرافية، يمنح WebP بجودة 0.8 أفضل توازن بين الحجم والجودة ومدعوم من كل متصفح صدر منذ 2021؛ JPEG هو الخيار العالمي الآمن حين تكون الوجهة أقدم أو أكثر صرامة. اختر PNG فقط حين تحتاج إلى جودة بلا ضياع أو قناة ألفا — الرسوم الخطية، لقطات شاشة واجهة المستخدم، الشعارات ذات الشفافية. إن كنت تُحسِّن سرعة الصفحة وجمهورك يستخدم متصفحات حديثة، فـ WebP هو الخيار الصحيح تقريبًا دائمًا؛ أما إن كنت تُغذي نظام CMS قديمًا أو خط طباعة يرفض WebP، فالزم JPEG.
أسقط صورك، اختر مستوى الجودة أو الحجم المستهدف، ثم اضغط. كل شيء يعمل في علامة تبويبك — بدون رفع، بدون حساب، بدون انتظار في قائمة خادم.