این نمونه کاری را دنبال کنید، سپس همان کنترل‌ها را برای تصویر خود تطبیق دهید. باز کردن مبدل تصویر به Base64.
یک تصویر انتخاب کنید و هویت آن را پیش‌نمایش کنید
مبدل تصویر به Base64 را باز کنید. یک تصویر انتخاب کنید یا یک نمونه را امتحان کنید. این مثال از favicon-orbit.png پیکسلی 512 × 512 استفاده می‌کند که شامل 202,491 بایت است. ویرایشگر تصویر را بالای کد آن نشان می‌دهد تا بتوانید تأیید کنید که دارایی مورد نظر را انتخاب کرده‌اید.
PNG، JPG، WebP، GIF، BMP و AVIF زمانی پشتیبانی می‌شوند که مرورگر شما بتواند آن‌ها را برای پیش‌نمایش رمزگشایی کند. حداکثر اندازه فایل 25 مگابایت است، با محدودیت 60 مگاپیکسل و 16,000 پیکسل در هر ضلع. نشانه‌گذاری SVG توسط این مبدل شطرنجی پذیرفته نمی‌شود.
این ابزار بایت‌های فایل اصلی را می‌خواند. از پیش‌نمایش برای بازسازی، تغییر اندازه یا فشرده‌سازی مجدد تصویر استفاده نمی‌کند. بنابراین متادیتای موجود و انیمیشن GIF در داده‌های کدگذاری‌شده حفظ می‌شوند.
قبل از کدگذاری، اگر به دارایی کوچک‌تری نیاز دارید از Resize Image یا Image Compressor استفاده کنید. Base64 به خودی خود اندازه تصویر را کاهش نمی‌دهد.
نمایشی را که پروژه شما انتظار دارد انتخاب کنید
تنظیمات را باز کنید و برای این مثال تصویر HTML را در بخش فرمت کد انتخاب کنید. نتیجه یک تگ img حاوی یک Data URL از نوع Base64 است. ویژگی alt در ابتدا خالی است؛ وقتی تصویر اطلاعاتی را منتقل می‌کند، متن جایگزین مفید بنویسید.
Data URL با پیشوندی مانند data:image/png;base64 شروع می‌شود و به دنبال آن داده‌های کدگذاری‌شده قرار می‌گیرد. Plain Base64 فقط شامل داده‌ها است. پس‌زمینه CSS، آدرس داده را در یک اعلان background-image می‌پیچد. این نمایش‌ها به مقاصد مختلفی خدمت می‌کنند، بنابراین به جای تغییر نام فایل، فرم درخواست‌شده توسط برنامه خود را کپی کنید.
پنل کد بلافاصله پس از تغییر فرمت کد به‌روزرسانی می‌شود. آیکون کپی، نمایش فعلی را کپی کرده و تأییدیه کپی شدن را نمایش می‌دهد. هنگامی که دسترسی به کلیپ‌بورد مسدود است، کد برای کپی دستی انتخاب می‌شود.
یک تگ HTML img کامل با یک نشانی داده (data URL) متفاوت است. هرگاه فیلدی از شما نشانی (URL) خواست، فقط از مقدار src استفاده کنید.
نمونه موجود در این راهنما
یک نمونه را امتحان کنید: favicon-orbit.png، 512 × 512 پیکسل، 202,491 بایت. در بخش فرمت کد، HTML را انتخاب کنید. شروع را بزنید و favicon-orbit-base64.txt را دانلود کنید.
- PNG اصلی
- 512 × 512 پیکسل · 202,491 بایت
- خروجی متنی HTML
- 270,029 بایت
- کدگذاری
- بایت‌های اصلی؛ بدون فشرده‌سازی مجدد
کد را دانلود کنید و اندازه آن را درک کنید
گزینه شروع (Start) و سپس دانلود (Download) را انتخاب کنید. نمونه ذخیره‌شده شامل favicon-orbit-base64.txt است که حاوی HTML کد تصویر می‌باشد. حجم آن 270,029 بایت است که از منبع 202,491 بایتی بزرگتر است. مقایسه در مقاله، ابتدای متن دانلود شده را نشان می‌دهد که تنها برای خوانایی کوتاه‌تر شده است.
Base64 معمولاً سه بایت منبع را به چهار کاراکتر متنی تبدیل می‌کند و حدود یک‌سوم به حجم آن پیش از بسته‌بندی کوچک اضافه می‌کند. جاسازی یک آیکون کوچک می‌تواند یک سند را مستقل کند، اما قرار دادن رشته‌های تصویری بزرگ درون HTML یا CSS باعث بزرگتر شدن سند شده و از کش شدن تصویر به عنوان یک فایل جداگانه جلوگیری می‌کند.
کدگذاری به معنای رمزنگاری نیست. هر کسی که رشته کامل Base64 را داشته باشد می‌تواند تصویر اصلی را بازیابی کند. اگر کد حاوی اطلاعات خصوصی است، با آن همانند فایل منبع با دقت رفتار کنید.
بخش کوتاه شده در این مقاله صرفاً جهت توضیح است. از TXT کامل دانلود شده استفاده کنید یا کل کد را از ابزار کپی نمایید.
پرسش‌های متداول
آیا کدگذاری کیفیت تصویر را کاهش می‌دهد؟
خیر. کدگذاری بایت‌های اصلی را حفظ می‌کند. این کار تصویر را تغییر اندازه، فشرده یا بازطراحی نمی‌کند.
چرا رشته Base64 بزرگتر از تصویر است؟
Base64 سه بایت ورودی را با استفاده از چهار کاراکتر متنی نمایش می‌دهد، بنابراین معمولاً حدود یک سوم قبل از یک پوشش یا پیشوند اضافه می‌کند.
آیا انیمیشن‌های GIF حفظ می‌شوند؟
کدگذاری، بایت‌های اصلی GIF از جمله انیمیشن را حفظ می‌کند. پیش‌نمایش ممکن است تنها یک فریم ثابت را نشان دهد در حالی که داده‌های کدگذاری شده تمام فریم‌ها را در خود نگه می‌دارند.
آیا Base64 برای تصاویر محرمانه امن است؟
Base64 رمزگذاری نیست. اگر تصویر اصلی محرمانه است، رشته را خصوصی نگه دارید. خود مبدل آن را به صورت محلی در مرورگر شما پردازش می‌کند.
تصویر مناسب را به کد مناسب تبدیل کنید.
یک نمونه را امتحان کنید یا از فایل خود استفاده کنید و قبل از اشتراک‌گذاری، نتیجه را بررسی کنید.
