قسمت ۹ – درج تصویر با تگ img و متن alt

تگ img در html یک المان خالی (بدون تگ پایانی) است که با اتریبیوت src یک تصویر را در صفحه نمایش می‌دهد و با اتریبیوت alt یک متن جایگزین برای کسانی که تصویر را نمی‌بینند فراهم می‌کند. یک img کامل و درست حداقل چهار اتریبیوت دارد: src، alt، width و height.

نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵

در این قسمت یاد می‌گیرید alt در html را برای تصویرهای محتوایی، تزئینی و لینک‌دار درست بنویسید، اندازه تصویر html را طوری تنظیم کنید که صفحه هنگام بارگذاری نپرد، فرمت مناسب (WebP، AVIF، SVG، JPEG، PNG) را انتخاب کنید و با تگ <figure> برای تصویر کپشن بگذارید. مسیرهای src همان چیزی است که در قسمت ۸: آدرس‌دهی نسبی و مطلق یاد گرفتید.

تگ img در html چیست و چطور یک تصویر اضافه کنیم؟

تگ img در html یک تصویر را در محل خودش در متن قرار می‌دهد؛ src آدرس فایل تصویر و alt متن جایگزین آن است. img یک المان «جایگزین‌شونده» (Replaced Element) است؛ یعنی محتوای آن از فایل بیرونی می‌آید و خود تگ متنی ندارد.

<img
  src="images/cafe-interior.webp"
  alt="فضای داخلی کافه با میزهای چوبی و نور گرم عصرگاهی"
  width="1200"
  height="800"
>

چون img المان خالی (Void) است، تگ پایانی ندارد و نوشتن /> در انتهای آن در HTML لازم نیست. اتریبیوت‌ها را همان‌طور که در قسمت ۴: تگ، المان و اتریبیوت دیدید، با فاصله از هم جدا می‌کنیم؛ برای خوانایی بیشتر می‌توانید هر اتریبیوت را در یک خط بنویسید.

اتریبیوت	کار	الزامی؟	نکته
src	آدرس فایل تصویر	بله	مسیر نسبی، ریشه‌ای یا مطلق
alt	متن جایگزین	بله (از نظر دسترس‌پذیری)	برای تصویر تزئینی خالی: alt=""
width / height	ابعاد ذاتی تصویر به پیکسل	به‌شدت توصیه می‌شود	عدد بدون واحد؛ جلوی پرش صفحه را می‌گیرد
loading	زمان بارگذاری	خیر	lazy یا eager (پیش‌فرض)
decoding	نحوه رمزگشایی تصویر	خیر	async، sync، auto
fetchpriority	اولویت دانلود	خیر	high برای تصویر اصلی بالای صفحه
srcset / sizes	نسخه‌های مختلف برای صفحه‌های مختلف	خیر	موضوع قسمت ۱۰
title	راهنمای کوتاه هنگام hover	خیر	جایگزین alt نیست

alt در html چیست و چطور نوشته می‌شود؟

alt در html متن جایگزین تصویر است که صفحه‌خوان آن را برای کاربران نابینا می‌خواند، اگر تصویر بارگذاری نشود به‌جای آن نمایش داده می‌شود و به موتور جستجو کمک می‌کند محتوای تصویر را بفهمد. alt خوب توصیف کوتاه همان اطلاعاتی است که تصویر منتقل می‌کند.

طبق مستندات MDN درباره تگ img، alt باید محتوای تصویر را توصیف کند، نه وجود تصویر یا نام فایل را؛ و برای تصویر تزئینی باید مقدار خالی (alt="") داشته باشد تا صفحه‌خوان از آن عبور کند. دقت کنید که alt خالی با نبودن alt فرق دارد: اگر alt را کلاً ننویسید، بعضی صفحه‌خوان‌ها نام فایل را می‌خوانند.

<!-- تصویر محتوایی: توصیف محتوا -->
<img src="chart-sales.png"
     alt="نمودار فروش ماهانه؛ بیشترین فروش در اسفند"
     width="800" height="450">

<!-- تصویر تزئینی: alt خالی -->
<img src="divider-flower.svg" alt="" width="200" height="20">

<!-- تصویر داخل لینک: alt مقصد را توصیف می‌کند -->
<a href="/">
  <img src="logo.svg" alt="صفحه اصلی کافه نمونه" width="140" height="48">
</a>

یک سؤال ساده برای نوشتن alt

