رمزگذاری Base64 تصویر، دادههای باینری یک تصویر را به یک رشته ASCII تبدیل میکند که میتوان آن را مستقیماً در HTML، CSS یا JSON جاسازی کرد بدون اینکه به فایل خارجی ارجاع داده شود. نتیجه یک data URI است — یک رشته خودکفا که با data:image/png;base64, شروع میشود و بایتهای رمزگذاریشده Base64 تصویر را دنبال میکند. مرورگرها data URI را دقیقاً مانند آدرسهای تصویر خارجی پردازش میکنند: داده Base64 را رمزگشایی کرده و تصویر را بهصورت درونخطی نمایش میدهند.
این فناوری در RFC 2397 (طرح data URI) و RFC 4648 (رمزگذاری Base64) تعریف شده است. هنگامی که یک تصویر با Base64 رمزگذاری میشود، هر ۳ بایت از دادههای پیکسل باینری به ۴ کاراکتر ASCII تبدیل میشوند و حجم داده را حدود ۳۳٪ افزایش میدهند. با وجود این سربار، تصاویر درونخطی یک درخواست HTTP برای هر فایل را حذف میکنند — بهینهسازی معناداری هنگامی که تصاویر کوچک هستند (آیکونها، لوگوها، پیکسلهای ردیابی ۱×۱) و تأخیر رفتوبرگشت یک درخواست جداگانه از هزینه بایتهای اضافه بیشتر باشد.
Data URI در تمام مرورگرهای مدرن، کلاینتهای ایمیل (با محدودیتهایی)، و هر بستری که از نحو استاندارد URI پشتیبانی میکند قابل استفاده است. این فناوری بهطور گسترده در برنامههای تکصفحهای، قالبهای HTML ایمیل، اسپرایتهای SVG، و تعریفهای CSS background-image استفاده میشود تا با کاهش تعداد کل درخواستهای شبکه، زمان بارگذاری احساسشده بهبود یابد.
چرا از این رمزگذار Base64 تصویر استفاده کنید؟
این ابزار هر تصویری را مستقیماً در مرورگرتان به یک data URI آماده استفاده تبدیل میکند — بدون آپلود، بدون سرور، بدون نیاز به حساب کاربری.
⚡
تبدیل فوری
یک تصویر را بکشید و رها کنید یا فایلی انتخاب کنید و data URI کامل فوراً نمایش داده میشود. نیازی به انتظار برای پردازش سرور نیست — FileReader API همه چیز را در خود مرورگر مدیریت میکند.
🔒
پردازش با اولویت حریم خصوصی
تصاویر شما هرگز دستگاهتان را ترک نمیکنند. رمزگذاری کاملاً در مرورگر با استفاده از متد بومی FileReader.readAsDataURL() اجرا میشود. هیچ دادهای به هیچ سروری ارسال نمیشود.
🌐
پشتیبانی از تمام فرمتهای اصلی
PNG، JPEG، SVG، WebP، GIF، ICO، BMP و هر فرمت تصویری که مرورگرتان پشتیبانی میکند را میپذیرد. نوع MIME بهطور خودکار از روی فایل تشخیص داده میشود.
📦
خروجی آماده کپی
خروجی یک رشته data URI کامل است — آن را مستقیماً در یک HTML img src، یک تعریف CSS url()، یا یک داده JSON بدون هیچ قالببندی دستی بچسبانید.
موارد استفاده از رمزگذاری Base64 تصویر
توسعه فرانتاند
آیکونهای کوچک و داراییهای رابط کاربری را مستقیماً در HTML یا CSS جاسازی کنید تا درخواستهای HTTP حذف شوند. این کار تأخیر آبشاری را برای تصاویر حیاتی بالای صفحه کاهش میدهد و امتیاز LCP را بهبود میبخشد.
قالبهای HTML ایمیل
بسیاری از کلاینتهای ایمیل بهطور پیشفرض تصاویر خارجی را مسدود میکنند. تصاویر Base64 درونخطی بدون اینکه گیرنده روی «بارگذاری تصاویر» کلیک کند، فوراً نمایش داده میشوند و نرخ بازشدن و یکپارچگی بصری را بهبود میبخشند.
برنامههای تکصفحهای
داراییهای کوچک را بهعنوان data URI در JavaScript یا CSS خود بستهبندی کنید تا تعداد کل درخواستهای شبکه کاهش یابد. Webpack و Vite هر دو از جاسازی خودکار Base64 برای فایلهایی که زیر حد اندازه تنظیمشده هستند پشتیبانی میکنند.
دادههای API و JSON
آواتارها، امضاها یا تصاویر کوچک کاربران را بهعنوان رشتههای Base64 رمزگذاری کنید تا مستقیماً در پاسخهای JSON API گنجانده شوند. این کار نیاز به یک endpoint جداگانه برای میزبانی فایلهای تصویری کوچک را از بین میبرد.
مستندات و Markdown
نمودارها یا اسکرینشاتها را بهعنوان data URI در فایلهای Markdown یا مستندات README جاسازی کنید. تصاویر همراه با سند منتقل میشوند و بدون نیاز به میزبانی خارجی بهدرستی نمایش داده میشوند.
آزمایش و نمونهسازی
از Base64 data URI بهعنوان تصاویر جایگزین در فیکسچرهای آزمایشی، داستانهای Storybook، یا فایلهای HTML نمونه استفاده کنید. در مراحل اولیه توسعه نیازی به راهاندازی سرور فایل استاتیک یا مدیریت داراییهای تصویری نیست.
ساختار Data URI
یک data URI فرمت تصویر و محتوای باینری را در یک رشته واحد رمزگذاری میکند. درک ساختار آن در ساخت یا تجزیه data URI در کد کمک میکند:
بخش
توضیح
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
نمونه کدها
نحوه تبدیل تصاویر به Base64 data URI در زبانها و محیطهای محبوب:
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 URI متفاوت است: اکثر مرورگرهای مدرن data URI تا چند مگابایت را مدیریت میکنند. اما رمزگذاری Base64 حجم را ۳۳٪ افزایش میدهد، بنابراین یک تصویر ۱ مگابایتی تقریباً ۱.۳۳ مگابایت متن میشود. برای تصاویر بزرگتر از ۱۰ تا ۲۰ کیلوبایت، ارائه آنها بهعنوان فایلهای جداگانه با کش مناسب کارآمدتر است.
آیا رمزگذاری Base64 کیفیت تصویر را کاهش میدهد؟
خیر. Base64 یک رمزگذاری بدون اتلاف است — دادههای باینری را بدون تغییر محتوا به متن تبدیل میکند. داده رمزگشاییشده بایت به بایت با فایل اصلی یکسان است. هر گونه کاهش کیفیت از خود فرمت تصویر (مثلاً فشردهسازی JPEG) ناشی میشود، نه از رمزگذاری Base64.
چرا خروجی رمزگذاریشده Base64 از تصویر اصلی بزرگتر است؟
Base64 سه بایت از دادههای باینری را با ۴ کاراکتر ASCII نمایش میدهد که منجر به افزایش حجم ۳۳٪ میشود. یک data URI همچنین یک پیشوند (مثلاً data:image/png;base64,) با حدود ۲۵ تا ۳۰ کاراکتر اضافه میکند. برای تصاویر کوچک (زیر ۲ تا ۵ کیلوبایت)، این سربار با حذف یک درخواست 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 شما میتواند آن را بخواند.
چگونه یک Base64 data URI را به فایل تصویر بازمیگردانم؟
در JavaScript، از fetch() با data URI استفاده کنید و blob() را روی پاسخ فراخوانی کنید، سپس یک لینک دانلود ایجاد کنید. در Python، رشته را از کاما جدا کنید، بخش Base64 را با base64.b64decode() رمزگشایی کنید و بایتها را در یک فایل بنویسید. همچنین میتوانید از ابزار رمزگشای Base64 تصویر در همین سایت استفاده کنید.
آیا باید همه تصاویر وبسایتم را با Base64 رمزگذاری کنم؟
خیر. جاسازی Base64 برای تصاویر کوچک (آیکونها، لوگوها، پیکسلهای ۱×۱) که سربار درخواست HTTP از جریمه حجم ۳۳٪ بیشتر است مفید است. برای تصاویر بزرگتر، از فایلهای جداگانه با هدرهای کش مناسب استفاده کنید — مرورگر میتواند آنها را بهطور مستقل ذخیره کرده و بهصورت موازی بارگذاری کند. آستانه رایج ۲ تا ۸ کیلوبایت است: تصاویر زیر این اندازه از جاسازی بهرهمند میشوند، در حالی که تصاویر بزرگتر باید بهعنوان فایلهای خارجی ارائه شوند.