نحوه عملکرد تبدیل تصویر به Base64
کل تبدیل در مرورگر شما با استفاده از File API و تابع داخلی btoa اجرا میشود — هیچ کتابخانه codec دانلود نمیشود و هیچ سروری تصویر را نمیبیند. این است pipeline، از ابتدا تا انتها:
- شما یک تصویر رها یا انتخاب میکنید. مرورگر آن را بهعنوان Blob از دیسک محلی شما میخواند، بدون اینکه بایتها به سرور کپی شوند.
- فایل در قطعات ۱ مگابایتی خوانده میشود و بایتهای هر قطعه به یک رشته دودویی اضافه میشوند. این تقطیع از سرریز شدن call stack جاوااسکریپت برای تصاویر بزرگ جلوگیری میکند.
- رشته دودویی به btoa ارسال میشود که هر سه بایت را به چهار کاراکتر Base64 از الفبای A–Z، a–z، 0–9، +، / نگاشت میکند.
- نوع MIME فایل (image/png، image/jpeg، و غیره) از شیء File خوانده و بهعنوان پیشوند data: اضافه میشود و یک آدرس کامل data:image/…;base64,… تولید میکند.
- صفحه چهار خروجی از آن آدرس میسازد — data URI کامل، Base64 خام بدون پیشوند، تگ
آمادهبرایجایگذاری، و قطعه CSS background-image — هر کدام با دکمه کپی خود.
چرا تصویر را بهعنوان data URI رمزگذاری کنیم؟
- درونخطی کردن یک لوگو یا آیکون کوچک بهعنوان data URI یک رفتوبرگشت شبکه جداگانه را حذف میکند، بنابراین صفحه یا ایمیل اولین فریم خود را کمی زودتر رندر میکند.
- یک صفحه یا stylesheet که تصاویرش درونخطی هستند بهصورت آفلاین کار میکند و میتوانید آن را بدون اینکه پوشهای از داراییها را با خود بکشید منتقل کنید.
- بسیاری از کلاینتهای ایمیل بهطور پیشفرض تصاویر راه دور لینکشده را مسدود میکنند. یک لوگو را بهعنوان Base64 درونخطی کنید و بهمحض باز شدن پیام نمایش داده میشود، بدون هیچ دریافت راه دوری.
- رمزگذاری کاملاً در مرورگر شما انجام میشود، بنابراین تصاویر حساس هرگز به سرور شخص ثالث نمیرسند. این اسکرینشاتها، اسکن اسناد هویتی و دیاگرامهای داخلی را پوشش میدهد.
کاربردهای رایج تصاویر Base64
data URI هر جا که تصویر بهقدری کوچک باشد که یک درخواست جداگانه گرانتر از افزایش ~۳۳٪ حجمی باشد که Base64 اضافه میکند ظاهر میشود. سه الگو بهطور مداوم تکرار میشوند:
- آیکونهای CSS درونخطی: یک sprite یا آیکون ۱–۲ کیلوبایتی که بهعنوان background-image: url(data:…) در stylesheet قرار میگیرد تا قانون کاملاً مستقل باشد.
- امضاهای ایمیل و خبرنامهها: لوگویی که بهعنوان
با data URI بهعنوان src تعبیه شده حتی وقتی کلاینت تصاویر راه دور را مسدود میکند نمایش داده میشود.
- درونخطیسازی ابزارهای ساخت: bundlerهایی مثل Webpack و Vite بهطور خودکار داراییهای زیر یک حد بایت را درونخطی میکنند، و این ابزار به شما اجازه میدهد دقیقاً ببینید آن خروجی چه شکلی خواهد بود.
تصویر Base64 چه شکلی است؟
یک PNG شفاف ۱×۱ کوچک را در نظر بگیرید. بایتهای خام آن فقط ۶۷ بایت هستند، اما بعد از رمزگذاری رشته iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII= میشود و data URI کامل data:image/png;base64,iVBORw0KGgo… است. توجه کنید که فرم رمزگذاریشده تقریباً یکسوم بزرگتر از اصل است. این مبادلهای است برای ایمنسازی داده دودویی برای تعبیه مستقیم در متن.
آیا تصویرم جایی آپلود میشود؟
خیر. تبدیل از File API مرورگر و تابع btoa بومی برای رمزگذاری تصویر کاملاً روی دستگاه شما استفاده میکند. میتوانید خودتان تأیید کنید: ابزارهای توسعهدهنده مرورگرتان را باز کنید، به پنل Network بروید، و یک تصویر تبدیل کنید — تنها درخواستهایی که میبینید بارگذاری صفحه و هر تبلیغی هستند. هیچ چیز شبیه تصویری به سرور ارسال نمیشود، که این آن را برای اسکرینشاتها، اسناد هویتی و دیاگرامهای داخلی ایمن میکند.
چرا خروجی Base64 از تصویر اصلی من بزرگتر است؟
Base64 هر سه بایت داده دودویی را با چهار کاراکتر ASCII نمایش میدهد، بنابراین متن رمزگذاریشده حدود ۳۳٪ بزرگتر از فایل منبع است. نمایشگر اندازه data URI در این صفحه طول دقیق پس از اضافه شدن را نشان میدهد. به همین دلیل data URI فقط برای تصاویر کوچک منطقی است — درونخطی کردن یک عکس ۲ مگابایتی HTML یا CSS شما را بسیار بیشتر از آنچه یک درخواست جداگانه هزینه داشت متورم میکند. بهعنوان یک قانون کلی، تصاویر زیر ۴ کیلوبایت را درونخطی کنید و برای هر چیز بزرگتر لینک بدهید.
کدام فرمتهای تصویر را میتوانم تبدیل کنم؟
هر فرمتی که مرورگرتان آن را بهعنوان تصویر تشخیص میدهد کار میکند، زیرا ابزار بهجای رمزگشایی تصویر بایتهای خام را میخواند. این شامل PNG، JPEG، GIF، WebP، SVG و BMP میشود. نوع MIME مستقیماً از فایل خوانده میشود، بنابراین پیشوند data: همیشه با فرمت واقعی مطابقت دارد — JPEG پیشوند data:image/jpeg و SVG پیشوند data:image/svg+xml تولید میکند. SVG یک نکته ویژه دارد: این فرمت از قبل متن است، بنابراین برای SVGها یک data URI با URL-encoding اغلب کوچکتر از نسخه Base64 است، هرچند این ابزار برای سازگاری فرم Base64 را تولید میکند.
یک تصویر رها کنید، data URI یا قطعهای که نیاز دارید را کپی کنید، و آن را در HTML، CSS، یا قالب ایمیل خود جایگذاری کنید. هر بایت روی دستگاه شما میماند. بدون آپلود، بدون حساب کاربری، بدون رفتوبرگشت به سرور.