برای اینکه بدانید یک عکس یا تصویر چگونه در صفحات وب تعریف می‌شود و تگ عکس به چه روشی آدرس‌دهی شده یا ابعاد آن مشخص می‌شود با ما همراه باشید.
ابتدا در یک درایو دلخواه مثل D: یک پوشه ایجاد می‌کنیم به نام projects. قرار است از این پس تمامی پروژه‌های HTML خود را داخل این پوشه تعریف کنیم. پس آدرس پروژه‌های ما چیزی مثل این خواهد بود :
D:\\projects\
حال باید فایل‌های عکس خود را در این مسیر قرار دهیم. از آنجایی که ممکن است انواع و اقسام فایل‌ها مثل عکس، ویدئو، فایل‌های صوتی و … در پروژه داشته باشیم بهتر است آنها را طبقه‌بندی کنیم. برای این کار یک پوشه با نام دلخواه مثلا images در داخل پوشه projects تعریف کنیم.
پس آدرس آن پوشه به شکل زیر خواهد بود :
D:\\projects\images\
حال، بهتر است یک فایل html در داخل پوشه projects بسازیم. مثلا project1.html. آدرس فایل ما به شکل زیر خواهد بود :
D:\\projects\project1.html
چیزی که تا اینجا پیش رفتیم، مانند تصویر زیر خواهد بود.
حال، یک فایل عکس مثل jpg، jpeg، png یا هر فرمت دیگری در داخل پوشه images قرار می‌دهیم. مثلا car.webp.
نکته : اکثر مرورگرها از بسیاری از قالب‌های عکس مانند gif یا webp هم پشتیبانی می‌کنند.
اکنون زمان کدنویسی است. در داخل فایل HTML که ایجاد کردیم، علاوه بر تگ‌های بدنه اصلی یعنی html، head، title و body تگ img را تعریف می‌کنیم. این تگ داخل body نوشته می‌شود. داریم :
<!doctype html>
<html>
<head>
<title>پروژه 1</title>
</head>
<body>
<img />
</body>
</html>صفت‌های عکس
صفت src
تگ img یک تگ تنها است. پس تگ پایان ندارد. حال برای اینکه بتوانیم عکس موجود را بارگذاری کنیم باید یک صفت src (به معنی منبع source) برای تگ تعریف کنیم. شکل کلی آن به صورت زیر است :
<img src="آدرس مسیر و نام کامل فایل" />
از آنجایی که پوشه images در کنار فایل project1.html قرار گرفته و به اصطلاح هم‌مسیر هستند، کافی است آدرس فایل عکس را به صورت نسبی زیر تعریف کنیم :
<img src="./images/car.webp" />
نقطه‌ای که در ابتدای آدرس قید شده به معنای همین مسیر (همین پوشه) است که مفهوم آن این است که پوشه images و فایل project1.html هر دو از فرزندان پوشه projects هستند. (می‌توان از قرار دادن این نقطه و کاراکتر / بعد از آن صرف نظر کرد). پس آدرس به شکل زیر نیز صحیح است :
<img src="images/car.webp" />
اکنون فایل را ذخیره کرده و با مرورگر باز کنید.
صفت alt
تگ img غیر از صفت src، دارای چند صفت مهم دیگر نیز می‌باشد. غیر از بسیاری از صفت‌های فراگیر (Global Attribs) تعدادی صفت اختصاصی نیز دارد.
برای مطالعه بیشتر صفت‌ها اینجا را کلیک کنید.
صفت alt برای این است که اگر بنا به هر دلیلی فایل عکس یافت نشد (مثل حذف شدن فایل)، چه متنی به جای عکس قرار گیرد. همچنین از نظر سئو بهتر است مقدار این صفت با محتوای عکس همخوانی و تناسب داشته باشد. از طرفی موتورهای جستجو بر اساس این صفت می‌توانند تصاویر وب‌سایت‌های مختلف را شناسایی و ایندکس کنند.
<img src="images/car.webp" alt="خودرو برقی دلوریان" />
ابعاد تصویر
همچنین این تگ دو صفت ارتفاع (height) و عرض (width) را نیز دارد که یک مقدار عددی دریافت می‌کنند و ابعاد عکس را بر اساس پیکسل مشخص می‌کنند. در این حالت، با تغییر صفحه مرورگر (در حالت ریسپانسیو دسکتاپ یا موبایل)، این ابعاد ثابت خواهد ماند. بسیاری از مرورگرها از درصد % نیز پشتیبانی می‌کنند که ابعاد نسبی تعریف می‌کند. یعنی ابعاد تصویر چه درصدی از عرض صفحه مرورگر خواهد بود. در این حالت، این ابعاد با تغییر ابعاد صفحه مرورگر متغیر می‌شوند.
<img src="images/car.webp" alt="خودرو برقی دلوریان" width="50%" height="400" />
در کد بالا، ارتفاع به صورت 400 پیکسل و ثابت تعریف شده است ولی عرض به صورت 50 درصد از عرض صفحه مرورگر است که نسبی می‌باشد.
فرض کنید تگ تصویر ما درون یک تگ نگهدارنده (Container) مانند div باشد. اگر ابعاد عکس مثل عرض آن نسبی (%) تعریف شده باشد، آنگاه عرض عکس درصدی از عرض تگ نگهدارنده خواهد بود، نه عرض صفحه مرورگر.
نکته : بهتر است از دستورات CSS برای تعریف ابعاد تصاویر و عکس‌ها استفاده شود.
تگ‌های مرتبط
علاوه بر تگ img، تعدادی تگ نیز هستند که می‌توان در کنار تگ عکس تعریف کرد که شامل تگ figure و figcaption می‌باشند.
تگ figure
این تگ، یک نوع نگهدارنده برای تگ img است.
تگ figcaption
برای تعریف توضیحات در زیر عکس، از این تگ استفاده می‌شود.
<figure> <img src="images/car.webp" alt="خودرو برقی دلوریان" width="50%" height="400" /> <figcaption>تصویری از خودرو برقی دلوریان که در سال 2024 معرفی خواهد شد.</figcaption> </figure>
