وثائق HTML قابلة للتشغيل: إدراج صورة

Q: كيف أضيف صورة في HTML؟

استخدم الوسم مع الملف في src والوصف في alt: . الوسم ليس له وسم إغلاق.

Q: كيف أغيّر حجم الصورة في HTML؟

اضبط السمتين width وheight بالبكسل، أو استخدم CSS مثل img { width: 300px; height: auto; }. ضبط بُعد واحد وترك الآخر auto يحافظ على التناسب.

Q: لماذا لا تظهر الصورة في HTML؟

غالبًا يكون مسار src خاطئًا: فهو نسبي إلى ملف HTML، وأسماء الملفات حساسة لحالة الأحرف في معظم الخوادم، ومسار مثل C:\photos\cat.jpg موجود على حاسوبك فقط. افتح عنوان الصورة مباشرة في المتصفح لتتحقق منه.

Q: ما هو النص البديل alt في HTML؟

السمة alt بديل نصي للصورة. تقرؤه قارئات الشاشة، وتعرضه المتصفحات حين يفشل تحميل الصورة. صِف ما تُظهره الصورة أو ما تفعله، واستخدم alt="" للصور الزخرفية فقط.

Q: كيف أجعل الصورة متجاوبة؟

أضف إليها max-width: 100%; height: auto; في CSS. عندها تتقلص الصورة لتناسب الحاوية الضيقة ولا تكبر أبدًا بعد عرضها الطبيعي.

كيف تضيف صورة في HTML

استخدم العنصر <img>. src هي ملف الصورة، وalt تصفها، وwidth وheight تحددان حجمها بالبكسل. <img> عنصر فارغ: ليس له وسم إغلاق.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Image</title>
</head>
<body>
  <img
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3Cpath d='M0 150 Q80 90 160 140 T300 130 V200 H0Z' fill='%2316a34a'/%3E%3C/svg%3E"
    alt="Green hills under a yellow sun"
    width="300"
    height="200">
</body>
</html>

src هنا صورة SVG صغيرة مكتوبة داخل العنوان (data URI) كي يعمل المثال من دون اتصال. في موقع حقيقي تكون src مسارًا إلى ملف:

`src`	يحمّل
`photo.jpg`	`photo.jpg` في المجلد نفسه الذي فيه ملف HTML
`images/photo.jpg`	من المجلد `images` المجاور لملف HTML
`../photo.jpg`	من المجلد الأعلى بمستوى واحد
`/images/photo.jpg`	من المجلد `images` في جذر الموقع
`https://example.com/photo.jpg`	من موقع آخر (قد يُنقل أو يختفي)

المسارات حساسة لحالة الأحرف في معظم خوادم الويب: Photo.JPG وphoto.jpg ملفان مختلفان.

النص البديل alt

