أبعاد img في HTML: كيف تحجز مكان الصورة قبل تحميلها؟

قد تبدأ قراءة فقرة ثم تدفعها صورة إلى أسفل عند ظهورها. يساعد حجز مساحة الصورة قبل تحميلها على إبقاء موضع النص مستقرًا؛ فالمتصفح يستطيع حساب نسبة الصورة من سمتَي width وheight قبل وصول ملفها. [1]

اجمع أبعاد HTML الصحيحة مع عرض متجاوب وارتفاع تلقائي لحجز المساحة قبل التحميل. [1] [2]

الخلاصة السريعة

سمتا width وheight في HTML عددان صحيحان دون وحدة؛ لصورة أبعادها 1200×800 نكتب القيمتين نفسيهما، ولا نضع px داخل السمتين. [1]
استخدم max-width: 100% وheight: auto لتصغير الصورة بنسبة صحيحة؛ واحتفظ بسمات الأبعاد لحجز المكان. [4] [2]
النسبة الأولية الخاطئة قد تغيّر الارتفاع؛ وتُستعاد النسبة الطبيعية بعد التحميل. [3] [2]
راقب موضع النص قبل تحميل الصورة وبعده؛ تصحيحها وحدها لا يعالج جميع أسباب انتقال المحتوى. [2]

اكتب أبعاد الملف في HTML

سمتا width وheight في HTML عددان صحيحان دون وحدة؛ لصورة أبعادها 1200×800 نكتب القيمتين نفسيهما، ولا نضع px داخل السمتين. [1]

لا تكتب قياس الشاشة مكان قياس الملف في هذا المثال. نستخدم صورة نقطية واحدة ذات أبعاد معروفة ونسبة عرض إلى ارتفاع 3:2. تعطي السمتان معلومة مبكرة، بينما يحدد التنسيق حجم عرضها داخل الصفحة. النص البديل يصف محتواها للقارئ الذي لا يراها. [1]

مرّر الشيفرة أفقيًا عند الحاجة.

<img class="article-photo" src="sample.png"
     width="1200" height="800"
     alt="ثلاثة مستطيلات ملونة متجاورة">

دع العرض يتكيف والارتفاع يتبعه

استخدم max-width: 100% وheight: auto لتصغير الصورة بنسبة صحيحة؛ واحتفظ بسمات الأبعاد لحجز المكان. [4] [2]

عند عرض حاوية 300px يصبح الارتفاع 200px؛ وعند 450px يصبح 300px. يتغير العرض في الصفحة، ويحتفظ الملف بأبعاده. [4] [2]

مرّر الشيفرة أفقيًا عند الحاجة.

.article-photo {
  display: block;
  max-width: 100%;
  height: auto;
}

لماذا لا تكفي أرقام عشوائية؟

النسبة الأولية الخاطئة قد تغيّر الارتفاع؛ وتُستعاد النسبة الطبيعية بعد التحميل. [3] [2]

لو كتبت 1200×1200 لملفنا 1200×800، فعرض 300px يحجز ارتفاع 300px ثم يصححه إلى 200px. نفترض ارتفاعًا تلقائيًا دون aspect-ratio مفروضة عبر CSS؛ صحح الأبعاد بدل تثبيت ارتفاع خاطئ. [3] [2]

تحقق من المكان أثناء التحميل

راقب موضع النص قبل تحميل الصورة وبعده؛ تصحيحها وحدها لا يعالج جميع أسباب انتقال المحتوى. [2]

ضع فقرة تحت الصورة، وأبطئ الشبكة وعطّل الكاش ثم أعد التحميل. قارن موضع الفقرة، وافحص الخطوط والإعلانات والمحتوى المتأخر إن تحركت. مثالنا لصورة واحدة؛ نسب picture المختلفة تحتاج معالجة خاصة. [2]

المصادر ومتابعة القراءة

أُعدّ هذا المقال بصياغة عربية أصلية بالاستناد إلى المصادر أعلاه، وهو مدخل تمهيدي إلى الموضوع. اقرأ منهجية المحتوى وحدوده.