الصور والنص البديل

01عنصر الصورة

الوسم img خاصو مصدر للصورة ونص بديل مناسب. width وheight كيساعدو المتصفح يحجز البلاصة قبل ما تتحمّل الصورة.

<img src="images/kitchen.webp"
     alt="Oak kitchen with a white island"
     width="1200" height="800">

02كتب Alt Text مفيد

وصف المعلومة اللي كتزيدها الصورة. إلا كانت غير للزينة، خلّي alt خاوي. ما تديرش تعليمات مهمة غير داخل الصورة.

<img src="divider.svg" alt="">
<figure>
  <img src="desk.webp" alt="Wall-mounted oak desk" width="900" height="600">
  <figcaption>A compact workspace.</figcaption>
</figure>

03حمّل غير اللي محتاج

نقص الحجم ديال الصور وضغطهم قبل النشر. استعمل lazy loading للصور اللي لتحت، ماشي بالضرورة لصورة الـ Hero. وبـ CSS تقدر تخلي الصورة فحدود العنصر ديالها.

<img src="gallery.webp" alt="Finished shelving"
     width="900" height="600" loading="lazy">
<style>
  img { max-width: 100%; height: auto; }
</style>

04جرّب براسك

بدّل الوصف تحت الصورة. إلا كانت صورة حقيقية، شرح فـ alt شنو كتبيّن.

باش تزيد تفهم

تقدر ترجع لـ شروحات MDN و معيار HTML Living Standard باش تفهم أكثر وتشوف التوصيات الجديدة.