نص alt يقوم مقام الصورة. تقرؤه قارئات الشاشة بصوت عالٍ، ويعرضه المتصفح حين لا تُحمَّل الصورة. الصورتان هنا تشيران إلى ملفين غير موجودين:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alt text</title>
  <style>
    img { border: 2px dashed #e5e7eb; }
  </style>
</head>
<body>
  <p><img src="missing-logo.png" alt="Coddy logo" width="160" height="60"></p>
  <p><img src="missing-chart.png" alt="" width="160" height="60"> (decorative, empty alt)</p>
</body>
</html>

الأولى تعرض نصها البديل «Coddy logo» مكان الصورة. والثانية تحمل alt فارغًا، فلا يوجد نص لعرضه، وتتخطاها قارئات الشاشة. كيف تكتب alt:

صِف ما يهم في السياق. «مخطط أعمدة: تضاعفت المبيعات من مارس إلى يونيو» يقول أكثر من «مخطط».
لا تبدأ بـ «صورة لـ». قارئات الشاشة تعلن أصلًا أنها صورة.
استخدم alt="" للزخرفة (فاصل، زخرفة في الخلفية) كي تتخطاها قارئات الشاشة.
لا تحذف alt أبدًا. من دونها تقرأ بعض قارئات الشاشة اسم الملف بدلًا منها، مثل «IMG underscore 4032 dot jpg».
في الصورة داخل رابط، صِف الوجهة: <a href="/"><img src="logo.svg" alt="Home"></a>.

تحديد حجم الصورة

السمتان width وheight بالبكسل ومن دون وحدة. أحجام CSS تتغلب عليهما. أكثر CSS فائدة للصور هو هذا الزوج، الذي يتيح للصورة أن تتقلص مع حاويتها من دون أن تتمدد أبعد من عرضها الطبيعي:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Image size</title>
  <style>
    .box { width: 180px; border: 2px solid #2563eb; margin-bottom: 12px; }
    .responsive { max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <div class="box">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3C/svg%3E"
      alt="Overflowing" width="300" height="200">
  </div>
  <div class="box">
    <img class="responsive" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3C/svg%3E"
      alt="Fits" width="300" height="200">
  </div>
</body>
</html>

الصورة الأولى تحتفظ بعرضها 300 بكسل فتفيض خارج الصندوق الذي عرضه 180 بكسل. والثانية تتقلص إلى 180 في 120 مع الحفاظ على نسبتها 3:2. وheight: auto مهمة: من دونها ستُبقي السمة height="200" الصورة بارتفاع 200 بكسل فتنضغط.

اكتب دائمًا width وheight في HTML، حتى للصور المتجاوبة. يستخدمهما المتصفح لحجز المساحة الصحيحة قبل وصول الملف، فلا يقفز النص الذي تحتها إلى الأسفل عند تحميل الصورة.

القص بـ object-fit

عندما يجب أن تملأ الصورة صندوقًا بشكل مختلف (صورة رمزية مربعة من صورة عريضة، بطاقات بارتفاع متساوٍ)، تحدد object-fit ما يحدث للجزء الزائد:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>object-fit</title>
  <style>
    body { font-family: system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: 12px; }
    figure { margin: 0; text-align: center; }
    img { width: 120px; height: 120px; border: 2px solid #111827; display: block; }
  </style>
</head>
<body>
  <figure>
    <img style="object-fit: fill" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>fill</figcaption>
  </figure>
  <figure>
    <img style="object-fit: contain" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>contain</figcaption>
  </figure>
  <figure>
    <img style="object-fit: cover" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>cover</figcaption>
  </figure>
</body>
</html>

المصدر صورة بنسبة 2:1 لدائرة، معروضة في صناديق مربعة:

fill (الافتراضية) تمدّ الصورة لتملأ الصندوق، فتصبح الدائرة بيضاوية.
contain تُدخل الصورة كاملة داخل الصندوق، تاركة شرائط فارغة.
cover تملأ الصندوق وتقص الجزء الفائض، فتبقى الدائرة مستديرة. وهي الخيار المعتاد للصور المصغرة والصور الرمزية.

object-position تختار الجزء الذي يبقى ظاهرًا عند القص، مثل object-position: top للصور الشخصية.

التعليقات بـ figure وfigcaption

التعليق التوضيحي الذي ينتمي إلى صورة يوضع في <figcaption>، ويوضع الاثنان داخل <figure>. هذا يربطهما معًا لقارئات الشاشة، ويمكن تنسيق figure كوحدة واحدة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Figure</title>
  <style>
    figure { display: inline-block; margin: 0; padding: 8px; border: 1px solid #e5e7eb; }
    img { display: block; }
    figcaption { font: 14px system-ui, sans-serif; color: #4b5563; padding-top: 6px; }
  </style>
</head>
<body>
  <figure>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Crect width='240' height='120' fill='%23e5e7eb'/%3E%3Crect x='20' y='70' width='40' height='40' fill='%232563eb'/%3E%3Crect x='80' y='40' width='40' height='70' fill='%232563eb'/%3E%3Crect x='140' y='20' width='40' height='90' fill='%232563eb'/%3E%3C/svg%3E"
      alt="Bar chart: signups rose each quarter" width="240" height="120">
    <figcaption>Figure 1. Signups per quarter.</figcaption>
  </figure>
</body>
</html>

التعليق لا يحل محل alt. alt تقول ما تُظهره الصورة، والتعليق يضيف ما يحتاجه القارئ المبصر أيضًا.

الفجوة تحت الصورة

تقع الصورة على خط أساس النص مثل الحرف، فتترك حاويتها تحتها مساحة لأذيال حروف مثل g وy. الحد يجعل الفجوة مرئية:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Gap under image</title>
  <style>
    div { display: inline-block; border: 2px solid #dc2626; margin-inline-end: 12px; }
    .fixed img { display: block; }
  </style>
</head>
<body>
  <div><img alt="" width="100" height="60" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Crect width='100' height='60' fill='%232563eb'/%3E%3C/svg%3E"></div>
  <div class="fixed"><img alt="" width="100" height="60" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Crect width='100' height='60' fill='%232563eb'/%3E%3C/svg%3E"></div>
</body>
</html>

في الحد الأول شريط أبيض تحت الصورة الزرقاء. display: block على الصورة (الصندوق الثاني) تزيله، وكذلك vertical-align: middle إذا كان يجب أن تبقى الصورة سطرية.

التحميل الكسول والمصادر المتجاوبة

للصور الموجودة في أسفل صفحة طويلة، تؤخر loading="lazy" التنزيل حتى يقترب القارئ منها بالتمرير:

<img src="gallery-7.jpg" alt="Harbor at dusk" width="800" height="533" loading="lazy">

لا تستخدم التحميل الكسول للصورة الرئيسية في أعلى الصفحة، فهو يؤخر الجزء الذي يراه القراء أولًا.

لإرسال ملفات أصغر إلى الشاشات الصغيرة، اذكر عدة أحجام في srcset وأخبر المتصفح بالعرض الذي ستُعرض به الصورة عبر sizes. والمتصفح يختار الملف:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Harbor at dusk" width="800" height="533">

ويذهب <picture> أبعد من ذلك فيعرض صيغًا مختلفة، مع <img> كبديل احتياطي يحمل أيضًا alt:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Harbor at dusk" width="800" height="533">
</picture>

صيغ الصور

الصيغة	مناسبة لـ
JPEG	الصور الفوتوغرافية
PNG	لقطات الشاشة، والصور التي تحتاج حوافًا حادة أو شفافية
WebP	الصور والرسومات، أصغر من JPEG وPNG، مع الشفافية
AVIF	الصور الفوتوغرافية، وعادةً أصغر من WebP
SVG	الشعارات والأيقونات والمخططات، وتتكيف مع أي حجم بلا تشويش
GIF	الرسوم المتحركة القصيرة، مع أن `<video>` صامتًا متكررًا أصغر بكثير

أخطاء شائعة

مسار من حاسوبك الخاص، مثل src="C:\Users\me\photo.jpg". يعمل على جهازك فقط. ضع الملف بجانب ملف HTML واستخدم مسارًا نسبيًا.
غياب alt. كل <img> يحتاج إليها، فارغة للزخرفة.
ضبط width وheight معًا في CSS بقيم ذات شكل مختلف. تتمدد الصورة. اضبط واحدًا واترك الآخر auto، أو استخدم object-fit.
غياب السمتين width وheight، فتقفز الصفحة أثناء تحميل الصور.
ملفات ضخمة مصغّرة بـ CSS. الصورة ذات 4000 بكسل المعروضة بعرض 400 بكسل تُنزَّل كاملة. غيّر حجمها، أو استخدم srcset.
وسم إغلاق </img>. <img> عنصر فارغ، لا يوجد ما يُغلق.

الصور في الأمثلة أعلاه صور SVG صغيرة مضمّنة. لتجرب الشيفرة نفسها مع صورك، الصقها في ساحة تجربة HTML.

الأسئلة الشائعة

كيف أضيف صورة في HTML؟

استخدم الوسم <img> مع الملف في src والوصف في alt: <img src="photo.jpg" alt="A red bicycle" width="600" height="400">. الوسم <img> ليس له وسم إغلاق.

كيف أغيّر حجم الصورة في HTML؟

اضبط السمتين width وheight بالبكسل، أو استخدم CSS مثل img { width: 300px; height: auto; }. ضبط بُعد واحد وترك الآخر auto يحافظ على التناسب.

لماذا لا تظهر الصورة في HTML؟

غالبًا يكون مسار src خاطئًا: فهو نسبي إلى ملف HTML، وأسماء الملفات حساسة لحالة الأحرف في معظم الخوادم، ومسار مثل C:\photos\cat.jpg موجود على حاسوبك فقط. افتح عنوان الصورة مباشرة في المتصفح لتتحقق منه.

ما هو النص البديل alt في HTML؟

السمة alt بديل نصي للصورة. تقرؤه قارئات الشاشة، وتعرضه المتصفحات حين يفشل تحميل الصورة. صِف ما تُظهره الصورة أو ما تفعله، واستخدم alt="" للصور الزخرفية فقط.

كيف أجعل الصورة متجاوبة؟

أضف إليها max-width: 100%; height: auto; في CSS. عندها تتقلص الصورة لتناسب الحاوية الضيقة ولا تكبر أبدًا بعد عرضها الطبيعي.

لماذا توجد فجوة تحت الصورة؟

الصور سطرية افتراضيًا وتقع على خط أساس النص، وهذا يترك تحتها مساحة لأذيال الحروف. اضبط display: block على الصورة، أو vertical-align: middle، لإزالة الفجوة.

مفاهيم ذات صلة