تبدیل عکس به Base64 چه کاربردی دارد؟
وقتی عکسی را به Base64 تبدیل می‌کنی، کل فایل به یک رشته‌ی متنی تبدیل می‌شود که می‌شود آن را مستقیم داخل کد گذاشت. نتیجه یک data URI است که با data:image/png;base64, شروع می‌شود و هر جایی که آدرس عکس قبول می‌شود، کار می‌کند: در src تگ img، در background-image در CSS، داخل فایل JSON یا قالب ایمیل.
کاربردهای رایج تبدیل تصویر به Base64:
- آیکن‌ها و تصاویر خیلی کوچک: حذف یک درخواست HTTP برای فایل‌های چندصد بایتی.
- قالب‌های ایمیل: بعضی سرویس‌های ایمیل تصاویر خارجی را مسدود می‌کنند.
- تصویر placeholder محو (LQIP): نسخه‌ی خیلی کوچک و تار عکس که تا بارگذاری عکس اصلی نمایش داده می‌شود.
- API و دیتابیس: فرستادن عکس داخل JSON یا ذخیره در فیلد متنی.
- فایل‌های HTML تک‌فایلی: گزارش یا صفحه‌ای که باید بدون پوشه‌ی تصاویر کار کند.
نحوه‌ی استفاده از Base64 در HTML و CSS
در تگ img
<img src="data:image/png;base64,iVBORw0KGgo..." alt="لوگو" width="120" height="40">در background-image
.hero {
background-image: url("data:image/webp;base64,UklGRl...");
}یادت باشد width و height را روی تگ img بنویسی تا صفحه هنگام بارگذاری جابه‌جا نشود.
چه موقع نباید عکس را Base64 کرد؟
Base64 جادو نیست و استفاده‌ی نادرستش سایت را کندتر می‌کند:
| حالت | فایل معمولی | Base64 |
|---|---|---|
| حجم | حجم اصلی | حدود ۳۳٪ بیشتر |
| کش مرورگر | جدا کش می‌شود | همراه HTML/CSS؛ با هر تغییر دوباره دانلود می‌شود |
| lazy loading | دارد | ندارد؛ همیشه همراه صفحه بارگذاری می‌شود |
| مناسب برای | عکس‌های محصول، بنر، گالری | آیکن و تصویر زیر ۵ کیلوبایت |
قاعده‌ی سرانگشتی: اگر حجم عکس بیشتر از ۵ کیلوبایت است، آن را به WebP یا AVIF تبدیل کن و به‌صورت فایل جدا با loading="lazy" بارگذاری کن. این ابزار برای فایل‌های بزرگ هشدار می‌دهد.
تبدیل Base64 به عکس
اگر رشته‌ی Base64 را از یک API، فایل JSON یا کد سایت دیگری گرفته‌ای و می‌خواهی ببینی چه تصویری است، آن را در بخش «Base64 به عکس» بچسبان. فرقی نمی‌کند پیشوند data:image/...;base64, داشته باشد یا نه؛ نوع فایل خودکار تشخیص داده می‌شود و می‌توانی آن را با پسوند درست دانلود کنی.
برای آیکن‌های SVG بهتر است به‌جای Base64 از ابزار تبدیل SVG به CSS استفاده کنی که خروجی سبک‌تری می‌دهد و امکان تغییر رنگ با mask را هم دارد.