برای نمایش تصویر در HTML، از تگ <img> استفاده می‌شود. این عنصر، تگ پایانی نداشته و فقط تگ ابتدایی دارد:
<img src="image.jpg" />تگ <img> دو ویژگی (attribute) اصلی دارد:
- src : آدرس (URL) تصویر را مشخص می کند.
- alt : یک متن جایگزین کوتاه مشخص می‌کند که تصویر را با کلمات توصیف می کند.
به عنوان مثال، اگر عکسی به نام "tree.jpg" در همان پوشه‌ی فایل HTML دارید، کد شما باید به شکل زیر باشد:
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="tree.jpg" alt="tree" />
</body>
</html>
⚠️ ویژگی src و alt برای تگ <img>، ضروری است.
تغییر اندازه تصویر
برای تعیین اندازه تصویر، از ویژگی‌های عرض (width) و ارتفاع (height) استفاده می شود.
مقدار این دو ویژگی را می توان بر حسب پیکسل (px) یا درصد مشخص کرد:
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="images/tree.jpg"
height="150px" width="150px" alt="" />
<br />
<img src="images/tree.jpg"
height="50%" width="50%" alt="" />
</body>
</html>
⚠️ بارگذاری تصاویر زمان‌بر است. استفاده از تصاویر بزرگ می‌تواند سرعت بارگذاری صفحه را کاهش دهد، بنابراین باید با احتیاط از آن‌ها استفاده شود.
border (خط مرزی) تصویر
به طور پیش فرض، یک تصویر هیچ حاشیه ای ندارد، اما می‌توان از ویژگی border در تگ تصویر برای ایجاد حاشیه در اطراف تصویر استفاده کرد:
<img src="images/tree.jpg"
height="150px" width="150px"
border="1px" alt="tree" />
