مشفر الصور Base64

تشفير الصور إلى Data URI بصيغة Base64 لـ HTML وCSS

اسحب صورة هنا أو انقر للرفع

يدعم PNG وJPG وSVG وWebP وGIF وAVIF

جرب أيضاً:مشفّر Base64 عبر الإنترنت فك ترميز Base64 أونلاين فك تشفير الصور Base64 Base64 آمن للـ URL محوّل Base64 إلى Hex مُشفِّر الملفات Base64

ما هو تشفير الصور بـ Base64؟

يحوّل تشفير الصور بـ Base64 البيانات الثنائية للصورة إلى سلسلة ASCII يمكن تضمينها مباشرةً في HTML أو CSS أو JSON دون الحاجة إلى مرجع لملف خارجي. والناتج هو data URI — سلسلة مكتفية بذاتها تبدأ بـ data:image/png;base64, متبوعةً بالبايتات المُشفَّرة بـ Base64. تتعامل المتصفحات مع data URIs تمامًا كعناوين URL للصور الخارجية: تفكّ تشفير الحمولة وتعرض الصورة مضمَّنةً.

تستند هذه التقنية إلى RFC 2397 (مخطط data URI) وRFC 4648 (تشفير Base64). عند تشفير الصورة بـ Base64، يتحوّل كل 3 بايت من البيانات الثنائية إلى 4 أحرف ASCII، مما يزيد حجم الحمولة بنحو 33%. وعلى الرغم من هذه التكلفة الإضافية، تُلغي الصور المضمَّنة طلب HTTP لكل مورد — وهو تحسين ملموس عندما تكون الصور صغيرة (أيقونات، شعارات، بكسلات تتبع 1x1) وتتجاوز زمن الاستجابة لطلب منفصل تكلفة البايتات الإضافية.

تدعم data URIs جميع المتصفحات الحديثة وعملاء البريد الإلكتروني (مع بعض التحفظات) وأي سياق يقبل صيغة URI القياسية. وتُستخدم على نطاق واسع في تطبيقات الصفحة الواحدة وقوالب HTML للبريد الإلكتروني وإطارات SVG وتعريفات CSS للخلفية، حيث يُحسِّن تقليل إجمالي طلبات الشبكة وقت التحميل المُدرَك.

لماذا تستخدم هذا المشفر؟

تحوّل هذه الأداة أي صورة إلى data URI جاهز للاستخدام مباشرةً في متصفحك — دون رفع أو خادم أو حساب.

⚡

تحويل فوري

اسحب صورة أو اختر ملفًا، وسيظهر data URI الكامل فورًا. لا انتظار لمعالجة الخادم — تُعالج واجهة FileReader API كل شيء محليًا.

🔒

معالجة تُعطي الأولوية للخصوصية

لا تغادر صورك جهازك أبدًا. يعمل التشفير بالكامل في المتصفح باستخدام الطريقة الأصلية FileReader.readAsDataURL(). لا تُرسَل أي بيانات إلى أي خادم.

🌐

دعم جميع الصيغ الرئيسية

يقبل PNG وJPEG وSVG وWebP وGIF وICO وBMP وأي صيغة صور أخرى يدعمها متصفحك. يُكتشف نوع MIME تلقائيًا من الملف.

📦

مخرجات جاهزة للنسخ

المخرج سلسلة data URI كاملة — الصقها مباشرةً في خاصية src لعنصر img في HTML، أو تعريف url() في CSS، أو حمولة JSON دون أي تنسيق يدوي.

حالات استخدام تشفير الصور بـ Base64

تطوير الواجهات الأمامية

ضمِّن الأيقونات الصغيرة والعناصر المرئية مباشرةً في HTML أو CSS للتخلص من طلبات HTTP. يُقلل هذا من زمن انتظار التحميل للصور المرئية الحيوية، مما يُحسِّن درجات Largest Contentful Paint (LCP).

قوالب HTML للبريد الإلكتروني

تحجب كثير من عملاء البريد الصور الخارجية افتراضيًا. تُعرض صور Base64 المضمَّنة فورًا دون أن يحتاج المستلم إلى النقر على "تحميل الصور"، مما يُحسِّن معدلات الفتح والتناسق البصري.