از خودتان بپرسید: «اگر این تصویر را تلفنی برای کسی توضیح بدهم، چه می‌گویم؟» همان جمله کوتاه، alt شماست. اگر جواب «هیچ، فقط تزئین است» بود، alt خالی بگذارید. اگر تصویر داخل لینک است، alt باید بگوید لینک به کجا می‌رود. اگر تصویر یک نمودار یا اینفوگرافیک پرجزئیات است، alt خلاصه نتیجه را بگوید و جزئیات کامل در متن صفحه بیاید.

<!-- اشتباه: alt شامل «تصویر» و نام فایل -->
<img src="IMG_2034.jpg" alt="عکس IMG_2034">

<!-- اشتباه: پر کردن alt با کلمه کلیدی -->
<img src="cake.jpg" alt="کیک کیک تولد خرید کیک ارزان کیک تهران">

<!-- درست: توصیف کوتاه و دقیق -->
<img src="cake.jpg" alt="کیک تولد شکلاتی دو طبقه با تزئین توت‌فرنگی">

نکته: کلمه‌هایی مثل «تصویر»، «عکس» یا «عکسی از» را در ابتدای alt ننویسید؛ صفحه‌خوان خودش اعلام می‌کند که با یک تصویر روبه‌روست. alt را هم با کلمه کلیدی پر نکنید؛ گوگل در راهنمای سئو تصاویر Google Search Central پر کردن alt با کلمات کلیدی را تجربه کاربری بد و احتمالاً اسپم می‌داند.

اندازه تصویر html را چطور تنظیم کنیم؟

اندازه تصویر html با دو کار متفاوت تنظیم می‌شود: اتریبیوت‌های width و height در HTML که ابعاد ذاتی تصویر و نسبت ابعاد آن را به مرورگر اعلام می‌کنند، و CSS که اندازه نمایشی تصویر را در طرح‌بندی تعیین می‌کند. هر دو لازم است.

وقتی width و height را بنویسید، مرورگر قبل از دانلود تصویر نسبت ابعاد را محاسبه می‌کند و فضای آن را رزرو می‌کند؛ نتیجه این است که متن زیر تصویر بعد از بارگذاری پایین نمی‌پرد. این پرش همان چیزی است که شاخص CLS (Cumulative Layout Shift) در Core Web Vitals اندازه می‌گیرد و طبق web.dev مقدار خوب آن ۰٫۱ یا کمتر است.

برای اینکه تصویر در صفحه‌های کوچک از ظرف خودش بیرون نزند، این قاعده CSS ساده را به همه تصویرها بدهید. خاصیت‌های منطقی max-inline-size و block-size معادل max-width و height هستند و در صفحه‌های راست‌چین هم درست کار می‌کنند:

img {
  max-inline-size: 100%;
  block-size: auto;
}

با این قاعده، تصویر هیچ‌وقت عریض‌تر از ظرفش نمی‌شود و ارتفاعش متناسب کوچک می‌شود، در حالی که width و height در HTML همچنان نسبت ابعاد را برای رزرو فضا مشخص می‌کنند. بزرگ‌کردن یک تصویر کوچک با CSS یا کوچک‌کردن یک تصویر ۴۰۰۰ پیکسلی برای نمایش در ۴۰۰ پیکسل هر دو اشتباه است؛ تصویر را از قبل در اندازه مناسب آماده کنید. نسخه‌های چندگانه برای صفحه‌نمایش‌های مختلف موضوع قسمت بعد است.

فرمت webp و avif یا jpg و png؛ کدام را انتخاب کنیم؟

برای عکس‌ها و تصویرهای پیکسلی، فرمت‌های WebP و AVIF معمولاً با کیفیت مشابه حجم کمتری از JPEG و PNG دارند و MDN استفاده از آن‌ها را توصیه می‌کند؛ برای لوگو، آیکون و نمودار برداری هم SVG بهترین انتخاب است چون در هر اندازه‌ای واضح می‌ماند.

فرمت	نوع	شفافیت	بهترین کاربرد	نکته
AVIF	پیکسلی، فشرده‌سازی قوی	بله	عکس‌های محصول و بنر	پشتیبانی جدیدتر؛ با picture جایگزین بگذارید
WebP	پیکسلی	بله	تقریباً همه عکس‌های وب	پشتیبانی گسترده در مرورگرهای امروزی
JPEG	پیکسلی، با افت کیفیت	خیر	عکس، به‌عنوان نسخه جایگزین	حجم بیشتر از WebP با کیفیت مشابه
PNG	پیکسلی، بدون افت	بله	اسکرین‌شات و تصویر با متن ریز	برای عکس حجم زیادی دارد
SVG	برداری	بله	لوگو، آیکون، نمودار ساده	در هر اندازه‌ای واضح؛ کدِ قابل ویرایش
GIF	پیکسلی، ۲۵۶ رنگ	محدود	تقریباً هیچ	برای انیمیشن، ویدیو یا WebP متحرک بهتر است

