علامة HTML `img`

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

يمكن عرض الصور باستخدام ملفimgبطاقة شعار.

تقبل هذه العلامة أsrcالسمة التي نستخدمها لتعيين مصدر الصورة:

<img src="image.png" />

يمكننا استخدام مجموعة كبيرة من الصور. الأكثر شيوعًا هي PNG و JPEG و GIF و SVG ومؤخرًا WebP.

يتطلب معيار HTML ملفaltأن تكون حاضرة لوصف الصورة. يتم استخدام هذا بواسطة برامج قراءة الشاشة وأيضًا بواسطة روبوتات محركات البحث:

<img src="dog.png" alt="A picture of a dog" />

يمكنك ضبط ملفwidthوheightلتعيين المساحة التي سيشغلها العنصر ، بحيث يمكن للمتصفح حسابها ولا يغير التنسيق عند تحميله بالكامل. يأخذ قيمة عددية ، معبراً عنها بالبكسل.

<img src="dog.png" alt="A picture of a dog" width="300" height="200" />

تستجيب الصور باستخدام ملفاتsrcset

الsrcsetتسمح لك السمة بتعيين الصور المتجاوبة التي يمكن للمتصفح استخدامها اعتمادًا على كثافة البكسل أو عرض النافذة ، وفقًا لتفضيلاتك. بهذه الطريقة ، يمكنه فقط تنزيل الموارد التي يحتاجها لعرض الصفحة ، دون تنزيل صورة أكبر إذا كانت موجودة على جهاز محمول ، على سبيل المثال.

فيما يلي مثال ، حيث نقدم 4 صور إضافية لأربعة أحجام مختلفة للشاشة:

<img src="dog.png"
	alt="A picture of a dog"
	srcset="dog-500.png 500w,
	  		 dog-800.png 800w,
			 dog-1000.png 1000w,
			 dog-1400.png 1400w">

في الsrcsetنحن نستخدم الwقياس للإشارة إلى عرض النافذة.

نظرًا لأننا نقوم بذلك ، نحتاج أيضًا إلى استخدامsizesينسب:

<img src="dog.png"
	alt="A picture of a dog"
	sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
	srcset="dog-500.png 500w,
	  		 dog-800.png 800w,
			 dog-1000.png 1000w,
			 dog-1400.png 1400w">

في هذا المثال(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxسلسلة فيsizesتصف السمة حجم الصورة فيما يتعلق بإطار العرض ، بشروط متعددة مفصولة بفاصلة.

حالة الوسائطmax-width: 500pxيحدد حجم الصورة بالاقتران مع عرض منفذ العرض. باختصار ، إذا كان حجم النافذة <500 بكسل ، فإنه يعرض الصورة بنسبة 100٪ من حجم النافذة.

إذا كان حجم النافذة أكبر ولكن <900px، فإنه يعرض الصورة بنسبة 50٪ من حجم النافذة.

وإذا كانت أكبر من ذلك ، فإنها تعرض الصورة بدقة 800 بكسل.

الvw unit of measure can be new to you, and in short we can say that 1 vwهو 1٪ من عرض النافذة ، لذلك100vwهو 100٪ من عرض النافذة.

موقع مفيد لإنشاء ملفاتsrcsetوالصور الأصغر تدريجيًا هيhttps://responsivebreakpoints.com/.

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


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