> PNG | encode | data-uri <

ج: يحوّل المحتوى الثنائي لملف .png إلى سلسلة ASCII باستخدام أبجدية Base64 المُعرَّفة في RFC 4648. يمكن إدراج النص المُرمَّز مباشرةً في وسم HTML <img> أو في background-image الخاص بـ CSS أو في رسالة بريد إلكتروني أو في حمولة JSON لواجهة برمجة تطبيقات أو في أي وسيلة نقل نصية أخرى. تبقى بايتات PNG نفسها دون تغيير — تُرمَّز كل كتلة IHDR وIDAT وtRNS وIEND ويمكن استرجاعها بدقة.

ج: اسحب ملف PNG الخاص بك إلى منطقة الإفلات (أو انقر للتصفح). تقرأ الأداة الملف باستخدام FileReader.readAsDataURL()، الذي يُرجع بالفعل معرّف data:image/png;base64,… جاهزًا للاستخدام. اختر Data URI إذا كنت تريد لصقه مباشرةً في <img src="…">، أو حمولة Base64 فقط إذا كانت واجهة برمجة التطبيقات/قاعدة البيانات لديك تتوقع جزء Base64 الخام فقط دون البادئة data:image/png;base64,.

ج: لا. Base64 هو تحويل خالص من ثنائي إلى نص — يتم الحفاظ على كل بايت في ملف PNG الأصلي، بما في ذلك قناة ألفا واللوحة وملف تعريف الألوان (كتل iCCP/sRGB). عند فك ترميز السلسلة مرة أخرى، يكون الملف مطابقًا بتًا ببت للأصل. ستتطابق بصمة SHA-256 لملف PNG المفكوك مع الأصل. لهذا السبب يُعد Base64 الأداة الصحيحة لتضمين الأيقونات والشعارات ولقطات الشاشة حيث تكون دقة البكسل مهمة.

ج: يستخدم Base64 4 أحرف لكل 3 بايتات إدخال، لذا فإن السلسلة المُرمَّزة أكبر بنحو 33% من ملف PNG الأصلي. الحجم الدقيق هو 4 × ⌈n / 3⌉ حرفًا، حيث n هو حجم PNG بالبايت. يصبح ملف PNG بحجم 10 كيلوبايت نحو 13.6 كيلوبايت من نص Base64. وبما أن ضغط HTTP (gzip وBrotli) يتعامل مع نص Base64 بشكل جيد إلى حد ما، فإن العبء الإضافي عبر الشبكة عادةً ما يكون أقرب إلى 10–15% عمليًا.

ج: تبدأ كل سلسلة Base64 لملف PNG بـ iVBORw0KGgo. تلك البادئة هي توقيع PNG المكوّن من 8 بايتات 89 50 4E 47 0D 0A 1A 0A مُعاد ترميزه إلى Base64. لذا فإن iVBORw0KGgoAAAANSUhEUg... هو دائمًا ملف PNG، ورؤية تلك البادئة هي فحص بصري سريع للتأكد من سلامة بياناتك. عند تغليفه كمعرّف data URI يبدو هكذا:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==

ج: الصق معرّف data URI الكامل في السمة src لوسم <img>:
<img src="data:image/png;base64,iVBORw0KGgo…" alt="logo">
يفك المتصفح ترميز حمولة Base64 ويعرض ملف PNG تمامًا كما لو كان مُحمَّلًا من عنوان URL. لا يتم إجراء أي طلب HTTP إضافي، وهو ما يكون مفيدًا للأيقونات في المسار الحرج وتوقيعات البريد الإلكتروني والتطبيقات التي تعمل دون اتصال أولًا.

ج: ضع معرّف data URI داخل الدالة url():
.icon { background-image: url('data:image/png;base64,iVBORw0KGgo…'); }
لإعادة الاستخدام، خزّنه في خاصية CSS مخصصة:
:root { --logo: url('data:image/png;base64,iVBORw0KGgo…'); }
.brand { background: var(--logo); }
تلغي الخلفيات المضمّنة طلب HTTP واحدًا لكل أيقونة لكنها تضخّم ملف CSS الخاص بك، لذا استخدمها فقط للأيقونات الصغيرة (< 4 كيلوبايت).