طبق راهنمای فرمت‌های تصویر MDN، پشتیبانی AVIF هنوز به اندازه WebP قدیمی و گسترده نیست؛ پس اگر از AVIF استفاده می‌کنید، با تگ picture یک نسخه WebP یا JPEG هم به‌عنوان جایگزین بگذارید. روش این کار را در قسمت ۱۰ قدم‌به‌قدم می‌بینید.

تصویر SVG با تگ img

فایل SVG را می‌توانید مثل هر تصویر دیگری با img اضافه کنید. آیکون‌هایی که کنار متن یک دکمه قرار می‌گیرند تزئینی‌اند و alt خالی می‌خواهند، چون متن دکمه معنا را منتقل می‌کند؛ اما آیکونی که تنها محتوای یک لینک یا دکمه است باید alt معنادار داشته باشد:

<!-- SVG به‌عنوان فایل جدا -->
<img src="icons/cart.svg" alt="سبد خرید" width="24" height="24">

<!-- آیکون تزئینی کنار متن -->
<button type="button">
  <img src="icons/plus.svg" alt="" width="16" height="16">
  افزودن به سبد
</button>

تگ figure و figcaption برای چه استفاده می‌شوند؟

تگ figure یک محتوای مستقل مثل تصویر، نمودار یا قطعه کد را همراه با توضیح آن گروه‌بندی می‌کند و تگ figcaption کپشن (زیرنویس قابل‌مشاهده) آن را می‌سازد. کپشن برای همه کاربران دیده می‌شود، اما alt فقط جایگزین تصویر است؛ پس این دو تکرار هم نیستند.

<figure>
  <img src="images/espresso.webp"
       alt="فنجان اسپرسو با کرمای طلایی روی میز سنگی"
       width="1000" height="667">
  <figcaption>اسپرسوی تک‌خاستگاه با دانه عربیکای اتیوپی</figcaption>
</figure>

در این مثال alt می‌گوید در تصویر چه دیده می‌شود و figcaption اطلاعات تکمیلی (نوع دانه) را می‌دهد. اگر کپشن دقیقاً همان توصیف تصویر را می‌گوید، alt را کوتاه‌تر بنویسید تا کاربر صفحه‌خوان یک جمله را دو بار نشنود. ویرایشگر بلوکی وردپرس هم برای بلوک تصویر دقیقاً همین ساختار figure و figcaption را تولید می‌کند.

loading lazy و fetchpriority در تگ img چه کاری می‌کنند؟

اتریبیوت loading="lazy" دانلود تصویر را تا وقتی که کاربر به نزدیکی آن اسکرول کند به تعویق می‌اندازد و fetchpriority="high" به مرورگر می‌گوید یک تصویر مهم را زودتر از بقیه دانلود کند. ترکیب درست این دو، سرعت بارگذاری صفحه را بهتر می‌کند. سرعت فقط یک بخش از کیفیت سایت است؛ در راهنمای کامل طراحی سایت جایگاه آن را در کل پروژه توضیح داده‌ایم.

<!-- تصویر اصلی بالای صفحه (احتمالاً LCP): بارگذاری زودهنگام -->
<img src="hero.webp" alt="ویترین شیرینی‌های تازه"
     width="1600" height="900" fetchpriority="high">

<!-- تصاویر پایین صفحه: بارگذاری تنبل -->
<img src="gallery-1.webp" alt="کیک گردویی برش‌خورده"
     width="800" height="600" loading="lazy" decoding="async">

قاعده مهم این است که تصویر اصلی بالای صفحه (که معمولاً بزرگ‌ترین المان قابل‌مشاهده و همان LCP است) را هرگز lazy نکنید؛ چون نمایش آن را عقب می‌اندازد. lazy را برای تصویرهای پایین صفحه، گالری‌ها و تصویرهای داخل محتوای طولانی بگذارید. MDN یادآوری می‌کند که بارگذاری تنبل فقط وقتی جاوااسکریپت فعال است اعمال می‌شود. جزئیات بیشتر بارگذاری تنبل را در قسمت ۱۰ می‌بینید.

