تبدیل عکس به Base64
تصویر را بدون آپلود در هیچ جایی، به رشته Base64 یا data URI آماده جای‌گذاری تبدیل کنید.
تبدیل آنلاین عکس به Base64
جاسازی تصویر به شکل Base64 باعث میشود تصویر درون متن جابه‌جا شود: در یک ایمیل HTML، یک فایل CSS، یک payload از نوع JSON یا یک صفحه HTML مستقل و خودکفا. مرورگر تصویر را مستقیم از رشته می‌خواند، پس نه فایل اضافه‌ای برای میزبانی لازم است و نه درخواست شبکه اضافه‌ای.
این صفحه کدگذار و رمزگشای Base64 را روی زبانه فایل و با پیشوند data URI روشن باز میکند. کدگذاری به‌طور کامل در مرورگر شما انجام میشود.
نتیجه را کجا جای‌گذاری کنیم
| محل | نمونه |
|---|---|
| تصویر در HTML | <img src="data:image/png;base64,iVBORw0…" alt="Logo"> |
| پس‌زمینه در CSS | background-image: url("data:image/svg+xml;base64,PHN2Zy…"); |
| فیلد JSON | {"avatar": "iVBORw0KGgo…"} (معمولاً بدون پیشوند) |
| Markdown |  در جایی که نمایش‌دهنده Markdown اجازه دهد |
چه وقت جاسازی تصویر فکر خوبی است
- آیکون‌ها و لوگوهای کوچک چندکیلوبایتی، که یک درخواست اضافه بیشتر از افزایش حجم هزینه دارد.
- ایمیل‌های HTML، که تصویرهای خارجی در آن‌ها اغلب به‌طور پیش‌فرض مسدود میشوند (پشتیبانی از data URI در برنامه‌های ایمیل متفاوت است، پس اول آزمایش کنید).
- فایل‌های مستقل مثل گزارش‌های خروجی یا دموهای آفلاین.
- APIهایی که تصویر را فقط به شکل Base64 درون JSON می‌پذیرند.
چه وقت نه
حجم عکس‌های بزرگ یک‌سوم بیشتر میشود و دیگر نمی‌توانند جدا از صفحه یا stylesheetی که آن‌ها را در خود دارد کش شوند؛ پس در هر بازدید صفحه دوباره دانلود میشوند. در وب‌سایت، برای هر چیزی بالاتر از حدود ۱۰ تا ۲۰ کیلوبایت، یک فایل تصویر معمولی، ترجیحاً تبدیل‌شده با تبدیل PNG به WebP یا تبدیل JPG به WebP، انتخاب سریع‌تری است.
SVG: شاید Base64 لازم نباشد
SVG خودش متن است. در CSS اغلب می‌توانید آن را به جای Base64 به شکل URL-encoded جاسازی کنید که کم‌حجم‌تر است؛ برای مثال url("data:image/svg+xml,%3Csvg …%3E"). کدگذار URL این کدگذاری را انجام می‌دهد.
برگرداندن Base64 به تصویر
برای بازیابی عکس از یک رشته، آن را در دیکد Base64 جای‌گذاری کنید: تصویرها پیش‌نمایش داده میشوند و با پسوند درست قابل دانلودند.