RevealTheme logo

أداة تحويل الصور إلى Base64

حوّل أي ملف صورة إلى رابط بيانات 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؟

يضمّن رابط بيانات Base64 المحتوى الثنائي للصورة مباشرةً داخل HTML أو CSS. وهذا يلغي طلب HTTP الخاص بالأيقونات والرسومات الصغيرة، ما قد يحسّن زمن التحميل المُدرَك. أما المقايضة فهي: يضخّم ترميز Base64 حجم الملف بنحو 33%، لذا فهو مثالي للأيقونات التي يقل حجمها عن 5 كيلوبايت.

حالات الاستخدام الشائعة

  • 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؟
للأيقونات أو الشعارات أو الصور المجمّعة (sprites) الصغيرة حيث تريد إلغاء طلب HTTP. تجنّبه مع الصور الكبيرة: فالعبء الناتج عن الترميز يلغي أي فائدة.
هل يمكنني استخدام هذا في CSS؟
نعم: الصق رابط البيانات مباشرةً في تصريح background-image: url(...).

أدوات ذات صلة