تطبيقات الصفحة الواحدة

احزم الأصول الصغيرة كـ data URIs في JavaScript أو CSS لتقليل إجمالي طلبات الشبكة. يدعم كل من Webpack وVite التضمين التلقائي بـ Base64 للأصول التي تقل عن حد حجم قابل للضبط.

حمولات API و JSON

شفِّر صور المستخدمين والتوقيعات والصور المصغرة كسلاسل Base64 لتضمينها مباشرةً في استجابات JSON API. يُلغي هذا الحاجة إلى نقطة نهاية منفصلة لاستضافة الملفات للصور الصغيرة.

التوثيق و Markdown

ضمِّن المخططات أو لقطات الشاشة كـ data URIs في ملفات Markdown أو وثائق README. تنتقل الصور مع المستند وتُعرض بشكل صحيح دون استضافة خارجية.

الاختبار والنماذج الأولية

استخدم data URIs لـ Base64 كصور مؤقتة في بيانات الاختبار وقصص Storybook أو ملفات HTML النموذجية. لا حاجة لإعداد خادم ملفات ثابتة أو إدارة أصول الصور في مراحل التطوير المبكرة.

بنية Data URI

يُشفِّر data URI صيغة الصورة ومحتواها الثنائي في سلسلة واحدة. يُساعد فهم بنيته عند إنشاء data URIs أو تحليلها برمجيًا:

المكوّن	الوصف
data:	URI scheme identifier
image/png	MIME type of the image
;base64,	Encoding declaration
iVBORw0KGgo...	Base64-encoded binary data

مقارنة صيغ الصور لتشفير Base64

يؤثر اختيار صيغة الصورة على حجم مخرجات Base64 ودعم المتصفح وخصائص العرض. استخدم الصيغة الأنسب لنوع المحتوى:

الصيغة	نوع MIME	الشفافية	الأنسب لـ
PNG	image/png	Yes	Screenshots, icons, UI elements
JPEG	image/jpeg	No	Photos, gradients, large images
SVG	image/svg+xml	Yes	Logos, icons, scalable graphics
WebP	image/webp	Yes	Modern web images, smaller files
GIF	image/gif	Yes (1-bit)	Simple animations, small icons
ICO	image/x-icon	Yes	Favicons

أمثلة على الكود

كيفية تحويل الصور إلى data URIs بـ Base64 في اللغات والبيئات الشائعة:

JavaScript (browser)

// Convert a File object to a Base64 data URI
function fileToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(file)
    // reader.result → "data:image/png;base64,iVBORw0KGgo..."
  })
}

// Convert a canvas element to a data URI
const dataUri = canvas.toDataURL('image/png')
// → "data:image/png;base64,iVBORw0KGgo..."

// Convert with quality parameter (JPEG/WebP only)
const jpegUri = canvas.toDataURL('image/jpeg', 0.8)
// → "data:image/jpeg;base64,/9j/4AAQ..."

Python

import base64

# Read an image file and encode it to a data URI
with open('logo.png', 'rb') as f:
    encoded = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:image/png;base64,{encoded}'
# → "data:image/png;base64,iVBORw0KGgo..."

# Detect MIME type automatically
import mimetypes
mime, _ = mimetypes.guess_type('photo.jpg')
# mime → "image/jpeg"

with open('photo.jpg', 'rb') as f:
    b64 = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:{mime};base64,{b64}'

Node.js

import { readFileSync } from 'fs'
import { lookup } from 'mime-types'

// Read file and encode to data URI
const buffer = readFileSync('icon.png')
const base64 = buffer.toString('base64')
const mime = lookup('icon.png') // → "image/png"

const dataUri = `data:${mime};base64,${base64}`
// → "data:image/png;base64,iVBORw0KGgo..."

// From a Buffer received via HTTP/API
function bufferToDataUri(buf, mimeType) {
  return `data:${mimeType};base64,${buf.toString('base64')}`
}

CLI (bash)

# Encode an image to Base64 (macOS)
base64 -i logo.png | tr -d '\n'

# Encode an image to a full data URI (Linux)
echo -n "data:image/png;base64,$(base64 -w 0 logo.png)"