از تجربه تیم siloow: تصویرها در سایت‌های فروشگاهی و کافه

در سایت‌های فروشگاهی ووکامرس و وب‌اپلیکیشن سفارش آنلاین کافه و شیرینی‌فروشی که تیم siloow ساخته است، تصویر محصول بیشترین حجم صفحه را دارد. دو درس اصلی که گرفتیم این بود: اول، مدیر سایت معمولاً عکس مستقیم گوشی را با ابعاد چندهزار پیکسلی آپلود می‌کند؛ پس در قالب، نسخه‌های کوچک‌تر به‌طور خودکار ساخته و به فرمت مدرن تبدیل می‌شوند و فقط همان نسخه لازم به مرورگر می‌رسد. دوم، در کارت‌های محصول همیشه width و height ثابت می‌گذاریم تا لیست محصولات هنگام بارگذاری نپرد. برای alt هم یک فیلد مشخص در فرم محصول قرار دادیم و اگر خالی بماند، نام محصول به‌عنوان alt پیش‌فرض استفاده می‌شود تا هیچ تصویر محصولی بدون متن جایگزین نماند.

اشتباهات رایج در استفاده از تگ img

• ننوشتن alt یا نوشتن نام فایل در آن.
• پر کردن alt با کلمه کلیدی تکراری.
• نگذاشتن width و height و پرش صفحه هنگام بارگذاری.
• آپلود تصویر چندمگابایتی و کوچک کردنش فقط با CSS.
• lazy کردن تصویر اصلی بالای صفحه.
• استفاده از تصویر برای نمایش متن مهم (مثل تخفیف یا شماره تلفن) که قابل انتخاب و خواندن نیست.
• استفاده از img برای تصویر پس‌زمینه کاملاً تزئینی که بهتر است با CSS اضافه شود.

چه زمانی نباید از تگ img استفاده کرد؟

اگر تصویر فقط تزئین طرح است و هیچ اطلاعاتی ندارد (مثل بافت پس‌زمینه یا یک شکل گرافیکی)، معمولاً بهتر است با background-image در CSS اضافه شود. اگر به نسخه‌های مختلف تصویر برای صفحه‌های مختلف یا فرمت‌های جایگزین نیاز دارید، img تنها کافی نیست و باید از srcset یا تگ picture استفاده کنید. و برای متن، هرگز تصویر متن نگذارید؛ متن واقعی هم سریع‌تر است، هم قابل جستجو و هم قابل ترجمه.

تمرین این قسمت

1. یک صفحه منوی کافه با سه تصویر نوشیدنی بسازید که همه width، height و alt توصیفی داشته باشند.
2. یک تصویر تزئینی (مثلاً جداکننده گل) با alt خالی اضافه کنید.
3. لوگوی کافه را داخل یک لینک به صفحه اصلی بگذارید و alt مناسب لینک بنویسید.
4. یکی از تصویرها را داخل figure با figcaption قرار دهید.
5. تصویر اصلی بالای صفحه را با fetchpriority=”high” و تصویرهای پایین را با loading=”lazy” تنظیم کنید.

جمع‌بندی و خلاصه

• تگ img در html با src تصویر را نمایش می‌دهد و تگ پایانی ندارد.
• alt در html محتوای تصویر را توصیف می‌کند؛ برای تصویر تزئینی alt خالی بگذارید.
• width و height را همیشه بنویسید تا صفحه هنگام بارگذاری نپرد.
• برای عکس WebP یا AVIF و برای آیکون و لوگو SVG را ترجیح دهید.
• تصویرهای پایین صفحه را lazy و تصویر اصلی بالای صفحه را با اولویت بالا بارگذاری کنید.

برای مرور قسمت‌های قبل به صفحه دوره کدپرس سر بزنید. اگر برای کسب‌وکارتان سایتی سریع با تصویرهای بهینه می‌خواهید، خدمات طراحی سایت siloow را ببینید. در قسمت بعد، «قسمت ۱۰ – تصاویر ریسپانسیو با picture، srcset و lazy loading»، یاد می‌گیرید برای هر صفحه‌نمایش تصویر مناسب خودش را بفرستید.

منابع

• MDN: The Image Embed element (img)
• MDN: Image file type and format guide
• Google Search Central: Image SEO best practices
• W3C WAI: An alt Decision Tree

سوالات متداول درباره تگ img در html