# الصورة إلى Data URI — رمِّز صورة بـ base64 لـ CSS أو HTML

الصورة كلها في سطر نصّ واحد. الصقه في CSS أو HTML مباشرة.

> حوِّل صورة PNG أو JPEG أو SVG أو WebP إلى Data URI تلصقه في CSS أو HTML. أما ملفات SVG فتُرمَّز بالنسبة المئوية لا بـ base64، فتبقى مقروءة وأقصر. يعمل داخل متصفحك، ولا يُرفع شيء.

هذه الصفحة أداة تفاعلية تعمل بالكامل داخل متصفحك، على العنوان https://abox.tools/ar/تحويل-الصورة-إلى-base64/ — ولا يُرفَع أي شيء تعطيه إياها. وفيما يلي كل ما تقوله الصفحة عن الأداة بالكلمات؛ لاستخدامها، افتح العنوان.

## صورك لا تُرفع **أبدا**. لا يوجد خادم.

يجري الترميز داخل متصفحك أنت، على جهازك أنت. وهو حسابٌ على بايتات عند الصفحة أصلاً: لا مرمِّز، ولا خادم، ولا خطوة شبكية يمكن إغفالها. لا تملك هذه الأداة أي وظيفة شبكية على الإطلاق — لا شيء تجلبه ولا شيء ترسله — ولا يقف خلف هذه الصفحة خادم تُرسَل إليه صورة، حتى لو كان فيها ما يرسلها.

- ✗ بلا رفع
- ✗ بلا حساب
- ✗ بلا إعادة ترميز
- ✓ يعمل دون اتصال
- ✓ مفتوح المصدر

## كيف تحوِّل صورة إلى Data URI

1. **اختر صورك.** أفلِتها على المُنتقي أو اخترها يدوياً. يقرؤها المتصفح من قرصك مباشرة، ولا يُرسَل شيء إلى أي مكان أثناء ذلك.
2. **قل إلى أين ستذهب النتيجة.** الـ URI وحدها، أو قاعدة CSS، أو خاصية مخصّصة، أو وسم `<img>`، أو Markdown. وكل واحدة منها تضع الـ URI بين علامتَي اقتباس، وهي التفصيلة التي يسهل الخطأ فيها والتي لا تفشل إلا مع ملفات SVG.
3. **انظر ماذا كلّف ذلك.** تقول كل نتيجة كم حرفاً صارت، وكم هي أكبر من الملف، وهل تضمين شيء بهذا الحجم فكرة صائبة. فـ base64 يضيف الثلث؛ وهل يستحق ذلك الثلثُ طلباً موفَّراً يتوقف كلياً على الحجم، فتقول لك الصفحة على أي جانب من الخط أنت.
4. **انظر في التحذيرات.** إن كانت الصورة تحمل EXIF أو ملفَّ ألوان أو XMP، سُمّي ذلك ومعه كم بايتاً من نتيجتك هو. وإن خالف الامتداد الصيغةَ الحقيقية، أخذت الصفحة بالصيغة وأخبرتك. وإن عجز متصفحك عن رسم النتيجة، قالت ذلك أيضاً.
5. **انسخ، أو نزِّل.** زرٌّ لكل نتيجة، وزرٌّ لها جميعاً دفعة واحدة — وتخرج الخصائص المخصّصة ملفوفة في كتلة `:root`، جاهزة للّصق في رأس ورقة الأنماط.

## النسخة الأطول

