رشتههای تصویر کدگذاری شده با Base64 را بهطور آنی رمزگشایی و پیشنمایش کنید. از فرمتهای رایج مانند JPEG، PNG، GIF و سایر فرمتها پشتیبانی میکند و برای ورودیهای نامعتبر مدیریت خطا دارد.
تصویر را اینجا بکشید و رها کنید یا برای انتخاب کلیک کنید
فرمتهای پشتیبانی شده: JPG، PNG، GIF، SVG
مبدل تصویر Base64 ابزاری آنلاین و چندمنظوره است که به شما اجازه میدهد به راحتی تصاویر را به فرمت متن Base64 تبدیل کنید و رشتههای Base64 را به تصاویر قابل مشاهده بازگردانید. کدگذاری Base64 یک طرح کدگذاری باینری به متن است که دادههای باینری را در قالب رشتهای ASCII نمایش میدهد و این امکان را فراهم میکند که دادههای تصویر را به طور مستقیم در HTML، CSS، JavaScript، JSON و دیگر فرمتهای متنی که در آنها دادههای باینری نمیتوانند به طور مستقیم گنجانده شوند، جاسازی کنید.
این ابزار رایگان دو عملکرد اصلی ارائه میدهد:
چه شما یک توسعهدهنده وب باشید که تصاویر را در کد خود جاسازی میکند، با URIهای داده کار میکنید، یا دادههای تصویر را در APIها مدیریت میکنید، مبدل تصویر Base64 ما یک راهحل ساده و کارآمد با یک رابط کاربری تمیز و ویژگیهای مفیدی مانند گزینههای کپی و دانلود برای خروجی تبدیل شده شما ارائه میدهد.
کدگذاری Base64 دادههای باینری را به مجموعهای از 64 کاراکتر ASCII (A-Z، a-z، 0-9، + و /) تبدیل میکند و = برای پر کردن استفاده میشود. برای تصاویر در وب، دادههای Base64 معمولاً به عنوان یک URL دادهای با ساختار زیر فرمت میشوند:
1data:[<نوع رسانه>][;base64],<داده>
2
به عنوان مثال، یک تصویر PNG کدگذاری شده به Base64 ممکن است به شکل زیر باشد:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2
اجزای این فرمت عبارتند از:
data:
- طرح URLimage/png
- نوع MIME داده;base64
- روش کدگذاری,
- یک جداکننده بین هدر و دادههنگام تبدیل یک تصویر به Base64، مراحل زیر انجام میشود:
هنگام رمزگشایی یک رشته تصویر Base64، مراحل زیر انجام میشود:
اگر ورودی شامل یک پیشوند URL دادهای نباشد، رمزگشا سعی میکند آن را به عنوان داده خام 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 | فایلهای favicon | متغیر |
کدگذاری تصویر Base64 کاربردهای متعددی در توسعه وب و فراتر از آن دارد:
1 <!-- جاسازی یک تصویر Base64 به طور مستقیم در HTML -->
2 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="تصویر کدگذاری شده Base64">
3
قالبهای ایمیل: اطمینان حاصل میکند که تصاویر به درستی در مشتریان ایمیل که به طور پیشفرض تصاویر خارجی را مسدود میکنند، نمایش داده شوند.
برنامههای تکفایلی: ایجاد برنامههای HTML خودکفا که در آن تمام منابع در یک فایل واحد گنجانده شدهاند.
پاسخهای API: شامل دادههای تصویر به طور مستقیم در پاسخهای JSON بدون نیاز به نقاط انتهایی تصویر جداگانه.
URIهای دادهای در CSS: جاسازی آیکونها و تصاویر پسزمینه کوچک به طور مستقیم در فایلهای CSS.
1 .icon {
2 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
3 }
4
دستکاریهای Canvas: تسهیل ذخیرهسازی و انتقال دادههای تصویر Canvas.
برنامههای آفلاین: ذخیره تصاویر به عنوان رشتههای متنی در localStorage یا IndexedDB.
بازیابی تصاویر جاسازی شده: استخراج و ذخیره تصاویر از فایلهای HTML، CSS یا JS.
ادغام API: پردازش دادههای تصویری که در فرمت Base64 از APIها دریافت میشوند.
اشکالزدایی: تجسم دادههای تصویری 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 به طور درونخط معمولاً عملکرد و انعطافپذیری بهتری نسبت به Base64-encoded SVG ارائه میدهد.
WebP و فرمتهای تصویری مدرن: اینها فشردهسازی بهتری نسبت به JPEG/PNG کدگذاری شده به Base64 ارائه میدهند.
اسپرایتهای تصویری: ترکیب چندین تصویر کوچک به یک فایل واحد و استفاده از موقعیتیابی CSS.
CDNها (شبکههای تحویل محتوا): برای سایتهای تولیدی، ارائه تصاویر بهینهسازی شده از یک 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 // به عنوان URL دادهای (رشته 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 // مدیریت رشتههایی بدون پیشوند URL دادهای
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}
43
1import 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 # اگر پیشوند URL دادهای وجود داشته باشد، آن را حذف کنید
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")
26
1<?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?>
26
1import 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 // اگر پیشوند URL دادهای وجود داشته باشد، آن را حذف کنید
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}
40
1using 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 // اگر پیشوند URL دادهای وجود داشته باشد، آن را حذف کنید
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 | پشتیبانی URL دادهای | پشتیبانی API فایل |
---|---|---|---|
Chrome | کامل | کامل | کامل |
Firefox | کامل | کامل | کامل |
Safari | کامل | کامل | کامل |
Edge | کامل | کامل | کامل |
Opera | کامل | کامل | کامل |
IE 11 | جزئی | محدود (حداکثر طول URL) | جزئی |
این ابزار کاملاً پاسخگو است و در مرورگرهای موبایل کار میکند، با این ملاحظات:
حجم فایل بزرگ: اگر خروجی Base64 شما خیلی بزرگ است، در نظر بگیرید:
سازگاری فرمت: برخی از فرمتهای تصویر ممکن است در همه مرورگرها هنگام کدگذاری به Base64 پشتیبانی نشوند. به JPEG، PNG و SVG برای حداکثر سازگاری بچسبید.
تأثیر بر عملکرد: اگر عملکرد صفحه پس از جاسازی تصاویر Base64 کاهش یابد، در نظر بگیرید:
دادههای Base64 نامعتبر: اگر هنگام رمزگشایی با خطا مواجه شدید:
تصویر نمایش داده نمیشود: اگر تصویر رمزگشایی شده ظاهر نشود:
س: کدگذاری Base64 چیست و چرا برای تصاویر استفاده میشود؟
پاسخ: کدگذاری Base64 روشی برای تبدیل دادههای باینری به فرمت متن ASCII است. این برای تصاویر استفاده میشود تا آنها را به طور مستقیم در HTML، CSS یا JavaScript جاسازی کند بدون اینکه نیاز به درخواستهای HTTP جداگانه باشد، که میتواند عملکرد بارگذاری صفحه را برای تصاویر کوچک بهبود بخشد.
س: آیا محدودیت اندازه برای تصاویری که میتوانم تبدیل کنم وجود دارد؟
پاسخ: در حالی که ابزار ما میتواند بیشتر اندازههای منطقی تصویر را مدیریت کند، ما توصیه میکنیم تصاویر را زیر 5MB نگه دارید برای عملکرد بهینه. کدگذاری Base64 به طور تقریبی 33٪ اندازه داده را افزایش میدهد، بنابراین یک تصویر 5MB منجر به تقریباً 6.7MB متن 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 که نمایانگر دادههای تصویری واقعی هستند میتوانند به تصاویر قابل مشاهده رمزگشایی شوند. ابزار سعی خواهد کرد نوع تصویر را شناسایی کند، اما برای بهترین نتایج، از رشتههایی استفاده کنید که شامل پیشوند URL دادهای (مانند data:image/png;base64,
) هستند.
س: چه اتفاقی میافتد اگر سعی کنم داده Base64 نامعتبر را رمزگشایی کنم؟
پاسخ: ابزار یک پیام خطا را نمایش خواهد داد اگر رشته Base64 نامعتبر باشد یا نمایانگر دادههای تصویری نباشد.
س: آیا میتوانم تصویر را پس از رمزگشایی ویرایش کنم؟
پاسخ: ابزار ما بر روی تبدیل تمرکز دارد و شامل ویژگیهای ویرایش نیست. پس از دانلود تصویر رمزگشایی شده، میتوانید آن را با هر نرمافزار ویرایش تصویر ویرایش کنید.
ابزار مبدل تصویر Base64 ما تمام دادهها را مستقیماً در مرورگر شما پردازش میکند. این بدان معناست که:
بهینهسازی قبل از کدگذاری: تصاویر خود را قبل از تبدیل به Base64 فشرده و تغییر اندازه دهید تا اندازه کدگذاری شده را به حداقل برسانید.
استفاده از فرمتهای مناسب: نوع تصویر را بر اساس محتوا انتخاب کنید:
ملاحظات کش را در نظر بگیرید: به یاد داشته باشید که تصاویر کدگذاری شده به Base64 نمیتوانند به طور جداگانه توسط مرورگرها کش شوند، بر خلاف فایلهای تصویری خارجی.
تأثیر عملکرد را آزمایش کنید: زمانهای بارگذاری صفحه را قبل و بعد از پیادهسازی تصاویر Base64 اندازهگیری کنید تا اطمینان حاصل کنید که در واقع عملکرد را بهبود میبخشید.
از پیشوندهای URL دادهای استفاده کنید: همیشه پیشوند URL دادهای مناسب (مانند data:image/png;base64,
) را برای حداکثر سازگاری شامل کنید.
با تکنیکهای دیگر ترکیب کنید: در نظر بگیرید که از Base64 در کنار سایر تکنیکهای بهینهسازی مانند بارگذاری تنبل و تصاویر پاسخگو استفاده کنید.
کدگذاری Base64 ریشههای خود را در توسعه سیستمهای پست الکترونیکی در دهه 1970 دارد. این برای حل مشکل انتقال دادههای باینری از طریق سیستمهایی که برای پردازش فقط متن ASCII طراحی شده بودند، طراحی شده بود.
این طرح کدگذاری در سال 1987 با انتشار RFC 989 که استاندارد Privacy Enhanced Mail (PEM) را تعریف میکرد، رسمی شد. این بعداً در RFC 1421 و سایر استانداردهای مرتبط بهروزرسانی شد. اصطلاح "base64" خود از این واقعیت ناشی میشود که کدگذاری از 64 کاراکتر ASCII مختلف برای نمایش دادههای باینری استفاده میکند.
در زمینه توسعه وب، کدگذاری Base64 برای تصاویر با ظهور URLهای دادهای، که اولین بار در RFC 2397 در سال 1998 پیشنهاد شد، محبوبیت بیشتری پیدا کرد. این امکان را فراهم کرد که دادههای باینری به طور مستقیم در HTML، CSS و سایر اسناد وب گنجانده شوند.
استفاده از تصاویر کدگذاری شده Base64 در توسعه وب در اواسط دهه 2000 به طور گستردهای پذیرفته شد زیرا توسعهدهندگان به دنبال راههایی برای کاهش درخواستهای HTTP و بهبود زمان بارگذاری صفحه بودند. این تکنیک بهویژه در دوران رشد توسعه وب موبایل مورد استقبال قرار گرفت، جایی که کاهش درخواستها برای عملکرد در اتصالات موبایل کندتر حیاتی بود.
امروزه، کدگذاری Base64 همچنان یک ابزار مهم در توسعه وب باقی مانده است، اگرچه استفاده از آن به طور هدفمندتر شده است زیرا بهترین شیوهها تکامل یافتهاند. رویکردهای مدرن معمولاً از کدگذاری Base64 بهطور انتخابی برای تصاویر کوچک و حیاتی استفاده میکنند در حالی که از روشهای تحویل کارآمدتر مانند HTTP/2 برای داراییهای بزرگتر استفاده میکنند.
همین حالا مبدل تصویر Base64 ما را امتحان کنید تا به سرعت تصاویر خود را به Base64 تبدیل کنید یا رشتههای Base64 را به تصاویر قابل مشاهده بازگردانید. با رابط کاربری آسان ما، میتوانید نتایج را کپی کنید یا با یک کلیک دانلود کنید!
کشف ابزارهای بیشتری که ممکن است برای جریان کاری شما مفید باشند