تصاویر در HTML | سکان آکادمی

برای نمایش تصویر در 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" />