[متى تضع صورةً داخل ملف CSS ومتى لا تفعل](https://abox.tools/ar/أدلة/تضمين-صورة-في-css/): ماذا يكلّف عنوانُ data URI، ولماذا يضيف base64 الثلثَ ولا يعيده gzip، ولماذا لا ينبغي أن يكون ملفُّ SVG بترميز base64 أبداً، وخطأُ التنصيص الذي يكسر ملفات SVG المضمَّنة بصمت.

## أيضا في الصندوق

- [SVG إلى صورة](https://abox.tools/ar/تحويل-svg-إلى-png/): حدّد الحجم. فالرسم المتجهي لا حجم له يخسره.
- [صورة إلى SVG](https://abox.tools/ar/تحويل-صورة-إلى-svg/): شكل واحد، وخط محيط واحد. أشِر إلى ما لا ينبغي أن يكون هناك.
- [رسم مقارنة الأطوال](https://abox.tools/ar/مقارنة-الاطوال/): اكتب الأطوال، وخذ الصورة. ولا يُرسَل شيء لرسمها.
- [ضاغط الصور](https://abox.tools/ar/ضغط-الصور/): حدّد الحجم، ويتكفّل هو بالباقي.

## أسئلة

### هل تُرفع صورتي إلى أي مكان؟

لا. يقرأ متصفحك أنت الملف ويرمّزه على جهازك أنت، بدالّتين يملكهما المتصفح أصلاً. لا تملك هذه الأداة أي وظيفة شبكية على الإطلاق — فهي لا تجلب شيئاً ولا ترسل شيئاً — و`Content-Security-Policy` الخاصة بالصفحة تُسمّي كل عنوان يجوز لها الاتصال به، وليس واحد منها لنا.

### ما الـ Data URI؟

طريقة في كتابة ملف كامل في الموضع الذي يوضع فيه عنوان الويب عادةً. فبدل `url("logo.png")`، التي تقول للمتصفح اذهب وأحضِر شيئاً، تكتب `url("data:image/png;base64,iVBORw0...")`، وهي تحوي الصورة نفسها. فيفكّ المتصفح ترميزها في مكانها. والأثر العملي طلبٌ أقل: تصل الصورة مع ورقة الأنماط أو الصفحة بدل أن تصل بعدها.

### لماذا لم يُرمَّز ملف SVG بـ base64؟

لأن base64 هو الترميز الخطأ له. فملف SVG نصّ، والعنوان يستطيع حمل النصّ أصلاً — ولا يحتاج إلى الهروب إلا حفنة من المحارف. وترميزُ تلك بالنسبة المئوية وتركُ ما عداها ينتج URI أقصر بنحو الخُمس من base64 للملف نفسه، وتظل تستطيع قراءتها في ورقة أنماطك: أسماء العناصر والألوان و`viewBox` كلها باقية للتعديل. وثمّة مربع اختيار لفرض base64 لسلسلة الأدوات النادرة التي تصرّ عليه.

### كم يكبّر base64 صورتي؟

الثلث تقريباً. ثلاث بايتات من الملف تصير أربعة محارف من base64، أي 33% قبل `data:image/png;base64,` التي في المقدمة. وهذا هو الحدّ الأدنى، ولا مفرّ منه: فهو ثمن كتابة بايتات كيفما كانت بالمحارف التي يسمح بها العنوان لا غير. وهو أيضاً سبب عرض الصفحة عددَ المحارف بجانب حجم الملف بدل أن تتركك تكتشفه حين تُنشَر ورقة الأنماط.

### متى يكون تضمين صورة فكرة صائبة فعلاً؟

حين تكون صغيرة والحاجة إليها فورية. فأيقونة بحجم 2 KB في ورقة أنماط تحمّلها كل صفحة مكسبٌ بيّن: رحلة ذهاب وإياب أقل، والصورة حاضرة لحظةَ حضور الـ CSS. وبعد نحو 10 KB ينقلب الميزان. فالصورة المضمَّنة لم تعد ملفاً منفصلاً، فلا يمكن تخبئتها وحدها، ولا جلبها بالتوازي مع غيرها، وتُنزَّل كاملة من جديد كلما تغيّر الملف الذي حولها — وصورة فوتوغرافية بحجم 200 KB في ورقة أنماط هي 200 KB مضافة إلى المسار الحرج لكل صفحة في الموقع. وتقول لك الصفحة على أي جانب من ذلك الخط تقع كل نتيجة.

### هل يُلغي gzip زيادةَ base64؟

أقلّ مما يتوقّع الناس. فـ base64 لملف مضغوط أصلاً — وهو حال PNG وJPEG وWebP جميعاً — ينضغط ضغطاً رديئاً، لأنه لم يبقَ فيه من التكرار ما يجده الضاغط؛ فتستعيد عادةً شيئاً كعُشر الثلث الذي أضافه base64، لا الثلث كله. أما ملف SVG المرمَّز بالنسبة المئوية فالحال فيه عكس ذلك: هو نصّ بعد، فينضغط كما كان ينضغط تقريباً، وهذا سبب آخر لألا ترمّزه بـ base64.

### هل يغيّر هذا صورتي أصلاً؟

لا، وهذا فرق مقصود عن معظم الأدوات هنا. فلا شيء يُفكّ ترميزه إلى بكسلات ويُعاد ترميزه: البايتات التي خرجت من قرصك هي البايتات التي تدخل في الـ URI. فيبقى ملف JPEG هو ملف JPEG نفسه بالضبط، بالجودة نفسها والأبعاد نفسها. وهو السبب في أن الناتج يمكن وصفه بأنه الملف نفسه لا نسخة منه.

### إذن تذهب بيانات EXIF وGPS إلى ورقة الأنماط أيضاً؟

نعم، وهذا هو الجزء الجدير بالتفكير قبل اللصق. فلأن لا شيء يُعاد ترميزه، يسافر مع الصورة كلُّ ما كتبته الكاميرا: الموقع، والوقت، والرقم التسلسلي للكاميرا. وفي صورة من هاتف قد يكون ذلك 30 KB من الملف، تصير 40 KB من base64 على المسار الحرج لصفحتك، وعنوانَ منزل في شيء سيُودَع في مستودع. وهذه الصفحة تقرأ كم من البيانات الوصفية في ملف JPEG أو PNG أو WebP وتقوله. ولإخراجها أولاً، استخدم [عارض EXIF ومُزيله](https://abox.tools/ar/إزالة-بيانات-exif/).

### لماذا استخدم نوعاً غير امتداد ملفي؟

لأن الامتداد قد يكون خطأً والبايتات لا تكون. فملفٌ اسمه `logo.png` وقد صُدِّر في الحقيقة JPEG أمرٌ شائع بما يكفي لأن تضطر كل أداة صور إلى التعامل معه، والـ Data URI التي تعلن النوع الخطأ لا تظهر ببساطة — لا بديل ولا رسالة خطأ تستحق القراءة. فيُقرأ النوع من أول بايتات الملف، وهي تقول ما هو قولاً قاطعاً في كل صيغة هنا، وتخبرك الصفحة حين يختلف الاثنان.

### المعاينة فارغة. ما الذي حدث؟

على الأرجح لا شيء يخصّ الـ URI. فـ HEIC وTIFF كلتاهما تنتج Data URI صحيحة تماماً لا يرسمها متصفح غير Safari، فالصورة غائبة حيثما لصقتها كذلك — حوِّلها إلى PNG أو JPEG أو WebP أولاً بـ [ضاغط الصور](https://abox.tools/ar/ضغط-الصور/) أو [أداة تغيير حجم الصور](https://abox.tools/ar/تغيير-حجم-الصورة/). وإن كانت الصيغة من الصيغ المعتادة، فالأرجح أن الملف نفسه معطوب: فالمعاينة مرسومة من الـ URI التي بنتها هذه الصفحة، وفراغها يعني أن الصورة لم يُفكّ ترميزها.

### هل ثمّة حدّ لحجم الـ Data URI؟

ليس حداً ستلقاه في CSS ولا في وسم `<img>`؛ فالمتصفحات الحديثة لا تفرض هناك سقفاً عملياً. أما ما تحدّه المتصفحات فعلاً فهو كتابة Data URI في شريط العنوان، وهو ما ترفضه أكثرها الآن لأي شيء غير تافه، لأسباب أمنية لا علاقة لها بهذا الاستعمال. والحدّ الحقيقي هو الذي سبق: فقبل أن ينكسر شيء تقني بمدة طويلة، تكون الصفحة التي هو فيها قد صارت أبطأ مما كانت ستكون بملف صورة عادي.

### هل هو مجاني، وهل أحتاج إلى حساب؟

هو مجاني، ولا حساب ولا تسجيل دخول ولا فترة تجريبية ولا علامة مائية. ولا حدّ لعدد الملفات ولا لأحجامها كذلك، إذ لا خادم يدفع ثمنها — فالعمل يجري على جهازك أنت. ويحمل الموقع إعلانات، وهي ما يدفع تكاليفه؛ ولا يُعطى المعلنون شيئاً عن صورك.

### هل يعمل دون اتصال؟

نعم. حمِّل الصفحة مرة، ثم اقطع اتصالك بالإنترنت وستظل تعمل. وهذه أيضاً أبسط طريقة لإثبات أنه لا يُرفع شيء: فأداةٌ ترسل صورك بعيداً لتُرمَّز كانت ستتوقف في اللحظة التي تقطع فيها الاتصال.

## كيف يمكن التحقق من وعد الخصوصية

- **صورك لا سبيل لها إلى الخروج.** تُسمّي Content-Security-Policy كل عنوان يجوز لهذه الصفحة الاتصال به، وليس واحد منها لنا. فلا يوجد هنا طرفٌ تُجمَع عنده ملفاتك، ولا في الشيفرة ما يرسلها إليه لو وُجد.
- **لا شيء هنا يجلب شيئاً.** لا يوجد `fetch` ولا `XMLHttpRequest` ولا `sendBeacon` في أي موضع من `src/`. والترميز هو `btoa` و`encodeURIComponent` — دالّتان يملكهما المتصفح منذ البداية، وكلتاهما تأخذ بايتات وتعيد نصّاً دون أن تذهب إلى أي مكان.
- **المعاينة هي البرهان.** الصورة التي بجانب كل نتيجة مرسومة من الـ Data URI التي بنتها هذه الصفحة للتوّ، لا من ملفك. وهي تظهر لأن الـ URI صحيحة، على جهازك، دون أي خادم في الأمر — وإن لم تظهر قالت الصفحة ذلك بدل أن تناولك شيئاً معطوباً.
- **التحذير من البيانات الوصفية في صفّك.** الـ Data URI تنسخ الملف بالضبط، فيسافر مع الصورة تحديدُ GPS الذي فيها إلى ورقة أنماطك. وهذه الصفحة تقرأ كم من ذلك موجود وتقوله لك، لأن البديل أن تعرفه بعد أن يكون قد أُودِع في المستودع.
- **ما تُحمّله Google، وما لا يُعطى لها.** نصوص الإعلانات والقياس تأتي من Google، وزر التبرّع من Buy Me a Coffee. ولا يُعطى أيٌّ منها شيئاً عن صورك. وكل سطر يقرأ ملفاً أو يرمّزه يُخدَم من هذا الأصل نفسه ومُدرَج في المستودع.
- **يعمل دون اتصال.** اقطع الاتصال بالشبكة، وتبقى الأداة كما هي، لأنه لم تكن فيها خطوة شبكية قط. وهذا أبسط برهان على الإطلاق.

**تحقّق بنفسك.** لا شيء مما سبق عليك تصديقه دون تحقق. تُولَّد هذه الصفحة من القوالب والإعدادات في المستودع بواسطة سكربت بناء يمكنك قراءته وتشغيله بنفسك، والنتيجة موجودة في فرع `dist` — فقارِن إذن بين ما يُقدَّم فعلا وما ينتجه بناء المصادر: https://github.com/A-Box-of-Tools/website

الملفات الجديرة بالقراءة أولا هي `config/site.toml` من أجل سياسة أمان المحتوى (Content-Security-Policy)، و`src/encode.js` للترميزين والحُجّة وراء كلٍّ منهما، و`src/sniff.js` لكيفية قراءة نوع الوسيط من الملف نفسه لا من اسمه، و`src/metadata.js` للفحص الذي يقول كم ممّا أنت على وشك لصقه ليس الصورة.