RevealTheme logo

مبدل تصویر به Base64

هر فایل تصویری را به یک URL داده Base64 تبدیل کنید. نتیجه را مستقیماً در CSS، HTML یا JSON جای‌گذاری کنید.

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

  1. 1

    Click the file picker and choose an image (PNG, JPEG, GIF, WebP, SVG, or any format your browser accepts).

  2. 2

    Wait a moment while the browser reads the file and renders a preview thumbnail.

  3. 3

    Review the generated data URL in the text box below the preview.

  4. 4

    Click Copy to put the full data URL on your clipboard, then paste it into your stylesheet or markup.

مبدل تصویر به Base64 چیست؟

یک URL داده Base64 محتوای باینری یک تصویر را مستقیماً در HTML یا CSS جای می‌دهد. این کار درخواست HTTP را برای آیکن‌ها و گرافیک‌های کوچک حذف می‌کند که می‌تواند زمان بارگذاری ادراک‌شده را بهبود بخشد. در مقابل: کدگذاری Base64 اندازه فایل را حدود ۳۳ درصد افزایش می‌دهد، بنابراین برای آیکن‌های کمتر از ۵ کیلوبایت ایده‌آل است.

موارد استفاده رایج

  • Inline a small icon directly in a CSS background-image: url(...) rule to save an HTTP request.

  • Embed a logo in a single self-contained HTML email or offline page with no external files.

  • Paste image data into a JSON payload or API request that only accepts text fields.

  • Store a tiny placeholder image as a string in a config file or environment variable.

  • Drop an avatar or sprite straight into a React or Vue component without a separate asset import.

  • Generate a quick data URL to test how a graphic renders in a sandbox or CodePen snippet.

پرسش‌های متداول

چه زمانی باید از تصاویر Base64 استفاده کنم؟
برای آیکن‌ها، لوگوها یا اسپرایت‌های کوچک که می‌خواهید یک درخواست HTTP را حذف کنید. برای تصاویر بزرگ از آن پرهیز کنید: سربار کدگذاری هرگونه فایده را خنثی می‌کند.
آیا می‌توانم این را در CSS استفاده کنم؟
بله: URL داده را مستقیماً در یک اعلان background-image: url(...) جای‌گذاری کنید.

ابزارهای مرتبط