طريقة الاستخدام
- أفلت صورة PNG في منطقة الإفلات، أو انقر لاختيار واحدة، أو الصق لقطة شاشة من الحافظة.
- اترك «التحويل إلى» على «الصيغة الأصلية» لترميز بايتات PNG الأصلية، أو حدّد «أقصى عرض» لتصغير صورة كبيرة.
- قارن الحجم الأصلي بالحجم بعد الترميز المعروض للصورة.
- انسخ أو نزّل المخرجات بصيغة data URI أو Base64 الخام أو وسم img أو CSS أو Markdown.
PNG وBase64
PNG (Portable Network Graphics، ونوع MIME الخاص بها image/png) صيغة نقطية بلا فقدان تدعم قناة ألفا كاملة، ما يجعلها الخيار المعتاد للأيقونات والشعارات والمخططات ولقطات الشاشة. ويبدأ كل ملف PNG بالتوقيع نفسه المكوّن من 8 بايتات، لذا يبدأ كل data URI لصورة PNG بالطريقة نفسها: data:image/png;base64,iVBORw0KGgo....
لا يمسّ Base64 وحدات البكسل. ففك ترميز السلسلة يعيد ملفًا مطابقًا بايتًا ببايت، بالألوان نفسها والمناطق الشفافة نفسها.
استخدامات مناسبة لـ data URI بصيغة PNG
- أيقونات الواجهة والشعارات الصغيرة التي تحتاج إلى خلفية شفافة.
- لقطات الشاشة داخل تقارير HTML المكتفية بذاتها، أو تقارير الأخطاء، أو التوثيق المُصدَّر.
- المخططات ورموز QR التي تُنشأ على الخادم وتُعاد في استجابة JSON.
- الصور المنشأة باستخدام
canvas.toDataURL()، التي تُنتج افتراضيًا عناوين data URI بصيغة PNG.
أما الصور الفوتوغرافية فأمرها مختلف. إذ يخزّنها PNG بلا فقدان فتكبر الملفات كثيرًا، بينما يُنتج JPEG أو WebP سلسلة أقصر بكثير.
صغّر ملف PNG قبل الترميز
كل بايت تحذفه من ملف PNG يوفّر نحو 1.33 حرفًا من Base64. لذا مرّر الملف أولًا عبر أداة تحسين مثل oxipng أو zopflipng (بلا فقدان) أو pngquant (يقلّص لوحة الألوان). وتحقّق من أبعاد البكسل أيضًا: فالأيقونة المُصدَّرة بثلاثة أضعاف حجم عرضها يمكن عادةً تصغيرها باستخدام خيار «أقصى عرض».
التحويل إلى WebP يحافظ على الشفافية وغالبًا ما يكون أصغر بكثير. أما التحويل إلى JPEG فيزيل الشفافية، فتتحول المناطق الشفافة إلى لون مصمت. وإعادة الترميز إلى PNG في المتصفح لا تحسّن الضغط، لذا قد تكون النتيجة أكبر من ملف أصلي محسَّن جيدًا؛ فقارن الأحجام قبل النسخ.
استخدام المخرجات
<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Settings">
.icon-settings {
background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center / 24px 24px;
}
# سطر الأوامر: GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.pngالأسئلة الشائعة
هل يحافظ Base64 على شفافية PNG؟
نعم. يرمّز Base64 بايتات الملف دون تغيير، لذا تبقى قناة ألفا. ولا تضيع الشفافية إلا إذا حوّلت الصورة إلى JPEG.
لماذا تبدأ كل سلسلة Base64 لصورة PNG بـ iVBORw0KGgo؟
هذه الأحرف هي صيغة Base64 لتوقيع ملف PNG. فإذا بدأت سلسلة يُفترض أنها PNG بشكل مختلف، فهي إما بصيغة أخرى أو تالفة.
هل يمكنني لصق لقطة شاشة مباشرة؟
data:image/png.ما الحجم المناسب لصورة PNG أضمّنها بترميز Base64؟
القاعدة الشائعة هي بضعة كيلوبايتات، حتى 10 كيلوبايت تقريبًا. أما الصور الأكبر فالأفضل تقديمها كملفات منفصلة يستطيع المتصفح تخزينها مؤقتًا وتحميلها بالتوازي.