تصاویر در HTML
بوکمارکها شما را در متن جابهجا میکنند. تصاویر عکس، نمودار و لوگو را به صفحه میآورند. ابزار پایهٔ HTML عنصر خالی img است: در کاربرد عادی متن را بین تگ باز و بسته نمیپیچد. با src به فایل اشاره میکند و با alt جایگزین متنی میدهد.
img چه میکند؟
img یک عنصر replaced است. مرورگر منبع را از src میگیرد و در چیدمان رسم میکند. اگر فایل گم یا مسدود باشد، بازدیدکننده هنوز به alt مفید نیاز دارد (یا برای تزئین خالص، alt="" صریح). مسیرها همان قواعد نسبی و مطلق لینک و فاویکون را دنبال میکنند.
پاسخ مستقیم
بنویسید <img src="path/to/file.jpg" alt="توضیح کوتاه">.
src— محل فایل تصویرalt— جایگزین متنی وقتی تصویر دیده نمیشود یا بار نمیشود
widthوheightاختیاری میتوانند فضا رزرو کنند و پرش چیدمان را کم کنند. بهجای فرستادن فایل چندمگابایتی به هر یادگیرنده روی اتصال کند، عکسهای خیلی بزرگ را فشرده کنید.
ویژگیهای اصلی در یک نگاه
📊 ویژگیهای رایج img
| ویژگی | کار |
|---|---|
| src | مسیر یا URL فایل تصویر |
| alt | جایگزین متنی / معنی در بافت |
| width | اشارهٔ اختیاری عرض نمایش (پیکسل در مثالهای HTML) |
| height | اشارهٔ اختیاری ارتفاع نمایش |
| loading | اشارهٔ اختیاری lazy-loading در مرورگرهای مدرن (بعداً پیشرفتهتر) |
یک تصویر اطلاعرسان پایه
تصاویر را در پوشهٔ روشنی مثل images/ بگذارید و در alt آنچه مهم است را توصیف کنید.
تصویر پایه
html<img src="images/team.jpg" alt="Three teammates at a desk">خواندن نمونهٔ پایه
src="images/team.jpg"مسیر نسبی از فایل HTML استaltمعنی عکس را برای خوانندهٔ صفحه و بارگذاری شکستخورده توضیح میدهد- در نوشتن عادی HTML تگ بستهٔ جداگانهٔ
</img>نیست — ویژگیها روی همان تگ واحدند - اگر پوشه یا نام فایل غلط باشد تصویر میشکند حتی وقتی تگ عالی به نظر برسد
اشارههای width و height
دادن width و height کمک میکند مرورگر قبل از رسیدن بایتها فضا رزرو کند. وقتی میتوانید نسبت تصویر واقعی را حفظ کنید تا کشیده به نظر نرسد. کوچک کردن عکس بزرگ فقط با ویژگیهای HTML همچنان فایل بزرگ را دانلود میکند — داراییها را برای وب تغییر اندازه و فشرده کنید.
تصویر با width و height
html<img src="images/logo.png" alt="Site logo" width="120" height="40">تصاویر تزئینی و alt خالی
وقتی تصویر اطلاعاتی نمیافزاید — تزئین خالصی که متن کنارش پوشش داده — از alt="" استفاده کنید. ویژگی را حذف نکنید. حذف alt و نوشتن alt="" فرق دارند: خالی یعنی «برای درخت دسترسپذیری نادیدهام بگیر»، گم اغلب یعنی «نشانهگذاری اشتباه شده».
تصویر تزئینی با alt خالی
html<img src="images/divider.png" alt="" width="240" height="8">alt را برای معنی بنویسید، نه اسپم
alt خوب جایگزین کوتاه تصویر در بافت است: آنچه کاربر بینا برای فهم صفحه نیاز دارد. alt بد کلیدواژه میچپاند، کپشن کنار تصویر را تکرار میکند، یا بدون محتوا «image» میگوید. اگر نمودار است خلاصهٔ نتیجه را بگویید؛ اگر لوگو همان لینک خانه است، نام دسترسپذیر معمولاً از alt تصویر یا متن اطراف میآید — صادق بمانید.
فرمتهایی که مبتدی میبیند
JPEG (.jpg) به عکسها میآید. PNG به گرافیک با لبهٔ تیز یا شفافیت. SVG به آیکون و لوگوی ساده وقتی مقیاس شفاف میخواهید (الگوهای بیشتر SVG بعداً). فرمتی که به محتوا میخورد انتخاب کنید، بعد وزن فایل را معقول نگه دارید.
تمرین در ویرایشگر
- یک
.jpgیا.pngکوچک در پوشهٔimagesبگذارید. - یک
imgباsrcنسبی درست وaltواضح اضافه کنید. - width و height همخوان با نسبت تصویر بگذارید.
- عمداً یکبار مسیر را خراب کنید — تأیید کنید
alt(یا UI تصویر شکسته) به دیدن خطا کمک میکند، بعد مسیر را درست کنید. - یک تصویر تزئینی با
alt=""اضافه کنید و تأیید کنید ویژگی را کامل حذف نکردهاید.
اشتباهات رایج
- نبود
altروی تصاویر اطلاعرسان - پوشه یا املای غلط در
src - فرستادن عکس چندمگابایتی دوربین وقتی فایل کوچکتر وب کافی است
- رفتار با
altمثل انبار کلیدواژه - کشیدن لوگو با width/height ناسازگار
- قاطی کردن
src(تصاویر) باhref(لینکها)
خلاصه
- تصاویر از
imgباsrcوaltاستفاده میکنند - مسیرها همان قواعد فایلهای دیگر سایت را دنبال میکنند
altدسترسپذیری و بار شکستخورده را پشتیبانی میکند؛alt=""فقط برای تزئین خالص- width و height میتوانند فضا رزرو کنند؛ هنوز اندازهٔ واقعی فایل را بهینه کنید
- فرمت معقول انتخاب کنید و دانلود را سبک نگه دارید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود