# متى تضع صورةً داخل ملف CSS ومتى لا تفعل

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

[افتح الصورة إلى Data URI](https://abox.tools/ar/تحويل-الصورة-إلى-base64/): الصورة كلها في سطر نصّ واحد. الصقه في CSS أو HTML مباشرة.

آخر تحديث 26 أغسطس 2026

## الجواب القصير

افتح [الصورة إلى Data URI](https://abox.tools/ar/تحويل-الصورة-إلى-base64/)، وأفلِت الصورة فيها، واختر *خاصيةَ CSS مخصَّصة*، والصق السطر في أعلى ورقة أنماطك. ثم استعمله `background-image: var(--logo)` حيثما احتجته.

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

## ما عنوانُ data URI فعلاً

عنوانٌ يحوي الشيء بدل أن يشير إليه. فحيث تقول ورقةُ الأنماط عادةً

```
background-image: url("logo.png");
```

فيذهب المتصفح ويجلب `logo.png`، يقول عنوانُ data URI

```
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...");
```

وليس ثمّة ما يُجلَب: فالصورةُ هناك أصلاً، مكتوبةً محارفَ. وله ثلاثةُ أجزاء. `data:` هو المخطَّط. و`image/png` هو نوعُ الوسيط، والمتصفحُ يصدّقه تماماً — والمزيدُ عن ذلك أدناه. وكلُّ ما بعد الفاصلة هو الملف.

وتلك هي الفكرةُ كلها. وليست حيلةً ولا التفافاً؛ فهي في المعايير منذ 1998 وتعمل في كل متصفح شُحِن منذ ذلك الحين.

## ماذا يشتري لك: رحلةُ ذهاب وإياب أقلّ

التوفيرُ ليس في عرض النطاق. بل في الطلب.

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

ومضمَّناً، يصل مع ورقة الأنماط. وتلك هي المنفعةُ كلها، وهي لأيقونة صغيرة تظهر في أعلى الصفحة منفعةٌ حقيقية.

## ماذا يكلّف: الثلثَ، ثم التخزينَ المؤقت

**base64 يضيف نحو الثلث.** فثلاثةُ بايتات من الملف تصير أربعةَ محارف، لأن ذلك ما يلزم لكتابة بايتات كيفما كانت بمحارف يسمح بها العنوان وحدها. وليس ثمّة مرمِّزٌ ذكيّ يتجنّب ذلك. فملفُّ PNG بـ 9 كيلوبايتات هو 12 كيلوبايتاً من ورقة الأنماط.

**والضغطُ لا يعيده.** وهذا هو الجزءُ الذي يفترضه الناس. فـ gzip وBrotli يعملان بإيجاد التكرار، وملفاتُ PNG وJPEG وWebP مضغوطةٌ أصلاً — فلم يبقَ فيها تكرارٌ يُذكَر، وbase64 لا يضيف شيئاً منه. وعملياً تسترجع نحو عُشر الثلث، لا الثلثَ كلَّه. (وملفُّ SVG هو الحالةُ المعاكسة، والقسمُ التالي عنه.)

**ويكفّ عن كونه ملفاً.** وهذه هي الكلفةُ التي لا تظهر في أي قياس يُرجَّح أن تأخذه، وهي التي تهمّ عند الحجم:

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

وعتباتٌ تقريبية، وهي حيث تتغيّر النصيحة لا حيث يفعل المتصفحُ شيئاً مختلفاً: دون نحو 2 كيلوبايت هو مكسبٌ صريح؛ وحتى نحو 10 كيلوبايتات ما زال يستحقّ عادةً لشيء في كل صفحة؛ وبعد 50 كيلوبايتاً هو خطأٌ بلا رسالة خطأ. و[الأداة](https://abox.tools/ar/تحويل-الصورة-إلى-base64/) تقول لك في أي نطاق تحطّ كلُّ نتيجة، وعددُ المحارف بجانبه.

![بطاقة الناتج: قاعدة CSS تحوي عنوان بيانات بترميز base64، وبجانبها حجم الملف الأصلي وحجم الترميز.](https://abox.tools/screens/embed-an-image-in-css/output.webp)

النسخة المرمّزة أكبر بنحو الثلث من الملف الذي جاءت منه. هذه هي الكلفة التي يتحدث عنها هذا القسم، وهي مكتوبة بدل أن تُترك لتُكتشَف.

## لا ترمّز ملف SVG بـ base64 أبداً

وهذا أشيعُ خطأ واحد في الصور المضمَّنة، ويقع فيه المصدِّرون وملحقاتُ البناء بقدر ما يقع فيه الناس.

ملفُّ SVG نصّ. والعنوانُ يحمل نصّاً أصلاً. وليس ما يلزم تهريبُه إلا حفنةُ محارف — `%` و`#` و`<` و `>` وعلامةُ التنصيص التي لففته بها — وكلُّ ما عداها يمكن تركُه كما هو بالضبط. وترميزُه على ذلك الوجه يعطيك عنواناً أقصرَ نموذجياً بنحو الخُمس من base64 للملف نفسه، وهو يُضغَط بعدها كالنصّ لا كالضجيج.

وهو كذلك يظل مقروءاً:

```
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E...");
```

فتستطيع رؤية `viewBox`. وتستطيع تغيير لون الملء في محرِّرك دون فكّ ترميز شيء. ورمّز الملفَّ نفسه بـ base64 فيصير جداراً من الحروف لن يلمسه أحدٌ أبداً بعدها. و[الصورة إلى Data URI](https://abox.tools/ar/تحويل-الصورة-إلى-base64/) تفعل هذا آلياً لكل ما يتبيّن أنه SVG، وفيها مربّعُ تأشير لسلسلة الأدوات النادرة التي تصرّ على `;base64`.

## خطأُ التنصيص الذي لا يكسر إلا ملفات SVG

تسمح CSS بكتابة `url()` بلا علامات تنصيص، وذلك في اسم ملف عادي حسن:

```
background-image: url(logo.png);
```

وافعل الشيء نفسه بملف SVG مرمَّزٍ بالنسبة المئوية فينكسر. فرمزُ `url()` غيرُ المنصَّص ينتهي عند أول مسافة أو قوس أو علامة تنصيص أو محرف تحكّم — وملفُّ SVG مملوءٌ بالمسافات، بين كل خاصيتين وكل رقمين في مسار. فيصير التصريحُ عندئذ باطلاً، وCSS تُسقِط التصريحات الباطلة بصمت، فلا تحصل على خلفية ولا على خطأ.

والعلاجُ علاماتُ التنصيص، في كل مرة:

```
background-image: url("data:image/svg+xml,%3Csvg ... %3E");
```

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

## نوعُ الوسيط لا بدّ أن يكون صحيحاً

عنوانُ data URI يعلن نوعه هو، والمتصفحُ يأخذه على كلمته. وليس ثمّة تراجعٌ باستشمام النوع كما في ملف مجلوب: فقل `image/png` عن شيء هو JPEG حقاً فلا تُرسَم الصورة، وبلا رسالة في أي موضع نافع.

وذلك يهمّ لأن امتدادات الملفات تكذب. فالصورةُ المصدَّرة بصيغة JPEG والمسمّاةُ `logo.png` شيءٌ عاديٌّ أن تجده على قرص. أما البايتاتُ الأولى القليلة من ملف صورة فتقول ما هو بلا لبس — فلكل صيغة توقيع — فينبغي للأداة أن تقرأ الملف لا اسمه. والتي هنا تفعل، وتقول لك حين يختلف الاثنان.

وصيغتان جديرتان بالمعرفة لأنهما تفشلان على وجه محيّر. **HEIC**، وهي ما يصوّر به iPhone، و**TIFF**، وهي ما تنتجه الماسحات، كلتاهما تصنعان عناوين data URI صحيحةً تماماً لا يرسمها أيُّ متصفح إلا Safari. فالعنوانُ ليس مكسوراً؛ بل الصيغةُ ببساطة ليست ممّا يدعمه الويب. حوّل أولاً.

## البياناتُ الوصفية التي لم تقصد نشرها

عنوانُ data URI نسخةٌ من الملف، بايتاً ببايت. ولا شيء يُفَكُّ ويُرمَّز من جديد، وذلك هو المقصودُ عادةً — فلا تُفقَد جودة — لكنه يعني كذلك أن كلَّ شيء آخر في الملف يأتي معه.

والصورةُ الخارجةُ من هاتف توّاً تحمل EXIF: إحداثياتِ GPS حيث التُقِطت، والطابعَ الزمني، وطرازَ الكاميرا وكثيراً رقمَها التسلسلي. وقد يكون ذلك 30 كيلوبايتاً من الملف. ومضمَّناً، يصير 40 كيلوبايتاً من base64 في ورقة أنماطك، على المسار الحرج لكل صفحة — وعنوانَ منزل مودَعاً في مستودع، في صورة لن يخطر لأحد أن ينظر فيها أبداً.

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

## أين تضعه، متى صار عندك

إن ظهرت الصورةُ في قاعدة واحدة، فضع العنوان في تلك القاعدة. وإن ظهرت في أكثر من واحدة — والأيقوناتُ تفعل عادةً، متى عددت حالة التحويم والسمة الداكنة — فأعلنها مرةً خاصيةً مخصَّصة:

```
:root {
  --icon-search: url("data:image/svg+xml,%3Csvg ... %3E");
}

.search-field { background-image: var(--icon-search); }
.search-button::before { content: var(--icon-search); }
```

فعنوانٌ بـ 3 كيلوبايتات ملصوقٌ في أربع قواعد هو 12 كيلوبايتاً من ورقة الأنماط وأربعةُ مواضع تحرّرها حين تتغيّر الأيقونة. والخاصيةُ المخصَّصة واحدةٌ من كلٍّ. وهي كذلك الشكلُ الذي يجعل السمات تعمل: أعد تعريف `--icon-search` داخل استعلام وسيط فيتبعه كلُّ استعمال له.

ولوسم `<img>` بدل CSS، ضمّن `width` و `height`. فالصورةُ المضمَّنة تُحمَّل فوراً، فالمقاسُ الناقص إزاحةُ تخطيط تحدث أسرع من أن تُرى وتُحسَب عليك مع ذلك. والاستثناءُ SVG: فالتي لا تحمل إلا `viewBox` ليس لها مقاسٌ بالبكسل خاصٌّ بها، وكتابةُ افتراض المتصفح ⁦300×150⁩ على الوسم تثبّت صورةً قابلةً للقياس عند مقاس لم يخترْه أحد.

واترك `alt` فارغاً إلا أن يكون عندك شيءٌ صادقٌ تضعه فيه. فأنت وحدك تعرف أتحمل الصورةُ معنىً أم هي زينة، والوصفُ المخمَّنُ من اسم ملف أسوأُ لمن يستعمل قارئة شاشة من ألا يكون ثمّة وصفٌ أصلاً.

![بطاقة الشكل: أزرار تختار ما ينبغي أن يخرج، قاعدة خلفية CSS أو وسم img أو العنوان مجردًا، ومفتاح بين base64 وSVG كما هو.](https://abox.tools/screens/embed-an-image-in-css/shape.webp)

الوجهة تقرر ما يخرج، ولذلك يُسأل عنها أولًا بدل تركها تمرينًا في النسخ واللصق.

## حين يكون الجوابُ «لا تفعل»

إن كانت الصورةُ فوق نحو 50 كيلوبايتاً مرمَّزةً، فالتضمينُ هو الأداة الخاطئة ولا يصلحه أيُّ قدر من العناية بالترميز. والبدائلُ، بترتيب ما يستحقّ التجربة:

- **صغّرها.** فمعظمُ الصور الأكبر من أن تُضمَّن أكبرُ من اللازم عموماً. و[ضاغط الصور](https://abox.tools/ar/ضغط-الصور/) سيوصل صورةً فوتوغرافية إلى حجم تسمّيه، و [أداةُ تغيير حجم الصور](https://abox.tools/ar/تغيير-حجم-الصورة/) ستنزّل الأبعاد بالبكسل إلى ما يستعمله التخطيطُ فعلاً — وهو المشكلةُ الحقيقية كثيراً جداً.
- **أعد رسمها ملفَّ SVG.** فالأيقونةُ المصدَّرة ملفَّ PNG بـ 40 كيلوبايتاً كثيراً ما تكون ملفَّ SVG بتسعمئة بايت. وليس ذلك فرقَ ضغط، بل فرقُ صيغة، وهو يحلّ كذلك مشكلة الشاشات عالية الكثافة.
- **اتركها ملفاً وحمّلها مسبقاً.** `<link rel="preload" as="image">` يبدأ الجلب فوراً دون نقل البايتات إلى المسار الحرج. فينال معظمَ منفعة التضمين ولا شيء من كلفة التخزين المؤقت.

## لا شيء من هذا يحتاج رفعاً

ترميزُ ملف بـ base64 حساب. وهو دالّتان عند المتصفح منذ البداية — `btoa` و`encodeURIComponent` — وليس ثمّة سببٌ تقنيٌّ البتة لأن تسافر صورةٌ إلى خادم وتعود لتُكتَب على وجه آخر. وأيُّ محوِّل يرفع ملفك ليفعل هذا يرفعه لأسبابه هو لا لأسبابك أنت.

و[الأداة هنا](https://abox.tools/ar/تحويل-الصورة-إلى-base64/) لا ترسله إلى أي مكان: `Content-Security-Policy` الخاصةُ بالصفحة تسمّي كل عنوان يحقّ لها الاتصال به، ولا واحدٌ منها يخصّ هذا الموقع. حمّل الصفحة، واقطع الاتصال بالإنترنت، ورمّز شيئاً رغم ذلك إن كنت تفضّل أن تتحقّق على أن يُقال لك. [هل رفع الملفات إلى المحوِّلات على الإنترنت آمن؟](https://abox.tools/ar/أدلة/هل-رفع-الملفات-آمن/) يعرض ثلاثة فحوص أخرى تستطيع إجراءها على أي أداة.