اتبع هذا المثال العملي، ثم قم بتكييف نفس عناصر التحكم مع صورتك الخاصة. فتح محول الصورة إلى Base64.
اختر صورة ومعاينة هويتها
افتح محول الصورة إلى Base64. اختر صورة أو جرب عينة. يستخدم المثال favicon-orbit.png بأبعاد 512 × 512 بكسل، والذي يحتوي على 202,491 بايت. يعرض المحرر الصورة فوق الكود الخاص بها حتى تتمكن من التأكد من أنك اخترت الأصل المقصود.
PNG و JPG و WebP و GIF و BMP و AVIF مدعومة عندما يتمكن متصفحك من فك تشفيرها للمعاينة. الحد الأقصى لحجم الملف هو 25 ميجابايت، مع حدود 60 ميجابكسل و 16,000 بكسل لكل جانب. وسوم SVG غير مقبولة بواسطة محول الصور النقطية هذا.
تقرأ الأداة بايتات الملف الأصلي. ولا تستخدم المعاينة لإعادة بناء الصورة أو تغيير حجمها أو إعادة ضغطها. لذلك يتم الاحتفاظ بالبيانات الوصفية الموجودة ورسوم GIF المتحركة في البيانات المشفرة.
قبل التشفير، استخدم تغيير حجم الصورة (Resize Image) أو ضاغط الصور (Image Compressor) إذا كنت بحاجة إلى أصل أصغر. Base64 بحد ذاته لا يقلل من حجم الصورة.
اختر التمثيل الذي يتوقعه مشروعك
افتح الإعدادات (Settings) واختر صورة HTML تحت تنسيق الكود (Code format) لهذا المثال. النتيجة هي وسم img يحتوي على رابط بيانات Base64. سمة alt فارغة في البداية؛ اكتب نصاً بديلاً مفيداً عندما تنقل الصورة معلومات.
يبدأ رابط البيانات (Data URL) ببادئة مثل data:image/png;base64، متبوعاً بالبيانات المشفرة. يحتوي Plain Base64 على البيانات فقط. تقوم خلفية CSS بتغليف رابط البيانات في إعلان background-image. تخدم هذه التمثيلات وجهات مختلفة، لذا انسخ النموذج الذي يطلبه تطبيقك بدلاً من تغيير اسم الملف فقط.
يتم تحديث لوحة الكود فوراً بعد تغيير تنسيق الكود (Code format). تقوم أيقونة النسخ بنسخ التمثيل الحالي وتظهر تأكيد النسخ المشترك. عندما يتم حظر الوصول إلى الحافظة، يتم تحديد الكود للنسخ اليدوي.
وسم HTML img الكامل ليس هو نفسه رابط البيانات (data URL). استخدم قيمة src فقط عندما يطلب الحقل رابطاً.
المثال في هذا الدليل
جرب عينة: favicon-orbit.png، 512 × 512 بكسل، 202,491 بايت. اختر صورة HTML ضمن تنسيق الكود. حدد بدء وقم بتنزيل favicon-orbit-base64.txt.
- PNG الأصلي
- 512 × 512 بكسل · 202,491 بايت
- مخرجات نصية HTML
- 270,029 بايت
- الترميز
- بايتات أصلية؛ بدون إعادة ضغط
قم بتنزيل الكود وافهم حجمه
اختر Start، ثم Download. يحفظ المثال favicon-orbit-base64.txt الذي يحتوي على كود صورة HTML. حجمه 270,029 بايت أكبر من المصدر البالغ 202,491 بايت. يوضح مقارنة المقال بداية النص الذي تم تنزيله، والذي تم اختصاره للقراءة فقط.
يقوم Base64 عادةً بتحويل كل ثلاثة بايتات من المصدر إلى أربعة أحرف نصية، مما يضيف حوالي الثلث قبل الغلاف الصغير. يمكن أن يجعل تضمين أيقونة صغيرة المستند مكتفياً ذاتياً، لكن وضع سلاسل صور كبيرة داخل HTML أو CSS يؤدي أيضاً إلى تضخيم المستند ويمنع تخزين الصورة مؤقتاً كملف منفصل.
الترميز ليس تشفيراً. يمكن لأي شخص لديه سلسلة Base64 الكاملة استعادة الصورة الأصلية. تعامل مع الكود بنفس القدر من الحذر الذي تعامل به المصدر إذا كان يحتوي على معلومات خاصة.
المقتطف المختصر في هذا المقال توضيحي. استخدم TXT الذي تم تنزيله بالكامل أو انسخ الكود الكامل من الأداة.
أسئلة شائعة
هل سيؤدي الترميز إلى تقليل جودة الصورة؟
لا. يحافظ الترميز على البايتات الأصلية. ولا يقوم بتغيير حجم الصورة أو ضغطها أو إعادة رسمها.
لماذا سلسلة Base64 أكبر من الصورة؟
يمثل Base64 كل ثلاثة بايتات من المدخلات باستخدام أربعة أحرف نصية، لذا فهو يضيف عادةً حوالي الثلث قبل إضافة الغلاف أو البادئة.
هل يتم الحفاظ على رسوم GIF المتحركة؟
يحافظ الترميز على بايتات GIF الأصلية، بما في ذلك الرسوم المتحركة. قد تظهر المعاينة إطاراً ثابتاً بينما تحتفظ البيانات المشفرة بجميع الإطارات.
هل Base64 آمن للصور السرية؟
Base64 ليس تشفيراً. حافظ على خصوصية السلسلة إذا كانت الصورة الأساسية خاصة. يقوم المحول نفسه بمعالجة البيانات محلياً في متصفحك.
حوّل الصورة المناسبة إلى الكود المناسب.
جرب عينة أو استخدم ملفك الخاص، وراجع النتيجة قبل المشاركة.
