تگ <img>: نمایش بصری در صفحات وب
تگ img عنصری کلیدی در HTML است که برای جاسازی تصاویر در صفحات وب به کار میرود. این تگ یک عنصر تهی (Empty Element) محسوب میشود، به این معنی که هیچ تگ بستهای ندارد و تمام اطلاعات مورد نیاز خود را از طریق خصوصیات (attributes) دریافت میکند.
خصوصیت src (Source): دروازه ورود تصویر
کاربرد: خصوصیت src مهمترین بخش تگ <img> است و آدرس (URL) فایل تصویر را مشخص میکند.
انواع آدرسدهی:
آدرس نسبی:
- src="images/boat.gif" → تصویر در پوشه images قرار دارد
- src="/images/boat.gif" → تصویر در ریشه سایت است
- src="../images/boat.gif" → تصویر در پوشه والد قرار دارد
آدرس مطلق:
- src="http://example.com/image.jpg"
- src="https://site.com/logo.png"
فرمتهای تصویری: JPG، PNG، GIF، SVG، WebP
خصوصیت alt (Alternative Text): توصیف تصویر
خصوصیت alt برای دسترسپذیری (Accessibility) و سئو (SEO) بسیار مهم است.
کاربردها:
- در صورت لود نشدن تصویر، متن نمایش داده میشود
- برای کاربران نابینا توسط Screen Reader خوانده میشود
- به موتورهای جستجو کمک میکند تصویر را درک کنند
مثالهای alt:
- ضعیف: alt="عکس"
- خوب: alt="قایق بزرگ در ساحل هنگام غروب"
- لوگو: alt="لوگوی شرکت Example"
تعیین ابعاد با width و height
کاربرد: مشخص کردن اندازه تصویر قبل از بارگذاری کامل
مزایا:
- جلوگیری از بهم ریختگی صفحه
- افزایش سرعت رندر
مثال:
عامرتجارت خلیج فارس
نکته: بهتر است ابعاد تصویر قبل از استفاده بهینهسازی شود.
Lazy Loading
با استفاده از ویژگی loading="lazy" تصاویر فقط هنگام نیاز بارگذاری میشوند.
عامرتجارت خلیج فارس
مشکل نمایش تصویر (آیکون ضربدر)
دلایل:
- اشتباه در مسیر فایل
- حساسیت به حروف بزرگ و کوچک
- حذف شدن تصویر
- دسترسی نداشتن به فایل
استفاده از figure و figcaption
برای ساخت تصاویر همراه با توضیح از figure استفاده میشود.
عامرتجارت خلیج فارس
ریسپانسیو (Responsive) بودن تصاویر
در طراحی وب مدرن، تصاویر باید ریسپانسیو باشند یعنی در اندازههای مختلف صفحه درست نمایش داده شوند و کشیده یا فشرده نشوند.
نکات مهم:
- اگر عرض تصویر درصدی باشد (مثل 100%) در همه اندازههای صفحه هماهنگ میشود
- برای تصاویر کوچک مثل آیکنها از px استفاده میشود
- برای تصاویر بزرگ نباید height ثابت داد اگر width درصدی است
مثال:
عامرتجارت خلیج فارس
تمرین
یک صفحه HTML بساز و موارد زیر را در آن پیادهسازی کن:
- حداقل 3 تصویر با تگ <img> قرار بده
- یکی از تصاویر را ریسپانسیو کن (عرض 100%)
- یکی از تصاویر را به صورت آیکن کوچک با px نمایش بده
- برای همه تصاویر alt مناسب بنویس
- برای یکی از تصاویر lazy loading فعال کن
- از figure و figcaption برای یکی از تصاویر استفاده کن
نکته مهم تمرینی:
برای دیدن نتیجه ریسپانسیو بودن، سایز مرورگر را تغییر بده (Resize کن) و بررسی کن که تصاویر چگونه واکنش نشان میدهند.
در موبایل و دسکتاپ تست کن و ببین کدام تصویر تغییر اندازه میدهد و کدام ثابت میماند.