UltKit

تبدیل عکس به Base64

فایل عکس را به یک خط متن تبدیل کنید که می‌توانید آن را در HTML، CSS، درخواست JSON یا فایل Markdown بچسبانید؛ پیشوند data URI از قبل در ابتدای آن قرار دارد تا بلافاصله پس از چسباندن کار کند.

مبدل داده

یا فایل‌های CSV, TSV, TXT … را اینجا رها کنید ·

حداکثر 95 MB برای هر فایل· تا 20 فایل· حذف پس از 30 دقیقه

خروجی

فایل‌ها روی سرورهای ما پردازش می‌شوند و پس از 30 دقیقه حذف می‌شوند.

نحوه استفاده از این ابزار

  1. 1

    عکس‌ها را اضافه کنید

    فایل‌های PNG، JPG، GIF، WebP یا SVG را در ناحیهٔ بارگذاری رها کنید؛ حداکثر 20 فایل در هر نوبت و هر کدام تا 95 MB.

  2. 2

    پیشوند را نگه دارید یا حذف کنید

    گزینهٔ پیشوند Data URI روشن است، بنابراین خروجی با data:image/png;base64, یا نوع متناسب با آن شروع می‌شود. اگر API فقط رشتهٔ خام Base64 می‌خواهد، آن را در تنظیمات پیشرفته خاموش کنید.

  3. 3

    تبدیل و کپی کنید

    روی تبدیل به Base64 text ← بزنید و برای هر تصویر یک فایل txt. دانلود کنید تا آمادهٔ چسباندن در کدتان باشد.

تصویر را بارگذاری کنید و روی تبدیل به Base64 text ← بزنید. فایل به‌صورت نویسه‌های ساده و با شروع data:image/…;base64, کدگذاری می‌شود و می‌توانید آن را مستقیم در src تگ img یا url() در CSS بگذارید. هیچ چیزی در خود تصویر تغییر نمی‌کند.

عکس Base64 کجا به کار می‌آید

Base64 در RFC 4648 (سال 2006) تعریف شده و هر 3 بایت داده‌ٔ دودویی را به 4 نویسه از الفبای 64نویسه‌ای A–Z، a–z، 0–9، + و / نگاشت می‌کند. خروجی در هر کانالی که برای متن ساخته شده سالم می‌ماند. طرح data URI که لری ماسینتر آن را در سال 1998 با نام RFC 2397 ثبت کرد، به مرورگر اجازه می‌دهد آن متن را مثل یک فایل بشناسد.

توسعه‌دهندگان فرانت‌اند آیکون‌های کوچک، چرخانک‌های بارگذاری و تصاویر جایگزین را درون‌خطی می‌کنند تا صفحه بدون درخواست اضافه نمایش داده شود. توسعه‌دهندگان بک‌اند تصویر را داخل JSON می‌فرستند، چون بسیاری از APIها، از جمله سرویس‌های بینایی و OCR، تصویر را به‌صورت فیلد Base64 می‌پذیرند. آزمایشگران دادهٔ تست را در کد نگه می‌دارند و کسانی که گزارش HTML تک‌فایلی یا یادداشت Markdown می‌سازند، تصاویر صفحه را جاسازی می‌کنند تا هنگام ایمیل یا بایگانی، فایل مستقل بماند.

خروجی Base64 چه شکلی است

یک PNG شفاف 1 × 1 (68 بایت) به‌صورت data URI داخل تگ img
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAXpeqz8AAAAASUVORK5CYII=" width="1" height="1" alt="تصویر نمونه">

فایل آیکون PNG

24 KB

مجموعه آیکون معمول نوار ابزار، 96 × 96 px

+33% حجم، بدون تغییر کیفیت

متن Base64

32 KB

4 نویسه برای هر 3 بایت، به‌اضافهٔ پیشوند

ANY I

هر تصویر

این ابزار قالب‌های رایج تصویر از جمله JPG، PNG، WebP، HEIC، GIF، BMP و TIFF را می‌پذیرد. قالب به‌طور خودکار از روی فایل تشخیص داده می‌شود، پس لازم نیست بدانید تصویرتان چه نوعی است.

مبدل Any image

BASE64

متن کدگذاری‌شده Base64

Base64 یک کدگذاری است که در RFC 4648 تعریف شده و هر داده دودویی را به رشته‌ای از 64 نویسه متنی امن تبدیل می‌کند. برای جاسازی تصویر در HTML و CSS به‌صورت data URI، پیوست کردن فایل به ایمیل و ارسال داده دودویی در JSON یا XML استفاده می‌شود. کدگذاری کاملاً برگشت‌پذیر است اما حجم داده را حدود 33% بیشتر می‌کند. Base64 رمزگذاری نیست و امنیتی ندارد؛ هر کسی می‌تواند آن را رمزگشایی کند.

فشرده‌سازی
بدون اتلاف
شفافیت
–
انیمیشن
–
سال معرفی
–
مبدل BASE64

