فك تشفير ومعاينة سلاسل الصور المشفرة بتنسيق Base64 على الفور. يدعم JPEG و PNG و GIF وغيرها من التنسيقات الشائعة مع معالجة الأخطاء للإدخالات غير الصالحة.
اسحب وأفلت صورة هنا، أو انقر للاختيار
يدعم JPG و PNG و GIF و SVG
محول الصور إلى Base64 هو أداة عبر الإنترنت متعددة الاستخدامات تتيح لك بسهولة تحويل الصور إلى تنسيق نصي Base64 وفك ترميز سلاسل Base64 مرة أخرى إلى صور قابلة للعرض. ترميز Base64 هو نظام ترميز ثنائي إلى نص يمثل البيانات الثنائية في تنسيق سلسلة ASCII، مما يجعل من الممكن تضمين بيانات الصورة مباشرة ضمن HTML وCSS وJavaScript وJSON وغيرها من التنسيقات النصية حيث لا يمكن تضمين البيانات الثنائية مباشرة.
تقدم هذه الأداة المجانية وظيفتين رئيسيتين:
سواء كنت مطور ويب يقوم بتضمين الصور في الشيفرة الخاصة بك، أو تعمل مع بيانات URI، أو تتعامل مع بيانات الصورة في واجهات برمجة التطبيقات، يوفر لك محول الصور إلى Base64 حلاً بسيطًا وفعالًا مع واجهة نظيفة وميزات مفيدة مثل خيارات النسخ والتنزيل للإخراج المحول الخاص بك.
يقوم ترميز Base64 بتحويل البيانات الثنائية إلى مجموعة من 64 حرف ASCII (A-Z، a-z، 0-9، +، و/)، مع استخدام = للتعبئة. بالنسبة للصور على الويب، يتم عادةً تنسيق بيانات Base64 كعنوان بيانات بالهيكل التالي:
1data:[<media type>][;base64],<data>
2على سبيل المثال، قد تبدو صورة PNG مشفرة بتنسيق Base64 كالتالي:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2مكونات هذا التنسيق هي:
data: - نظام URLimage/png - نوع MIME للبيانات;base64 - طريقة الترميز, - فاصل بين الرأس والبياناتعند تحويل صورة إلى Base64، تحدث الخطوات التالية:
عند فك ترميز سلسلة صورة بتنسيق Base64، تحدث الخطوات التالية:
إذا لم يتضمن الإدخال بادئة عنوان بيانات، يحاول المفكك اعتبارها بيانات Base64 خام ويستنتج نوع الصورة من رأس البيانات الثنائية المفككة أو الافتراضية إلى PNG.
يدعم محول الصور إلى Base64 جميع تنسيقات الصور الشائعة على الويب:
| التنسيق | نوع MIME | حالات الاستخدام الشائعة | كفاءة الحجم |
|---|---|---|---|
| JPEG | image/jpeg | الصور، الصور المعقدة ذات الألوان العديدة | ضغط جيد للصور |
| PNG | image/png | الصور التي تتطلب الشفافية، لقطات الشاشة، الرسوميات | أفضل للرسوميات ذات الألوان المحدودة |
| GIF | image/gif | الرسوم المتحركة البسيطة، الصور ذات الألوان المحدودة | جيد للرسوم المتحركة، ألوان محدودة |
| WebP | image/webp | تنسيق حديث مع ضغط أفضل من JPEG/PNG | ضغط ممتاز، دعم متزايد |
| SVG | image/svg+xml | الرسوميات المتجهة، الأيقونات القابلة للتغيير والرسوم التوضيحية | صغير جدًا للرسوميات المتجهة |
| BMP | image/bmp | تنسيق صورة غير مضغوط | ضعيف (أحجام ملفات كبيرة) |
| ICO | image/x-icon | ملفات الأيقونة | متنوع |
يمتلك تحويل الصور إلى Base64 العديد من التطبيقات في تطوير الويب وما بعده:
1 <!-- تضمين صورة مشفرة بتنسيق Base64 مباشرة في HTML -->
2 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="صورة مشفرة بتنسيق Base64">
3 قوالب البريد الإلكتروني: يضمن عرض الصور بشكل صحيح في عملاء البريد الإلكتروني الذين يحظرون الصور الخارجية بشكل افتراضي.
تطبيقات ملف واحد: ينشئ تطبيقات HTML ذات محتوى ذاتي حيث يتم تضمين جميع الموارد ضمن ملف واحد.
استجابات واجهة برمجة التطبيقات: يتضمن بيانات الصورة مباشرة في استجابات JSON دون الحاجة إلى نقاط نهاية صور منفصلة.
URI البيانات في CSS: يدمج أيقونات صغيرة وصور خلفية مباشرة في ملفات CSS.
1 .icon {
2 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
3 }
4 تلاعبات اللوحة: يسهل حفظ ونقل بيانات صورة اللوحة.
التطبيقات غير المتصلة بالإنترنت: يخزن الصور كسلاسل نصية في localStorage أو IndexedDB.
استرجاع الصور المضمنة: استخراج وحفظ الصور من ملفات HTML أو CSS أو JS.
دمج واجهة برمجة التطبيقات: معالجة بيانات الصور المستلمة بتنسيق Base64 من واجهات برمجة التطبيقات.
تصحيح الأخطاء: تصور بيانات الصورة بتنسيق Base64 للتحقق من محتواها وتنسيقها.
استخراج البيانات: استعادة الصور من قواعد البيانات أو الملفات النصية حيث تم تخزينها بتنسيق Base64.
تحويل بيانات الحافظة: معالجة بيانات الصورة بتنسيق Base64 المنسوخة من مصادر مختلفة.
بينما يوفر ترميز Base64 الراحة، فإنه يأتي مع مقايضات مهمة يجب أخذها في الاعتبار:
للحصول على أداء مثالي، يُوصى عادةً باستخدام ترميز Base64 فقط للصور الصغيرة (أقل من 10 كيلوبايت). عادةً ما تكون الصور الأكبر أفضل خدمة كملفات منفصلة يمكن تخزينها وتحسينها بشكل صحيح.
| حجم الصورة (الأصلي) | الحجم المشفر (تقريبًا) | التوصية |
|---|---|---|
| أقل من 5 كيلوبايت | أقل من 7 كيلوبايت | مرشح جيد لترميز Base64 |
| 5 كيلوبايت - 10 كيلوبايت | 7 كيلوبايت - 14 كيلوبايت | اعتبر Base64 للصور الحرجة |
| 10 كيلوبايت - 50 كيلوبايت | 14 كيلوبايت - 67 كيلوبايت | استخدم Base64 بشكل انتقائي، قيم تأثير الأداء |
| أكثر من 50 كيلوبايت | أكثر من 67 كيلوبايت | تجنب Base64، استخدم ملفات خارجية بدلاً من ذلك |
توجد عدة بدائل لترميز Base64 لحالات استخدام مختلفة:
تضمين SVG بشكل مباشر: بالنسبة للرسوميات المتجهة، غالبًا ما يوفر SVG المضمن أداءً ومرونة أفضل من SVG المشفر بتنسيق Base64.
WebP والتنسيقات الحديثة للصور: توفر هذه ضغطًا أفضل من JPEG/PNG المشفر بتنسيق Base64.
رسم الصور: دمج عدة صور صغيرة في ملف واحد واستخدام CSS للموضع.
CDNs (شبكات توصيل المحتوى): بالنسبة لمواقع الإنتاج، يعد تقديم الصور المحسنة من CDN غالبًا أكثر كفاءة.
ضغط البيانات: لنقل كميات كبيرة من البيانات الثنائية، تكون خوارزميات الضغط المتخصصة مثل gzip أو Brotli أكثر كفاءة من Base64.
HTTP/2 وHTTP/3: تقلل هذه البروتوكولات من أعباء الطلبات المتعددة، مما يجعل المراجع الخارجية للصور أكثر كفاءة.
إليك أمثلة على العمل مع الصور المشفرة بتنسيق Base64 في لغات برمجة مختلفة:
1// تحويل صورة إلى Base64
2function imageToBase64(imgElement) {
3 const canvas = document.createElement('canvas');
4 canvas.width = imgElement.width;
5 canvas.height = imgElement.height;
6
7 const ctx = canvas.getContext('2d');
8 ctx.drawImage(imgElement, 0, 0);
9
10 // الحصول على عنوان البيانات (سلسلة Base64)
11 return canvas.toDataURL('image/png');
12}
13
14// تحويل إدخال ملف إلى Base64
15function fileToBase64(fileInput, callback) {
16 const reader = new FileReader();
17 reader.onload = function(e) {
18 callback(e.target.result);
19 };
20 reader.readAsDataURL(fileInput.files[0]);
21}
22
23// عرض صورة Base64
24function displayBase64Image(base64String) {
25 const img = new Image();
26
27 // معالجة السلاسل بدون بادئة عنوان بيانات
28 if (!base64String.startsWith('data:')) {
29 base64String = `data:image/png;base64,${base64String}`;
30 }
31
32 img.src = base64String;
33 document.body.appendChild(img);
34}
35
36// تنزيل صورة Base64
37function downloadBase64Image(base64String, fileName = 'image.png') {
38 const link = document.createElement('a');
39 link.href = base64String;
40 link.download = fileName;
41 link.click();
42}
431import base64
2from PIL import Image
3from io import BytesIO
4
5# تحويل ملف صورة إلى Base64
6def image_to_base64(image_path):
7 with open(image_path, "rb") as image_file:
8 encoded_string = base64.b64encode(image_file.read())
9 return encoded_string.decode('utf-8')
10
11# تحويل Base64 إلى صورة وحفظها
12def base64_to_image(base64_string, output_path):
13 # إزالة بادئة عنوان البيانات إذا كانت موجودة
14 if ',' in base64_string:
15 base64_string = base64_string.split(',')[1]
16
17 image_data = base64.b64decode(base64_string)
18 image = Image.open(BytesIO(image_data))
19 image.save(output_path)
20
21# مثال على الاستخدام
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # طباعة بداية السلسلة
24
25base64_to_image(base64_str, "output.jpg")
261<?php
2// تحويل ملف صورة إلى Base64 في PHP
3function imageToBase64($path) {
4 $type = pathinfo($path, PATHINFO_EXTENSION);
5 $data = file_get_contents($path);
6 return 'data:image/' . $type . ';base64,' . base64_encode($data);
7}
8
9// تحويل Base64 إلى صورة وحفظها
10function base64ToImage($base64String, $outputPath) {
11 // استخراج البيانات الثنائية المشفرة بتنسيق Base64
12 $imageData = explode(',', $base64String);
13 $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14
15 // فك الترميز والحفظ
16 $data = base64_decode($imageData);
17 file_put_contents($outputPath, $data);
18}
19
20// مثال على الاستخدام
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // طباعة بداية السلسلة
23
24base64ToImage($base64Image, 'output.jpg');
25?>
261import java.io.File;
2import java.io.FileOutputStream;
3import java.io.IOException;
4import java.nio.file.Files;
5import java.util.Base64;
6
7public class Base64ImageUtil {
8
9 // تحويل ملف صورة إلى Base64
10 public static String imageToBase64(String imagePath) throws IOException {
11 File file = new File(imagePath);
12 byte[] fileContent = Files.readAllBytes(file.toPath());
13 String extension = imagePath.substring(imagePath.lastIndexOf(".") + 1);
14 String base64String = Base64.getEncoder().encodeToString(fileContent);
15
16 return "data:image/" + extension + ";base64," + base64String;
17 }
18
19 // تحويل Base64 إلى صورة وحفظها
20 public static void base64ToImage(String base64String, String outputPath) throws IOException {
21 // إزالة بادئة عنوان البيانات إذا كانت موجودة
22 if (base64String.contains(",")) {
23 base64String = base64String.split(",")[1];
24 }
25
26 byte[] decodedBytes = Base64.getDecoder().decode(base64String);
27
28 try (FileOutputStream fos = new FileOutputStream(outputPath)) {
29 fos.write(decodedBytes);
30 }
31 }
32
33 public static void main(String[] args) throws IOException {
34 String base64Image = imageToBase64("input.jpg");
35 System.out.println(base64Image.substring(0, 50) + "..."); // طباعة بداية السلسلة
36
37 base64ToImage(base64Image, "output.jpg");
38 }
39}
401using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7 // تحويل ملف صورة إلى Base64
8 public static string ImageToBase64(string imagePath)
9 {
10 byte[] imageBytes = File.ReadAllBytes(imagePath);
11 string base64String = Convert.ToBase64String(imageBytes);
12
13 string extension = Path.GetExtension(imagePath).TrimStart('.').ToLower();
14 return $"data:image/{extension};base64,{base64String}";
15 }
16
17 // تحويل Base64 إلى صورة وحفظها
18 public static void Base64ToImage(string base64String, string outputPath)
19 {
20 // إزالة بادئة عنوان البيانات إذا كانت موجودة
21 if (base64String.Contains(","))
22 {
23 base64String = base64String.Split(',')[1];
24 }
25
26 byte[] imageBytes = Convert.FromBase64String(base64String);
27 File.WriteAllBytes(outputPath, imageBytes);
28 }
29
30 static void Main()
31 {
32 string base64Image = ImageToBase64("input.jpg");
33 Console.WriteLine(base64Image.Substring(0, 50) + "..."); // طباعة بداية السلسلة
34
35 Base64ToImage(base64Image, "output.jpg");
36 }
37}
38تعمل أداة محول الصور إلى Base64 عبر جميع المتصفحات الحديثة، مع اعتبارات التوافق التالية:
| المتصفح | دعم Base64 | دعم عنوان البيانات | دعم واجهة برمجة التطبيقات للملفات |
|---|---|---|---|
| Chrome | كامل | كامل | كامل |
| Firefox | كامل | كامل | كامل |
| Safari | كامل | كامل | كامل |
| Edge | كامل | كامل | كامل |
| Opera | كامل | كامل | كامل |
| IE 11 | جزئي | محدود (حد أقصى لطول URL) | جزئي |
تعمل الأداة بشكل كامل على المتصفحات المحمولة، مع هذه الاعتبارات:
حجم الملف الكبير: إذا كان ناتج Base64 كبيرًا جدًا، اعتبر:
توافق التنسيق: قد لا تدعم بعض تنسيقات الصور في جميع المتصفحات عند ترميزها بتنسيق Base64. التزم بـ JPEG وPNG وSVG لتحقيق أقصى قدر من التوافق.
تأثير الأداء: إذا انخفض أداء الصفحة بعد تضمين صور Base64، اعتبر:
بيانات Base64 غير صالحة: إذا تلقيت أخطاء عند فك الترميز:
الصورة لا تظهر: إذا لم تظهر الصورة المفككة:
س: ما هو ترميز Base64 ولماذا يُستخدم للصور؟
ج: ترميز Base64 هو طريقة لتحويل البيانات الثنائية إلى تنسيق نص ASCII. يُستخدم للصور لتضمينها مباشرة في HTML وCSS وJavaScript دون الحاجة إلى طلبات HTTP منفصلة، مما يمكن أن يحسن أداء تحميل الصفحة للصور الصغيرة.
س: هل هناك حد لحجم الصور التي يمكنني تحويلها؟
ج: بينما يمكن لأداتنا التعامل مع معظم أحجام الصور المعقولة، نوصي بالحفاظ على الصور أقل من 5 ميغابايت لتحقيق أداء مثالي. يزيد ترميز Base64 من حجم البيانات بحوالي 33%، لذا ستنتج صورة بحجم 5 ميغابايت حوالي 6.7 ميغابايت من نص Base64.
س: هل يقوم ترميز Base64 بضغط الصور الخاصة بي؟
ج: لا، يزيد ترميز Base64 في الواقع من حجم البيانات بحوالي 33%. إنها طريقة تحويل، وليست خوارزمية ضغط. للحصول على ضغط، يجب عليك تحسين صورك قبل ترميزها.
س: ما هي تنسيقات الصور التي يمكنني تحويلها إلى Base64؟
ج: تدعم أداتنا جميع تنسيقات الصور الشائعة على الويب بما في ذلك JPEG وPNG وGIF وWebP وSVG وBMP وICO.
س: كيف يمكنني استخدام الإخراج بتنسيق Base64 في الشيفرة الخاصة بي؟
ج: يمكنك استخدام الإخراج بتنسيق Base64 مباشرة في علامات HTML <img>، أو خصائص background-image في CSS، أو كبيانات في JavaScript. بالنسبة لـ HTML، استخدم التنسيق: <img src="data:image/jpeg;base64,YOUR_BASE64_STRING">.
س: هل من الأفضل استخدام Base64 أو ملفات الصور العادية؟
ج: بالنسبة للصور الصغيرة (أقل من 10 كيلوبايت)، يمكن أن يقلل Base64 من طلبات HTTP ويحسن الأداء. بالنسبة للصور الأكبر، عادةً ما تكون الملفات العادية أفضل لأنها يمكن تخزينها في ذاكرة التخزين المؤقت بواسطة المتصفحات ولا تزيد من حجم ملف HTML/CSS.
س: هل يمكنني فك ترميز أي سلسلة Base64 إلى صورة؟
ج: فقط سلاسل Base64 التي تمثل بيانات صورة فعلية يمكن فك ترميزها إلى صور قابلة للعرض. ستقوم الأداة بمحاولة اكتشاف تنسيق الصورة، ولكن للحصول على أفضل النتائج، استخدم السلاسل التي تتضمن بادئة عنوان البيانات (مثل data:image/png;base64,).
س: ماذا يحدث إذا حاولت فك ترميز بيانات Base64 غير صالحة؟
ج: ستعرض الأداة رسالة خطأ إذا كانت سلسلة Base64 غير صالحة أو لا تمثل بيانات صورة.
س: هل يمكنني تعديل الصورة بعد فك ترميزها؟
ج: تركز أداتنا على التحويل ولا تتضمن ميزات التحرير. بعد تنزيل الصورة المفككة، يمكنك تعديلها باستخدام أي برنامج لتحرير الصور.
تقوم أداة محول الصور إلى Base64 بمعالجة جميع البيانات مباشرة في متصفحك. وهذا يعني:
تحسين قبل الترميز: قم بضغط وتغيير حجم صورك قبل تحويلها إلى Base64 لتقليل الحجم المشفر.
استخدام التنسيقات المناسبة: اختر تنسيق الصورة الصحيح بناءً على المحتوى:
اعتبار تأثيرات التخزين المؤقت: تذكر أن الصور المشفرة بتنسيق Base64 لا يمكن تخزينها في ذاكرة التخزين المؤقت بشكل منفصل بواسطة المتصفحات، على عكس ملفات الصور الخارجية.
اختبار تأثير الأداء: قياس أوقات تحميل الصفحة قبل وبعد تنفيذ صور Base64 للتأكد من أنك تحسن الأداء بالفعل.
استخدام بادئات عنوان البيانات: دائمًا ما تتضمن بادئة عنوان البيانات المناسبة (مثل data:image/png;base64,) لتحقيق أقصى قدر من التوافق.
دمج مع تقنيات أخرى: اعتبر استخدام Base64 جنبًا إلى جنب مع تقنيات تحسين أخرى مثل التحميل الكسول والصور المتجاوبة.
ترميز Base64 له جذوره في تطوير أنظمة البريد الإلكتروني في السبعينيات. تم تصميمه لحل مشكلة نقل البيانات الثنائية من خلال الأنظمة التي كانت مصممة للتعامل فقط مع نص ASCII.
تم توثيق نظام الترميز رسميًا في عام 1987 مع نشر RFC 989، والذي حدد معيار البريد الإلكتروني المحسن للخصوصية (PEM). تم تحديث هذا لاحقًا في RFC 1421 ومعايير أخرى ذات صلة. يأتي مصطلح "base64" نفسه من حقيقة أن الترميز يستخدم 64 حرف ASCII مختلف لتمثيل البيانات الثنائية.
في سياق تطوير الويب، اكتسب ترميز Base64 للصور شعبية مع ظهور عناوين البيانات، التي اقترحت لأول مرة في RFC 2397 في عام 1998. سمح ذلك للبيانات الثنائية بالتضمين مباشرة في مستندات HTML وCSS وغيرها من مستندات الويب.
أصبح استخدام صور مشفرة بتنسيق Base64 في تطوير الويب أكثر انتشارًا في منتصف العقد الأول من القرن الحادي والعشرين حيث سعى المطورون إلى طرق لتقليل طلبات HTTP وتحسين أوقات تحميل الصفحة. تم تبني التقنية بشكل خاص خلال ارتفاع تطوير الويب المحمول، حيث كان تقليل الطلبات أمرًا حاسمًا للأداء على الاتصالات المحمولة الأبطأ.
اليوم، لا يزال ترميز Base64 أداة مهمة في تطوير الويب، على الرغم من أن استخدامه أصبح أكثر استهدافًا مع تطور أفضل الممارسات. تميل الأساليب الحديثة إلى استخدام ترميز Base64 بشكل انتقائي للصور الصغيرة والحرجة بينما تستفيد من طرق التسليم الأكثر كفاءة مثل HTTP/2 للأصول الأكبر.
جرّب محول الصور إلى Base64 الآن لتحويل صورك بسرعة إلى Base64 أو فك ترميز سلاسل Base64 مرة أخرى إلى صور قابلة للعرض. مع واجهتنا سهلة الاستخدام، يمكنك نسخ النتائج أو تنزيلها بنقرة واحدة فقط!
اكتشف المزيد من الأدوات التي قد تكون مفيدة لسير عملك