قبل عقد، كان تحرير صورة على موقع يعني رفعها، وانتظار خادم ليقوم بالعمل، وتنزيل النتيجة. اليوم يستطيع متصفح ضغط صورة بحجم 30 MB، أو تحويل PNG إلى WebP، أو تغيير مقاس دفعة صور دون أن يتصل بخادم قط. تقنيتان جعلتا ذلك التحوّل ممكناً: Canvas وWebAssembly. لا غموض في أيهما بمجرد أن ترى ماذا يفعل كلٌ.

Canvas: سطح رسم بوصول على مستوى البكسل

"كيف تعالج المتصفحات الصور: شرح Canvas وWebAssembly" — visual 1
Canvas: سطح رسم بوصول على مستوى البكسل

كل متصفح حديث يأتي بـ Canvas API — مستطيل فارغ تستطيع الرسم عليه بـ JavaScript. قوّته الحقيقية لأدوات الصور ليست رسم الأشكال؛ بل أن Canvas يمنح الشيفرة وصولاً مباشراً إلى البكسلات الفردية لصورة.

حين تحمّل صورة في قماشة، يسلّم المتصفح شيفرتك مصفوفة أرقام: قيم الأحمر والأخضر والأزرق وalpha (الشفافية) لكل بكسل. من هناك، تصبح العمليات العادية مباشرة:

  • تغيير المقاس يعني أخذ عيّنة من شبكة البكسل تلك إلى أصغر أو أكبر.
  • القصّ يعني نسخ منطقة مستطيلة إلى قماشة جديدة.
  • الدوران والقلب تحويلات هندسية تُطبَّق قبل الرسم.
  • تحويل الصيغة يحدث حين تصدّر القماشة — اطلب JPEG أو PNG أو WebP فيرمّز المتصفح البكسلات وفقاً لذلك.

كل هذا يعمل على جهازك، باستخدام وحدة معالجتك المركزية، وحيث تتوفّر، وحدتك الرسومية. لا شيء يُرفع، لأن البكسلات لا تغادر الصفحة أبداً. لهذا يستطيع محوّل الصور تحويل PNG إلى WebP لحظة وضعها — لا رحلة ذهاب وإياب للانتظار.

WebAssembly: سرعة شبه أصلية داخل المتصفح

"كيف تعالج المتصفحات الصور: شرح Canvas وWebAssembly" — visual 2
WebAssembly: سرعة شبه أصلية داخل المتصفح

Canvas يتعامل مع التحويلات الشائعة، لكن بعض المهام تحتاج عضلة حسابية جدية — ترميز JPEG عالي الجودة، تحسين PNG، تشغيل نموذج ذكاء اصطناعي لقصّ خلفية. JavaScript وحده قد يكون بطيئاً جداً لهذه. هنا يأتي WebAssembly (يُختصَر غالباً إلى Wasm).

WebAssembly صيغة مدمجة منخفضة المستوى تستطيع المتصفحات تنفيذها بسرعة قريبة من الأصلية. يأخذ المطوّرون شيفرة سريعة مجرّبة مكتوبة بلغات مثل C أو C++ أو Rust — المكتبات نفسها التي تشغّل برامج صور سطح المكتب — ويصرّفونها إلى Wasm. ثم يشغّل المتصفح تلك الشيفرة في بيئة محكمة معزولة، أسرع بكثير من JavaScript المكافئ.

عملياً يعني هذا أن لسان متصفح يستطيع الآن أداء عمل كان يتطلّب خادماً أو تطبيق سطح مكتب: ترميز الصور بضغط احترافي، ونزع البيانات الوصفية، أو تشغيل شبكة عصبية لإزالة الخلفية — كله محلياً.

لماذا المعالجة المحلية خاصة وسريعة معاً

ضع Canvas وWebAssembly معاً فتنبثق الفوائد طبيعياً.

الخصوصية بنيوية، لا وعد. لأن البكسلات تبقى في الصفحة والمعالجة تعمل على وحدة معالجتك، لا توجد خطوة رفع. لا نسخة خادم من ملفك لتُخزَّن أو تُسجَّل أو تُخزَّن مؤقتاً أو تُدرَّب عليها — لأن الملف لم يُرسَل قط. لست مضطراً لتصديق سياسة خصوصية؛ تستطيع التحقّق منها بتشغيل وضع الطيران ومراقبة الأداة تظل تعمل.

السرعة تأتي من قطع الشبكة كلياً. أبطأ خطوة في أداة خادم عادة نقل ملفك للأعلى والعودة. أزل ذلك، فتُعالَج صورة 40 MB بسرعة صورة 40 KB تقريباً. ولا طابور أيضاً — جهازك يعمل على صورتك وحدها، لا على صور آلاف آخرين.

هناك مكافأة لا يتوقّعها معظم الناس: لأن الأداة كلها مجرد شيفرة وأصول، يستطيع متصفح تخزينها. IMG.DIY تطبيق ويب تقدّمي مع عامل خدمة، فبعد زيارتك الأولى تُخزَّن الأدوات على جهازك وتظل تعمل دون اتصال — في وضع الطيران، في طائرة، في أي مكان. الضغط والتحويل لا يحتاجان اتصالاً إطلاقاً.

المقايضات، بصدق

المعالجة داخل المتصفح ليست سحراً وليست خالية من الحدود. الدفعات الكبيرة جداً قد تجهد ذاكرة هاتف منخفض المستوى، لأن العمل يستخدم موارد جهازك بدل مركز بيانات. وبضع ميزات تحتاج الشبكة فعلاً — أي شيء يستدعي خدمة خارجية، مثل تدقيق سرعة الصفحة، لا يعمل دون اتصال. إزالة الخلفية حالة وسط: تعمل محلياً، لكن فقط بعد تنزيل ملف النموذج لمرة واحدة.

أما للمهام اليومية — الضغط، التحويل، تغيير المقاس، القصّ، الدوران — فالمتصفح الآن ورشة صور كاملة وخاصة وسريعة تصادف أنها تعيش في لسان. بلا رفع، ولا خادم، ولا انتظار.