تصویر به Base64
هر تصویری را در این مبدل تصویر به Base64 رها کنید تا data URI و قطعه‌کدهای آماده برای HTML، CSS و JavaScript دریافت کنید. تصاویر درون‌خطی برای آیکون‌های کوچک درخواست‌های HTTP را کاهش می‌دهند و برای HTML تک‌فایلی، قالب‌های ایمیل و اپلیکیشن‌های آفلاین ضروری‌اند.
نحوه تبدیل آنلاین تصویر به Base64
- یک فایل تصویری انتخاب کنید یا URL تصویر را جای‌گذاری کنید.
- خروجی را انتخاب کنید: data URI،
<img>، پس‌زمینه CSS، favicon، JSON و غیره. - روی رمزگذاری تصویر به Base64 کلیک کنید.
- تصویر را پیش‌نمایش کنید و کد را کپی کنید.
مبدل‌های بیشتر تصویر به Base64
فرمت‌های خروجی
نحوه بسته‌بندی نتیجه را انتخاب کنید. مبدل می‌تواند این خروجی‌ها را برگرداند:
- txt: فقط رشته Base64، آماده برای جای‌گذاری در کد، فیلد پایگاه داده یا درخواست API.
- uri: یک URI کامل
data:که می‌توانید در نوار آدرس مرورگر جای‌گذاری کنید یا هر جایی که URL پذیرفته می‌شود استفاده کنید. - html img: تگ
<img>با data URI درsrc. - css background image: قاعده CSS با
background-image: url(data:...). - html favicon: تگ
<link rel="icon">برای favicon درون‌خطی. - html hyperlink: لینک
<a>که فایل جاسازی‌شده را دانلود می‌کند یا باز می‌کند. - html iframe: یک
<iframe>که محتوا را درون صفحه نمایش می‌دهد. - javascript image: کد JavaScript که یک شیء
Imageمی‌سازد. - javascript popup: کد JavaScript که محتوا را در پنجره جدید باز می‌کند.
- json: شیء JSON شامل نام فایل، MIME type و داده.
- xml: عنصر XML با داده درون بخش CDATA.
چه زمانی باید تصاویر را به‌صورت Base64 درون‌خطی کرد؟
تصاویر کوچک (کمتر از حدود 5–10 KB) مانند آیکون‌ها، لوگوها و placeholderها را برای کاهش درخواست‌ها درون‌خطی کنید. از درون‌خطی کردن عکس‌های بزرگ پرهیز کنید: HTML/CSS را سنگین‌تر می‌کنند، جداگانه کش نمی‌شوند و رندر را به تأخیر می‌اندازند. برای توضیحات بیشتر توضیح data URIها را ببینید.
سؤالات متداول
چطور یک تصویر را به Base64 تبدیل کنم؟
تصویر خود را انتخاب کنید، «Data URI» یا «<img>» را به‌عنوان خروجی برگزینید و روی «رمزگذاری تصویر به Base64» کلیک کنید. نتیجه را در HTML یا CSS خود کپی کنید.
کدام فرمت‌های تصویری پشتیبانی می‌شوند؟
هر فرمتی که مرورگر شما بتواند بخواند: PNG، JPG/JPEG، GIF، WebP، SVG، BMP، ICO، AVIF، TIFF و غیره.
چطور از تصویر Base64 در HTML استفاده کنم؟
data URI را در ویژگی src قرار دهید: <img src="data:image/png;base64,iVBORw0KGgo..." alt="">.
دیدگاه‌ها (0)
سؤال، ایده یا باگی در «تصویر به Base64» دارید؟ دیدگاه بگذارید، به ابزار امتیاز دهید یا به دیگران پاسخ دهید.
هنوز دیدگاهی ثبت نشده است. اولین نفری باشید که نظر خود را به اشتراک می‌گذارد!