كيف يعمل تحويل الصورة إلى Base64
يعمل التحويل بالكامل في متصفحك باستخدام File API ودالة btoa المدمجة — لا تُحمَّل أي مكتبة ترميز ولا يرى أي خادم الصورة. إليك خط الأنابيب من البداية حتى النهاية:
- تُسقط صورة أو تختارها. يقرأ المتصفح الملف كـ Blob من قرصك المحلي، دون نسخ البايتات إلى خادم.
- يُقرأ الملف بقطع بحجم 1 ميغابايت وتُلحق بايتات كل قطعة بسلسلة ثنائية. تمنع هذه الطريقة إفاضة مكدس استدعاءات JavaScript عند معالجة الصور الكبيرة.
- تُمرَّر السلسلة الثنائية إلى btoa التي تحوِّل كل ثلاثة بايتات إلى أربعة أحرف Base64 مأخوذة من الأبجدية A–Z، a–z، 0–9، +، /.
- يُقرأ نوع MIME للملف (image/png، image/jpeg، وما إلى ذلك) من كائن File ويُضاف كبادئة data: لإنتاج عنوان data:image/…;base64,… كامل.
- تجمع الصفحة أربعة مخرجات من ذلك العنوان — data URI الكامل، وBase64 الخام بلا بادئة، ووسم
جاهز للصق، ومقتطف CSS background-image — كل منها بزر نسخ خاص.
لماذا نُرمِّز صورة كـ data URI؟
- تضمين شعار صغير أو أيقونة كـ data URI يُزيل رحلة شبكة منفصلة، فتعرض الصفحة أو البريد إطارها الأول بشكل أسرع.
- صفحة أو ورقة أنماط تحتوي صورها مضمَّنة تعمل دون اتصال بالإنترنت، ويمكنك نقلها دون الحاجة إلى سحب مجلد أصول معها.
- تحجب كثير من برامج البريد الصور البعيدة المرتبطة افتراضياً. ضمِّن شعاراً كـ Base64 وسيظهر فور فتح الرسالة دون أي جلب بعيد.
- يجري الترميز بالكامل في متصفحك، فلا تنتقل الصور الحساسة إلى خادم طرف ثالث. هذا يشمل لقطات الشاشة وصور الهوية والمخططات الداخلية.
الاستخدامات الشائعة لصور Base64
تظهر data URIs حيثما كانت الصورة صغيرة بما يكفي لأن طلباً منفصلاً يُكلِّف أكثر من التضخم بنسبة ~33% الذي يُضيفه Base64. ثلاثة أنماط تتكرر باستمرار:
- أيقونات CSS المضمَّنة: sprite أو أيقونة بحجم 1–2 كيلوبايت تُدمج في ورقة الأنماط كـ background-image: url(data:…) لتكون القاعدة مكتفية بذاتها.
- توقيعات البريد والرسائل الإخبارية: شعار مُضمَّن كـ
بـ data URI كـ src يظهر حتى حين يحجب العميل الصور البعيدة.
- تضمين أدوات البناء: يُضمِّن كل من Webpack وVite الأصول تحت حد بايت تلقائياً، وتتيح لك هذه الأداة معاينة ما سيبدو عليه الناتج.
كيف تبدو صورة Base64؟
خذ صورة PNG شفافة حجمها 1×1 بكسل. بايتاتها الأولية 67 بايت فقط، لكن بعد الترميز تصبح السلسلة iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII=، وعنوان data URI الكامل هو data:image/png;base64,iVBORw0KGgo…. لاحظ أن الشكل المُرمَّز أكبر بنحو ثلث من الأصل. هذا هو المقايضة مقابل جعل البيانات الثنائية آمنة للتضمين مباشرةً في النص.
هل تُرفع صورتي إلى أي مكان؟
لا. يستخدم التحويل File API الخاص بالمتصفح ودالة btoa الأصلية لترميز الصورة بالكامل على جهازك. يمكنك التحقق بنفسك: افتح أدوات المطوِّر في متصفحك، انتقل إلى لوحة Network، وحوِّل صورة — الطلبات الوحيدة التي ستراها هي تحميل الصفحة وأي إعلانات. لا يُرسَل أي شيء يشبه الصورة إلى خادم، مما يجعل هذا آمناً للقطات الشاشة والوثائق الرسمية والمخططات الداخلية.
لماذا ناتج Base64 أكبر من صورتي الأصلية؟
يمثِّل Base64 كل ثلاثة بايتات من البيانات الثنائية بأربعة أحرف ASCII، فيكون النص المُرمَّز أكبر بنحو 33% من الملف المصدر. يعرض مؤشر حجم data URI في هذه الصفحة الحجم المتضخم بدقة. لهذا السبب لا تُناسب data URIs إلا الصور الصغيرة — فتضمين صورة بحجم 2 ميغابايت سيُضخِّم HTML أو CSS أكثر بكثير مما يكلِّف طلب منفصل. كقاعدة عامة، ضمِّن الصور التي يقل حجمها عن 4 كيلوبايت واربط ما هو أكبر.
أي تنسيقات صور يمكنني تحويلها؟
يعمل أي تنسيق يتعرَّف عليه متصفحك كصورة، لأن الأداة تقرأ البايتات الخام بدلاً من فك ترميز الصورة. يشمل ذلك PNG وJPEG وGIF وWebP وSVG وBMP. يُقرأ نوع MIME مباشرةً من الملف، فتتطابق بادئة data: دائماً مع التنسيق الحقيقي — JPEG ينتج data:image/jpeg وSVG ينتج data:image/svg+xml. SVG يستحق ملاحظة خاصة: إذ هو نص أصلاً، لذا في حالة SVG غالباً ما تكون data URI المُشفَّرة بـ URL أصغر من نسخة Base64، رغم أن هذه الأداة تُصدر نسخة Base64 للاتساق.
أسقط صورة، انسخ data URI أو المقتطف الذي تحتاجه، والصقه في HTML أو CSS أو قالب البريد الإلكتروني. تبقى كل البايتات على جهازك. لا رفع، لا حساب، لا رحلة إلى خادم.