علامة HTML الخاصة بالصورة

اكتشف أساسيات العمل مع الصور و HTMLpictureالعلامة وكيفية جعلها سريعة الاستجابة

يمنحنا HTML امتداد الملفpictureالعلامة ، والتي تؤدي وظيفة مشابهة جدًا لـsrcsetسمة من سماتimgعلامة ، والاختلافات دقيقة للغاية.

انت تستخدمpictureعندما تريد تغييره تمامًا بدلاً من مجرد تقديم نسخة أصغر من الملف. أو تقديم شكل صورة مختلف.

أفضل حالة استخدام وجدتها هي عند تقديم صورة WebP ، وهو تنسيق لا يزال غير مدعوم على نطاق واسع. في الpictureعلامة تحدد قائمة بالصور ، وسيتم استخدامها بالترتيب ، لذلك في المثال التالي ، ستستخدم المتصفحات التي تدعم WebP الصورة الأولى ، والرجوع إلى JPG إذا لم يكن كذلك:

<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="An image">
</picture>

الsourceتحدد العلامة تنسيقًا واحدًا (أو أكثر) للصور. الimgالعلامة هي البديل في حال كان المتصفح قديمًا جدًا ولا يدعم امتدادpictureبطاقة شعار.

في الsourceعلامة بالداخلpictureيمكنك إضافةmediaالسمة لتعيين استعلامات الوسائط.

المثال الذي يتبع نوعًا من الأعمال مثل المثال أعلاه معsrcset:

<picture>
  <source media="(min-width: 500w)" srcset="dog-500.png" sizes="100vw">
  <source media="(min-width: 800w)" srcset="dog-800.png" sizes="100vw">
  <source media="(min-width: 1000w)" srcset="dog-1000.png"	sizes="800px">
  <source media="(min-width: 1400w)" srcset="dog-1400.png"	sizes="800px">
  <img src="dog.png" alt="A dog image">
</picture>

لكن هذه ليست حالة الاستخدام الخاصة بها ، لأنه كما ترى ، فهي أكثر تفصيلاً.

الpictureالعلامة حديثة ولكنها الآنأيدبواسطة جميع المتصفحات الرئيسية باستثناء Opera Mini و IE (جميع الإصدارات).

تحميل مجانيكتيب HTML


المزيد من دروس html:


Tech Wiki على الإنترنت!