ج:
JavaScript (المتصفح): const uri = await new Promise(r => { const f = new FileReader(); f.onload = () => r(f.result); f.readAsDataURL(pngFile); });
Node.js: fs.readFileSync('logo.png').toString('base64')
Python: import base64; base64.b64encode(open('logo.png','rb').read()).decode()
PHP: base64_encode(file_get_contents('logo.png'))
Go: base64.StdEncoding.EncodeToString(pngBytes)
Ruby: Base64.strict_encode64(File.read('logo.png'))

ج: استخدم معرّفات data URI لـ PNG بترميز Base64 عندما:
• تكون الصورة < 4 كيلوبايت (لتوفير رحلة ذهاب وإياب عبر HTTP)
• تحتاج إلى تضمينها داخل بريد إلكتروني بصيغة HTML (يحجب كثير من العملاء الصور البعيدة)
• ترسل تقريرًا أو لوحة معلومات HTML في ملف واحد
• تخزّن الصورة داخل حمولة JSON أو عمود في قاعدة بيانات
فضّل ملف .png خارجيًا عندما تكون الصورة كبيرة أو يُعاد استخدامها عبر صفحات كثيرة أو تحتاج إلى تخزين مؤقت منفصل عبر شبكة توصيل المحتوى (CDN).

ج: نعم. بما أن Base64 تحويل بتًا ببت، فإن كل وضع ألوان في PNG مدعوم بالتساوي:
• RGBA / truecolor + ألفا — لون 32 بت، شفافية كاملة
• اللوحة (PLTE) + tRNS — ملفات PNG ذات لوحة مفهرسة بشفافية 1 بت
• تدرّج رمادي + ألفا — تدرّج رمادي 8/16 بت مع ألفا
• ملفات PNG بألوان عميقة 16 بت — ملفات PNG بنمط HDR تُستخدم في التصوير الطبي والتصوّر العلمي
تمر كل هذه عبر رحلة Base64 ذهابًا وإيابًا بنظافة وتُعرض بشكل صحيح في المتصفحات التي تفهم PNG.

ج: لا. Base64 هو ترميز وليس تشفيرًا. يمكن لأي شخص يستطيع قراءة السلسلة فك ترميزها وإعادتها إلى ملف PNG الأصلي في أجزاء من الثانية. إذا كانت لقطة الشاشة تحتوي على كلمة مرور أو رمز API أو معلومات شخصية، فإن ترميزها كـ Base64 لا يحميها — استخدم طبقة تشفير حقيقية (AES-GCM أو age أو PGP) فوق مخرجات Base64، أو انقل الصورة عبر TLS إلى خادم يطبّق ضوابط الوصول.

ج: لا يوجد حد مصطنع. بما أن الترميز يعمل محليًا، فإن الحد هو ذاكرة متصفحك — عادةً 100 ميغابايت+ على سطح المكتب و40–60 ميغابايت على الهاتف المحمول. بالنسبة لملفات PNG الكبيرة جدًا (صور طبية أو فضائية عالية الدقة)، نقرأ الملف على شكل أجزاء ونستدعي btoa() على كل جزء حتى يبقى مسار التنفيذ الرئيسي مستجيبًا. إذا كانت صورتك أكبر من نحو 100 ميغابايت، ففكّر في بثها مباشرةً من مُرمِّز على جانب الخادم بدلًا من تحميلها في المتصفح.

ج: استخدم PNG → Base64 للشعارات وأيقونات واجهة المستخدم ولقطات الشاشة والمخططات وأي شيء يحتوي على شفافية أو حواف حادة (نص، رسوم بيانية). PNG بلا فقدان ويدعم ألفا. استخدم JPG → Base64 للصور الفوتوغرافية أو الصور ذات الألوان الكثيرة حيث يكون الضغط مع فقدان مقبولًا. عادةً ما تكون ملفات JPEG أصغر بـ 5–20 مرة من PNG للصور الفوتوغرافية، لذا تكون حمولة Base64 أقصر بكثير. كقاعدة عامة: إذا أتت الصورة من كاميرا أو احتوت على تدرجات فوتوغرافية، فاستخدم JPG؛ وإلا فاستخدم PNG.