تصاویر وقتی به متن Base64 تبدیل می‌شوند که باید درون چیزی جابه‌جا شوند که فقط متن حمل می‌کند: فایل HTML یا CSS بدون درخواست جداگانه، فیلد JSON در یک فراخوانی API، دادهٔ آزمایشی تست، یا گزارش تک‌فایلی.

درج مستقیم عکس در صفحه چه زمانی مفید است و چه زمانی مضر

درون‌خطی کردن یک درخواست را صرفه‌جویی می‌کند؛ این در HTTP/1.1 که مرورگرها فقط چند اتصال به هر سایت باز می‌کردند اهمیت بیشتری داشت. با چندگانه‌سازی HTTP/2 و HTTP/3، درخواست‌های کوچک اضافه ارزان‌اند، پس مزیت کم می‌شود اما هزینه‌ها می‌مانند: تصویر کدشده جداگانه کش نمی‌شود، با هر تغییر HTML یا CSS دوباره دانلود می‌شود و تجزیهٔ فایلی را که در آن قرار دارد به تأخیر می‌اندازد.

قاعدهٔ معقول این است که فقط تصاویر چند کیلوبایتی را که در همهٔ صفحات می‌آیند، مثل لوگو یا اسپرایت آیکون، درون‌خطی کنید و بقیه را به‌صورت فایل ارائه دهید. عکس‌ها تقریباً هیچ‌وقت جایشان درون‌خط نیست. اگر چیزی که لازم دارید نوع فایل دیگری است و نه متن، مبدل تصویر این کار را انجام می‌دهد.

نقاط قوت تصویر Base64

  • یک فایل HTML، CSS یا JSON مستقل
  • بدون درخواست اضافه برای آیکون‌های کوچک
  • امن در JSON، XML و دیگر قالب‌های متنی
  • بدون افت کیفیت و برگشت‌پذیر

هزینه‌های تصویر Base64

  • حدود 33% بزرگ‌تر از فایل دودویی
  • مرورگر آن را جداگانه کش نمی‌کند
  • در بسیاری از برنامه‌های ایمیل به‌عنوان تصویر مسدود می‌شود
  • بررسی آن در تفاوت‌های کد دشوار است

پرسش‌های رایج دربارهٔ تبدیل عکس به Base64

تفاوت Base64 و data URI چیست؟

Base64 فقط همان نویسه‌های کدشده است. data URI آن‌ها را با یک طرح و نوع، یعنی data:image/png;base64, و بعد از آن نویسه‌ها، همراه می‌کند تا مرورگر بداند چطور آن را رمزگشایی و نمایش دهد. HTML و CSS به data URI کامل نیاز دارند؛ بیشتر APIهای JSON فقط بخش ساده‌ی Base64 را می‌خواهند.

حجم عکس پس از تبدیل به Base64 چقدر بیشتر می‌شود؟

Base64 برای هر 3 بایت، 4 نویسه می‌نویسد؛ پس متن حدود یک‌سوم از فایل بزرگ‌تر است، به‌اضافهٔ پیشوند کوتاه. یک PNG با حجم 30 KB تقریباً به 40 KB متن تبدیل می‌شود. اگر HTML یا CSS با فشرده‌سازی gzip ارائه شود، بخشی از این اضافه‌حجم هنگام انتقال جبران می‌شود.

آیا می‌توان عکس Base64 را در امضای ایمیل به کار برد؟

قابل اعتماد نیست. Gmail تصاویر data URI را نمایش نمی‌دهد و چند برنامهٔ ایمیل دسکتاپ هم آن‌ها را حذف می‌کنند، پس گیرنده آیکون خراب می‌بیند. تصویر را روی یک وب‌سرور بگذارید یا به‌صورت پیوست بفرستید و Base64 را برای صفحات وب و برنامه‌ها نگه دارید.

آیا آیکون SVG را باید به Base64 تبدیل کرد؟

کار می‌کند، اما SVG خودش متن است. اگر به‌جای Base64 کد را با URL-encoding رمزگذاری کنید، معمولاً data URI کوتاه‌تری به دست می‌آید و خوانا می‌ماند. برای هر چیزی بزرگ‌تر از یک آیکون کوچک، فایل SVG جداگانه‌ای که مرورگر بتواند کش کند انتخاب بهتری است.

آیا می‌توان متن Base64 را دوباره به عکس تبدیل کرد؟

بله، این کدگذاری بدون افت کیفیت و کاملاً برگشت‌پذیر است: رمزگشایی دقیقاً بایت‌های اصلی را برمی‌گرداند. هر زبان برنامه‌نویسی یک رمزگشا دارد و اگر data URI کامل را در نوار آدرس مرورگر بچسبانید، تصویر نمایش داده می‌شود.

آیا تبدیل به Base64 کیفیت عکس را تغییر می‌دهد؟

خیر. Base64 فقط شیوهٔ نوشتن بایت‌ها را عوض می‌کند، نه پیکسل‌ها را. برای کوتاه‌تر شدن رشته، اول تصویر را کوچک کنید، مثلاً با کاهش حجم عکس به 20 KB، و سپس فایل کوچک‌تر را کدگذاری کنید.