Markdown: صيغة الصور في Markdown والنص البديل
الصورة تساوي ألف كلمة — في Markdown، إدراج صورة يستغرق سطرًا واحدًا فقط من الصيغة، لكن القيام بذلك بشكل جيد يتطلب القليل من المعرفة.
1. ما ستتعلمه
- أساسيات صيغة الصور في Markdown
- أهمية النص البديل وكيفية كتابته بشكل جيد
- إضافة روابط إلى الصور (انقر للانتقال)
- الإدارة المركزية بالصور المرجعية
- أفضل ممارسات الصور (الحجم، التنسيق، CDN)
2. قصة حقيقية لمدون تقني
(1) نقطة الألم: صور لا تُحمل
يدير جيمس مدونة تقنية ويتضمن عدة لقطات شاشة في كل مقالة. في البداية استضاف الصور على خادمه الخاص، لكن الروابط استمرت في التعطل — انتقل الخادم عدة مرات وأصبحت جميع الروابط القديمة معطلة. الأسوأ من ذلك، أن أسماء ملفات الصور كانت بأحرف غير إنجليزية، مما منع بعض المتصفحات من تحميلها. اشتكى القراء من "الصور المكسورة"، وارتفع معدل الارتداد إلى 70%.
(2) الحل: استخدام CDN للصور واصطلاحات التسمية
نقل جيمس جميع الصور إلى خدمة استضافة صور مبنية على CDN (مثل Cloudinary)، وتحول إلى أسماء ملفات إنجليزية، وكتب نصًا بديلاً وصفيًا لكل صورة. كما استخدم الصور المرجعية في Markdown لإدارة جميع عناوين URL مركزيًا. بعد التبديل، تحسن وقت تحميل الصور بمقدار 3 أضعاف وانخفض معدل الارتداد إلى 35%.
3. أساسيات صيغة الصور
(1) الصور المضمنة
صيغة الصور مشابهة جدًا للروابط، مع إضافة ! في المقدمة:
| الجزء | الوصف | مثال |
|---|---|---|
![نص بديل] |
النص المعروض عند فشل تحميل الصورة | ![لقطة شاشة] |
(رابط الصورة) |
عنوان ملف الصورة | (https://example.com/img/logo.png) |
(2) ضبط حجم الصورة
Markdown القياسي لا يدعم تعيين أبعاد الصورة. استخدم وسم HTML <img> عند الحاجة:
<img src="logo.png" width="200" alt="تعيين العرض إلى 200px">
<img> فقط عندما تحتاج فعلاً إلى التحكم في الحجم.
▶ مثال: إدراج صورة محلية
(3) أهمية النص البديل (Alt Text)
يخدم النص البديل ثلاثة أغراض حاسمة:
| الغرض | الوصف |
|---|---|
| إمكانية الوصول | تقرأ قارئات الشاشة النص البديل للمستخدمين ضعاف البصر |
| SEO | تستخدم محركات البحث النص البديل لفهم محتوى الصورة |
| احتياطي | عند فشل تحميل الصورة، يظهر النص البديل بدلاً منها |
❌ نص بديل سيء:
✅ نص بديل جيد:
![] لكن لا ينبغي حذفه تمامًا أبدًا.
5. الصور كروابط
(1) الصور القابلة للنقر
غلف صورة داخل صيغة الرابط لجعلها قابلة للنقر:
[](fullsize-image.jpg)
[](https://example.com)
تفصيل البنية:
[ ← بداية الرابط
 ← الصورة (المنطقة القابلة للنقر)
] ← نهاية الرابط
(https://example.com) ← هدف الانتقال
▶ مثال: استخدامات عملية لروابط الصور
## شارات المشروع
[](https://github.com/user/repo/actions)
[](https://www.npmjs.com/package/package-name)
## لقطات شاشة المنتج
| الميزة | لقطة الشاشة |
|:-----|:-----|
| لوحة التحكم | [](img/dashboard-full.png) |
| الإعدادات | [](img/settings-full.png) |
6. الصور المرجعية
مثل الروابط المرجعية، يمكن إدارة عناوين URL للصور مركزيًا:
في النص:
![شعار الشركة][logo]
![لقطة شاشة المنتج][screenshot1]
مُعرفة في الأسفل:
[logo]: https://cdn.example.com/logo.png "شعار الشركة"
[screenshot1]: https://cdn.example.com/screenshots/v2/dashboard.png "لقطة شاشة لوحة التحكم الجديدة"
7. أفضل ممارسات الصور
(1) اختيار تنسيقات الملفات
| التنسيق | الأنسب لـ | المزايا | العيوب |
|---|---|---|---|
| PNG | لقطات الشاشة، الأيقونات، الخلفيات الشفافة | بدون فقدان، جودة عالية | حجم ملف كبير |
| JPEG | الصور الفوتوغرافية، الصور ذات الألوان المعقدة | حجم ملف صغير | ضغط مع فقدان |
| SVG | الأيقونات، الشعارات، الرسوم التوضيحية | قابل للتكبير بلا حدود، ملفات صغيرة جدًا | ليس للصور الفوتوغرافية |
| GIF | الرسوم المتحركة البسيطة | توافق كبير | ألوان محدودة، ملفات كبيرة |
| WebP | بديل PNG/JPEG | أصغر بنسبة 25-35% | بعض المتصفحات القديمة غير مدعومة |
(2) نصائح تحسين الصور
1. التحكم في الحجم: اجعل الصور الفردية أقل من 500 كيلوبايت، واستهدف 100-300 كيلوبايت
2. استخدام CDN: تسريع التحميل العالمي
3. أسماء ملفات إنجليزية: logo.png ✅ lo#go.png ❌
4. مجلدات منطقية: assets/images/ أو img/
5. كتابة نص بديل: يجب أن تحتوي كل صورة على نص بديل وصفي
./assets/image.png) آمنة، لكن إذا أشرت إلى مضيف صور خارجي، فتأكد من أن الخدمة مستقرة وموثوقة.
▶ مثال: الصور في توثيق منتج
## عرض واجهة المستخدم
### صفحة تسجيل الدخول
### لوحة التحكم
> **ملاحظة:** انقر على الصورة لعرض النسخة كاملة الدقة
[](img/dashboard-full.png)
8. مثال كامل: عرض الصور في README مشروع
بنية README لتطبيق رائع:
سطر العنوان: # تطبيق رائع + صور شارات
جدول لقطات الشاشة: الهاتف المحمول | سطح المكتب
أمر التثبيت: npm install awesome-app
مرجع الشعار: [logo]: https://cdn.example.com/logo.png
النتيجة المتوقعة: README غني بصريًا على GitHub يحتوي على شعار للمشروع وشارات وعرض لقطات شاشة وشعار مُدار مركزيًا معرف في نهاية المستند.
❓ أسئلة شائعة
<img src="url" width="400" alt="وصف">../assets/image.png للصور داخل المستودع. يمكنك أيضًا استخدام عناوين URL مطلقة لاستضافة الصور الخارجية..svg مباشرة في Markdown. يمكنك أيضًا تضمين كود مصدر SVG في Markdown (مدعوم من بعض المحللات).📖 ملخص
- صيغة الصور
تختلف عن صيغة الروابط بـ!واحد فقط - النص البديل ضروري لإمكانية الوصول و SEO — صف ما تظهره الصورة وما تفعله
- الصورة كرابط:
[](رابط)تجعل الصورة قابلة للنقر - الصور المرجعية تركز إدارة عناوين URL لتسهيل الصيانة والترحيل
- فضّل استضافة CDN وأسماء الملف��ت الإنجليزية وأحجام الملفات المضبوطة
- عندما تحتاج إلى التحكم في الحجم، عد إلى وسم HTML
<img>
📝 تمارين
-
أساسي: أدرج صورة في Markdown (أي صورة عبر الإنترنت أو محلية) مع نص بديل وصفي. ثم عطّل تحميل الصور في متصفحك للتحقق من ظهور النص البديل بشكل صحيح.
-
متوسط: أنشئ مشروعًا صغيرًا حيث يحتوي README.md على إعداد "انقر على الصورة المصغرة لعرض الصورة الكاملة" — تعرض الصفحة صورًا صغيرة، والنقر عليها يفتح النسخة كاملة الحجم في علامة تبويب جديدة.
-
متقدم: أنشئ "معرض لقطات شاشة مواقع" باستخدام الصور المرجعية مع 5 لقطات شاشة على الأقل وعناوين URL معرفة في أسفل المستند. ثم حاول تحويل لقطات الشاشة هذه إلى تنسيق WebP وقارن الفرق في حجم الملف.