# Encode and copy to clipboard (macOS)
echo -n "data:image/png;base64,$(base64 -i logo.png | tr -d '\n')" | pbcopy

# Detect MIME type and encode (Linux, requires file command)
MIME=$(file -b --mime-type image.webp)
echo -n "data:$MIME;base64,$(base64 -w 0 image.webp)"

الأسئلة الشائعة

ما الحد الأقصى لحجم الصورة عند تشفير Base64؟

لا يوجد حد صارم في مواصفات Base64 نفسها. يتفاوت دعم المتصفحات لـ data URIs: تتعامل معظم المتصفحات الحديثة مع data URIs يصل حجمها إلى عدة ميغابايت. غير أن تشفير Base64 يزيد الحجم بنسبة 33%، فصورة حجمها 1 ميغابايت تصبح نحو 1.33 ميغابايت من النص. للصور التي تتجاوز 10-20 كيلوبايت، يكون تقديمها كملفات منفصلة مع التخزين المؤقت المناسب أكثر كفاءة.

هل يُقلل تشفير Base64 من جودة الصورة؟

لا. Base64 تشفير بلا فقدان بيانات — يحوّل البيانات الثنائية إلى نص دون تغيير المحتوى. البيانات المفكوكة مطابقة للملف الأصلي بايت بايت. أي فقدان للجودة يأتي من صيغة الصورة نفسها (مثل ضغط JPEG)، وليس من تشفير Base64.

لماذا يكون حجم مخرجات Base64 أكبر من الصورة الأصلية؟

يمثّل Base64 كل 3 بايت من البيانات الثنائية بـ 4 أحرف ASCII، مما ينتج عنه زيادة في الحجم بنسبة 33%. يضيف data URI أيضًا بادئة (مثل data:image/png;base64,) تبلغ نحو 25-30 حرفًا. للصور الصغيرة (أقل من 2-5 كيلوبايت)، تُعوَّض هذه التكلفة بإلغاء طلب HTTP. للصور الأكبر، تُعد الملفات الخارجية أكثر كفاءة.

هل يمكنني استخدام صور Base64 في خاصية CSS background-image؟

نعم. استخدم data URI كقيمة لدالة url()‎: background-image: url('data:image/png;base64,...'). يعمل هذا في جميع المتصفحات الحديثة. والأكثر فعاليةً استخدامه للأنماط الخلفية أو الأيقونات الصغيرة المستخدمة بكثرة حيث يستحق تجنب طلب HTTP حجم ملف CSS الأكبر قليلًا.

هل تشفير الصور بـ Base64 آمن للصور الحساسة؟

Base64 هو تشفير وليس تعمية. يمكن لأي شخص يرى data URI أن يفكّه ويستعيد الصورة الأصلية. لا تعتمد على Base64 لحماية الصور السرية. تُعالج هذه الأداة الصور كليًا في متصفحك — ولا تُرسَل أي بيانات إلى أي خادم — لكن data URI الناتج نص عادي يمكن لأي شخص لديه إمكانية الوصول إلى مصدر HTML أو CSS قراءته.

كيف أحوّل data URI بصيغة Base64 إلى ملف صورة؟

في JavaScript، استخدم fetch()‎ مع data URI واستدعِ blob()‎ على الاستجابة، ثم أنشئ رابط تنزيل. في Python، قسّم السلسلة عند الفاصلة، وفكّ تشفير جزء Base64 باستخدام base64.b64decode()‎، واكتب البايتات إلى ملف. يمكنك أيضًا استخدام أداة Base64 Image Decoder على هذا الموقع.

هل يجب تشفير جميع الصور على موقعي بـ Base64؟

لا. التضمين بـ Base64 مفيد للصور الصغيرة (أيقونات، شعارات، بكسلات 1x1) حيث تتجاوز تكلفة طلب HTTP غرامة الحجم البالغة 33%. للصور الأكبر، استخدم ملفات منفصلة مع ترويسات تخزين مؤقت مناسبة — يمكن للمتصفح تخزينها بشكل مستقل وتحميلها بالتوازي. يُعد 2-8 كيلوبايت حدًا شائعًا: الصور دون هذا الحجم تستفيد من التضمين، أما الأكبر فيُفضَّل تقديمها كملفات خارجية.