تصاویر در HTML: چرا سایت شما در گوگل رتبه نمی‌گیرد؟

سال‌ها پیش، وقتی اولین سایت عکاسی مشتری‌ام را تحویل دادم، مدیرش پیامی فرستاد که مرا غافلگیر کرد: «گالری ما در گوگل تصویر اصلاً دیده نمی‌شود.» ابتدا فکر کردم مشکل از محتوا یا سئوی گالری است. اما وقتی خروجی HTML را باز کردم، فهمیدم تمام تصاویر سایت با <img src="..."> خالی آپلود شده بودند — بدون alt، بدون ابعاد، بدون نسخه‌های ریسپانسیو، و بدون lazy loading. در واقع، تصاویر آن سایت نه به گوگل چیزی می‌گفتند و نه تجربه‌ی کاربری خوبی داشتند. آن پروژه، نگاه من به تصاویر در HTML را برای همیشه تغییر داد: تصویر در HTML، فقط یک تگ <img> نیست؛ یک تصمیم چندلایه است که روی سئو، سرعت سایت و دسترس‌پذیری به‌طور همزمان اثر می‌گذارد.

تگ <img> ساده‌ترین عنصر بصری HTML در ظاهر است اما پیچیده‌ترین در عمل. سه تعهد هم‌زمان دارد: به کاربر (که باید تصویر را سریع و با کیفیت ببیند)، به موتور جستجو (که باید محتوای تصویر را بفهمد) و به دسترس‌پذیری (که کاربران نابینا باید معنای تصویر را درک کنند). اگر در مسیر آموزش HTML از صفر هستید و مقالات تگ های پرکاربرد HTML و لینک ها در HTML را خوانده‌اید، این نوشته جزئیات عملی یکی از پرکاربردترین تگ‌های HTML را باز می‌کند.

چرا تصاویر در HTML یک تصمیم چندلایه هستند؟

تصاویر، بزرگ‌ترین بخش حجم یک صفحه‌ی وب مدرن هستند. به‌طور میانگین، حدود ۵۰٪ حجم یک صفحه‌ی وب را تصاویر تشکیل می‌دهند. این رقم، نشان می‌دهد تصمیم‌های مربوط به تصویر در HTML چه اثر مستقیمی روی کارایی سایت دارند. سه لایه‌ای که در پروژه‌ها روی آن‌ها متمرکز می‌شوم:

لایه‌ی سئو: موتورهای جستجو تصاویر را ایندکس می‌کنند و در نتایج جستجوی تصویری نمایش می‌دهند. در سایت‌هایی که گالری، محتوای آموزشی، فروشگاه یا نمونه‌کار دارند، Google Images می‌تواند یکی از مهم‌ترین کانال‌های ترافیک ارگانیک باشد. اگر تصاویر شما ساختار درست نداشته باشند، این کانال بسته می‌ماند. مطالعه‌ی این لایه در سئوی تصویر و سئوی درون‌صفحه آمده است.
لایه‌ی کارایی: تصاویر، مهم‌ترین عامل LCP (Largest Contentful Paint) در اکثر سایت‌های محتوایی و فروشگاهی هستند. یک تصویر شاخصِ حجیم که در بالای صفحه بارگذاری می‌شود، می‌تواند LCP را از ۲ ثانیه به ۵ ثانیه برساند. مطالعات نشان می‌دهند که هر ثانیه کندی، نرخ تبدیل را ۷٪ کاهش می‌دهد. مطالعه‌ی این لایه در Core Web Vitals چیست و بهینه‌سازی سرعت سایت آمده است.
لایه‌ی دسترس‌پذیری: کاربران نابینا، معنای تصویر را از طریق ویژگی alt می‌فهمند. اگر این ویژگی وجود نداشته باشد، screen readerها یا تصویر را نادیده می‌گیرند یا به‌جای توضیح معنادار، نام فایل را می‌خوانند. مطالعه‌ی این لایه در استانداردهای دسترس‌پذیری وب و WCAG چیست آمده است.

قاعده‌ای که در پروژه‌های خودم به‌کار می‌برم: هر تصویر باید از سه فیلتر عبور کند — آیا گوگل می‌تواند معنایش را بفهمد؟ آیا کاربر آن را سریع دریافت می‌کند؟ آیا کاربر نابینا معنایش را می‌فهمد؟ اگر پاسخ هر یک از این سه «نه» باشد، تصویر نیاز به بازبینی دارد.

تصویر در HTML، مثل پیام‌رسانِ چندزبانه است: به گوگل، به مرورگر و به کاربر نابینا باید به یک اندازه پیام برساند. اگر به یکی نرسانید، پیام شما ناقص است.

ساختار پایه‌ی تگ img

ساده‌ترین تگ تصویر در HTML:

<img src="photo.jpg" alt="توضیح تصویر">

اما این ساده‌ترین نسخه، برای یک سایت حرفه‌ای کافی نیست. نسخه‌ی کامل‌تر که در پروژه‌های خودم استفاده می‌کنم:

<img
  src="photo-800.webp"
  srcset="photo-400.webp 400w,
          photo-800.webp 800w,
          photo-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="توضیح دقیق و معنادار تصویر"
  width="800"
  height="450"
  loading="lazy"
  decoding="async">

نکات مهم در این ساختار:

src اجباری است: تنها ویژگی اجباری در تگ img. اگر این ویژگی نباشد، مرورگر نمی‌داند چه چیزی را بارگذاری کند.
alt هم اجباری است اما نه از نظر فنی: مرورگر بدون alt هم تصویر را نمایش می‌دهد، اما از نظر سئو، دسترس‌پذیری و اعتبارسنجی HTML، alt جزء اجباری است. جزئیات در بخش بعدی.
width و height اجباری هستند: هرچند از نظر فنی مرورگر بدون آن‌ها هم کار می‌کند، اما این‌ها از پرش چیدمان (CLS) جلوگیری می‌کنند. جزئیات در بخش بعدی.
ویژگی‌های اختیاری: srcset، sizes، loading، decoding، fetchpriority و referrerpolicy — هرکدام کاربرد مشخصی دارند که در بخش‌های بعدی توضیح می‌دهم.

یک نکته‌ی ظریف که در پروژه‌های وردپرسی به‌کارم آمده: وردپرس به‌طور پیش‌فرض برای تصاویر آپلودشده، ویژگی‌های width، height، alt (اگر پر کرده باشید) و srcset را خودکار اضافه می‌کند. اما اگر قالب شما مستقیماً HTML خروجی را تغییر می‌دهد، این ویژگی‌ها ممکن است حذف شوند. همیشه در خروجی نهایی چک کنید. مطالعه‌ی بیشتر در قالب وردپرس چیست و کدنویسی اختصاصی برای قالب وردپرس.

alt: مهم‌ترین ویژگی تصویر

ویژگی alt (Alternative Text) مهم‌ترین ویژگی تصویر در HTML است. این ویژگی سه نقش هم‌زمان دارد:

نقش دسترس‌پذیری: کاربر نابینا با screen reader، متن alt را به‌جای تصویر می‌شنود. اگر alt نباشد، screen readerها ممکن است نام فایل را بخوانند (مثل «photo-500-500-point-jpg») که بی‌معناست.
نقش سئو: گوگل از alt برای فهم محتوای تصویر استفاده می‌کند. تصاویر با alt معنادار، شانس بیشتری برای ظاهر شدن در Google Images دارند و می‌توانند ترافیک ارگانیک مستقیم به سایت شما بیاورند.
نقش fallback: اگر تصویر به هر دلیلی بارگذاری نشود (مثلاً شبکه قطع باشد یا فایل حذف شود)، مرورگر متن alt را در محل تصویر نمایش می‌دهد. این یک تجربه‌ی کاربری بهتر از یک فضای خالی است.

قواعد نوشتن alt

سه دسته از تصاویر و قاعده‌ی متفاوت برای هرکدام:

نوع تصویر	alt	مثال
تصویر معنادار (عکس محصول، تصویر آموزشی)	توصیف دقیق و معنادار	`alt="کفش چرم مردانه قهوه‌ای"`
تصویر تزئینی (پس‌زمینه، خط جداکننده)	خالی `alt=""`	کاربر screen reader آن را نادیده می‌گیرد
تصویر عملکردی (لینک، دکمه، آیکون)	توصیف عملکرد	`alt="جستجو"` برای دکمه‌ی جستجو

اشتباهات رایج در alt

alt = نام فایل: alt="IMG_2847.jpg" هیچ چیزی نمی‌گوید. این اشتباه رایج‌ترین است چون اکثر CMSها به‌طور پیش‌فرض نام فایل را در alt قرار می‌دهند اگر شما پر نکنید.
alt = کلمه کلیدی spam: alt="کفش، کفش چرم، خرید کفش، کفش ارزان" اسپم است و گوگل آن را به‌عنوان دستکاری تشخیص می‌دهد. توصیف طبیعی بنویسید، نه انبار کلمه.
حذف alt برای تصاویر تزئینی: اگر تصویر تزئینی است، alt="" بگذارید (خالی) اما حذف نکنید. حذف کامل، برای screen reader نامشخص است؛ خالی گذاشتن، اعلام صریح «این تصویر معنایی ندارد» است.
alt طولانی: alt جای توصیف دقیق است، اما نه جای مقاله‌ی چندخطی. به‌طور معمول زیر ۱۲۵ کاراکتر.

در پروژه‌ای که یک فروشگاه پوشاک داشت، بازنویسی alt تصاویر محصولات (از نام فایل به توصیف معنادار) در سه ماه، ترافیک Google Images را چهار برابر کرد. یکی از آن موقعیت‌های نادر که یک تغییر ساده در HTML، اثر تجاری محسوسی داشت. برای مطالعه‌ی کامل این موضوع، سئوی تصویر و تگ alt تصاویر منابع کلیدی هستند.

width و height: جلوگیری از پرش چیدمان

یکی از پرتکرارترین مشکلاتی که در پروژه‌ها به آن برخورد می‌کنم، پرش چیدمان است: کاربر صفحه را باز می‌کند، در حال خواندن است که ناگهان تصویری لود می‌شود و کل محتوا پایین می‌پرد. این پرش در معیار Core Web Vitals به‌عنوان CLS (Cumulative Layout Shift) اندازه‌گیری می‌شود و روی تجربه‌ی کاربری و رتبه‌بندی گوگل اثر مستقیم دارد.

راه‌حل: همیشه width و height تصویر را در HTML بدهید. این ویژگی‌ها به مرورگر می‌گویند چه فضایی برای تصویر رزرو کند:

<img
  src="hero.webp"
  alt="تصویر هدر"
  width="1200"
  height="675">

نکته‌ی مهمی که در پروژه‌ها یاد گرفتم: مقادیر width و height لازم نیست برابر ابعاد واقعی تصویر باشند — کافی است نسبت ابعاد (aspect ratio) را درست منتقل کنند. مرورگر از این نسبت برای رزرو فضای مناسب استفاده می‌کند و اگر با CSS ابعاد را تغییر دهید، باز هم پرش چیدمان رخ نمی‌دهد. مثلاً برای نمایش تصویری در عرض ۶۰۰ پیکسل، می‌توانید width="1200" و height="675" بگذارید و در CSS max-width: 100% بدهید.

برای تصویر شاخص صفحه (LCP)، این نکته اهمیت بیشتری دارد. LCP به‌طور پیش‌فرض، بزرگ‌ترین عنصر قابل‌مشاهده در بالای صفحه است. اگر آن عنصر تصویر باشد و width و height نداشته باشد، هم CLS خراب می‌شود و هم LCP دیرتر محاسبه می‌شود. مطالعه‌ی بیشتر در Core Web Vitals چیست و LCP چیست.

هر تصویر بدون width و height، یک بدهی پنهان است که در گزارش Core Web Vitals خودش را نشان می‌دهد. گاهی با یک ثانیه پرش، تجربه‌ی کاربری خراب می‌شود.

srcset و sizes: تصاویر ریسپانسیو

یکی از مؤثرترین تگ‌های HTML برای سرعت موبایل، srcset و sizes است. این دو ویژگی به مرورگر اجازه می‌دهند نسخه‌ی مناسب دستگاه کاربر را انتخاب کند:

<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w,
          hero-800.webp 800w,
          hero-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="تصویر هیرو"
  width="800"
  height="450">

معنی این کد:

srcset: لیست نسخه‌های مختلف تصویر با اندازه‌هایشان. 400w یعنی این نسخه ۴۰۰ پیکسل عرض دارد.
sizes: به مرورگر می‌گوید این تصویر در هر عرض ویوپورت، چه اندازه‌ای روی صفحه می‌گیرد. (max-width: 600px) 100vw یعنی «اگر عرض ویوپورت کمتر از ۶۰۰ پیکسل است، تصویر ۱۰۰٪ عرض ویوپورت را می‌گیرد».

مرورگر با ترکیب این دو، بهترین نسخه را انتخاب می‌کند. در موبایل ۳۷۵ پیکسلی، نسخه‌ی ۴۰۰ پیکسل دانلود می‌شود. در دسکتاپ بزرگ، نسخه‌ی ۱۶۰۰. این تصمیم هوشمند، بایت‌های اضافه را حذف می‌کند.

مزیت واقعی در پروژه‌ها

در یک پروژه‌ی فروشگاهی، با اضافه کردن srcset و sizes به تصاویر محصول، حجم کلی صفحه در موبایل از ۲.۸ مگابایت به ۹۸۰ کیلوبایت کاهش پیدا کرد. LCP از ۴.۲ ثانیه به ۲.۱ ثانیه رسید. همه‌ی این‌ها از یک ویژگی ساده‌ی HTML که اکثراً نادیده گرفته می‌شود.

خوشبختانه وردپرس به‌طور پیش‌فرض برای تصاویر آپلودشده، این ویژگی را خودکار اضافه می‌کند. اگر قالب شما آن را حذف می‌کند، می‌توانید با فیلتر wp_calculate_image_srcset آن را برگردانید. مطالعه‌ی بیشتر در کدنویسی اختصاصی برای قالب وردپرس و سئوی تصویر.

picture: کنترل کامل روی تصویر

در بعضی سناریوها، srcset و sizes کافی نیستند. مثلاً وقتی می‌خواهید فرمت‌های مختلف (AVIF، WebP، JPEG) را با fallback ترکیب کنید، یا وقتی می‌خواهید در موبایل تصویر متفاوتی نمایش دهید (art direction). اینجا تگ <picture> وارد می‌شود:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="تصویر هیرو" width="1200" height="675">
</picture>

سه کاربرد اصلی picture:

فرمت‌های مدرن با fallback: مرورگر مدرن AVIF را نمایش می‌دهد، اگر پشتیبانی نکند WebP، و اگر آن را هم نداشته باشد، JPEG. این الگو به‌طور خودکار توسط مرورگر مدیریت می‌شود و صرفه‌جویی محسوسی در حجم دارد. برای مطالعه‌ی مزایای فرمت‌ها، بهترین فرمت تصویر وب.
Art Direction: وقتی می‌خواهید در موبایل نسخه‌ی برش‌خورده یا متفاوتی از تصویر نمایش دهید. مثلاً هدری که در دسکتاپ تصویر افقی است و در موبایل تصویر عمودی.
Media Queries در تصویر: می‌توانید با ویژگی media روی source، تصمیمات پیچیده‌تر بگیرید.

نکته‌ی مهم: تگ <img> درون <picture> اجباری است. حتی اگر همه‌ی source‌ها fail شوند، img آخرین fallback است. اگر آن را حذف کنید، picture کار نمی‌کند.

loading lazy: بارگذاری هوشمند تصویر

ویژگی loading="lazy" به مرورگر می‌گوید این تصویر را فقط زمانی بارگذاری کن که نزدیک به دید کاربر باشد:

<img src="photo.webp" alt="..." loading="lazy" width="800" height="450">

این ویژگی مزیت بزرگی دارد: در یک صفحه با ۵۰ تصویر، فقط تصاویر بالای صفحه و نزدیک به دید کاربر بارگذاری می‌شوند. تصاویر پایین صفحه، در صورت اسکرول کاربر، بارگذاری می‌شوند. نتیجه: کاهش چشمگیر زمان بارگذاری اولیه.

دام مهم: lazy روی LCP

اگر تصویر شاخص صفحه (LCP) را lazy کنید، برعکس، LCP بدتر می‌شود. چون مرورگر تا زمانی که کاربر نزدیک به آن تصویر نشود، آن را بارگذاری نمی‌کند — و این کار دقیقاً روی مهم‌ترین تصویر صفحه‌ی شما انجام می‌شود که باید سریع‌ترین باشد.

قاعده‌ی من: برای تصویر هدر (بالای صفحه)، هرگز lazy نگذارید. از loading="eager" یا حتی بدون ویژگی استفاده کنید:

<!-- LCP image - eager load -->
<img src="hero.webp" alt="هدر" width="1200" height="675" fetchpriority="high">

<!-- تصاویر پایین صفحه - lazy load -->
<img src="gallery-1.webp" alt="گالری" width="600" height="400" loading="lazy">

در یک پروژه‌ی خبری، این یک تغییر ساده در HTML (حذف lazy از تصویر شاخص) LCP را از ۳.۸ ثانیه به ۲.۲ ثانیه رساند. یکی از آن موارد نادری که یک تغییر کوچک، اثر قابل اندازه‌گیری دارد. مطالعه‌ی بیشتر در Core Web Vitals چیست و افزونه‌های بهینه‌سازی تصویر.

figure و figcaption: تصویر با معنا

وقتی می‌خواهید تصویری با توضیح معنایی داشته باشید، از <figure> و <figcaption> استفاده کنید:

<figure>
  <img src="chart.webp" alt="نمودار فروش ماهانه" width="800" height="500">
  <figcaption>نمودار فروش ماهانه در سال ۱۴۰۴</figcaption>
</figure>

سه مزیت این ساختار:

معنای سمنتیک: به مرورگر و screen reader می‌گوید این تصویر با این توضیح، یک واحد معنایی هستند.
دسترس‌پذیری: screen readerها caption را به‌عنوان توضیح تصویر می‌خوانند، در کنار alt.
سئو: گوگل از متن figcaption برای فهم محتوای تصویر استفاده می‌کند. در نتایج Google Images، این توضیح می‌تواند نمایش داده شود.

برای مطالعه‌ی این ساختار در چارچوب سمنتیک، HTML سمنتیک و تگ های پرکاربرد HTML.

decoding و fetchpriority: ویژگی‌های مدرن

دو ویژگی مدرن که در چند سال اخیر به HTML اضافه شده‌اند و در پروژه‌ها اثر محسوسی داشته‌اند:

decoding

مقدار decoding="async" به مرورگر می‌گوید تصویر را در پس‌زمینه decode کن، بدون اینکه main thread را متوقف کنی. برای تصاویر بزرگ، این ویژگی می‌تواند تجربه‌ی کاربری را در هنگام لود، به‌طور محسوسی روان‌تر کند:

<img src="large-photo.webp" alt="..." decoding="async">

fetchpriority

مقدار fetchpriority="high" به مرورگر می‌گوید این تصویر را با اولویت بالا بارگذاری کن. برای تصویر LCP (بزرگ‌ترین عنصر قابل‌مشاهده بالای صفحه)، این ویژگی می‌تواند LCP را به‌طور محسوس بهبود دهد:

<img src="hero.webp" alt="هدر" fetchpriority="high" width="1200" height="675">

در پروژه‌ای که یک لندینگ بود، اضافه کردن fetchpriority="high" به تصویر هدر، LCP را حدود ۴۰۰ میلی‌ثانیه بهبود داد. این یک ویژگی جدید است که پشتیبانی مرورگرها امروز به‌طور کامل در دسترس است.

برای مطالعه‌ی این ویژگی‌ها در چارچوب کارایی، بهینه‌سازی سرعت سایت و Core Web Vitals چیست.

اشتباهاتی که در پروژه‌ها دیدم

حذف alt یا پر کردن با نام فایل: شایع‌ترین اشتباه. هم سئو را ضعیف می‌کند و هم کاربر نابینا را از دسترس محروم.
نبود width و height: هر تصویر بدون ابعاد، یک منبع پرش چیدمان است.
استفاده از تصاویر بزرگ به‌جای نسخه‌های ریسپانسیو: یک عکس ۴ مگابایتی از دوربین که در صفحه نمایش ۳۷۵ پیکسلی نمایش داده می‌شود، بار اضافه‌ی محض است.
lazy loading روی LCP: عکس شاخص صفحه نباید lazy باشد چون تجربه‌ی اولیه‌ی کاربر را خراب می‌کند.
فرمت‌های قدیمی: JPEG و PNG هنوز پرکاربرد هستند اما WebP و AVIF در حجم کمتر، کیفیت بالاتری می‌دهند. مهاجرت به این فرمت‌ها، یک برد سریع است. مطالعه‌ی بیشتر در بهترین فرمت تصویر وب و WebP یا JPEG برای سرعت سایت.
عدم استفاده از picture برای فرمت‌های fallback: اگر AVIF را با picture سرو نمی‌کنید، کاربران مرورگرهای قدیمی‌تر ممکن است تصویر را نبینند.
رنگ زمینه‌ی نامناسب در تصاویر PNG شفاف: اگر تصویر PNG با پس‌زمینه‌ی شفاف روی پس‌زمینه‌ی رنگی سایت قرار بگیرد، می‌تواند زشت شود. راه‌حل: یا SVG، یا نسخه‌ی WebP، یا پس‌زمینه‌ی صریح در CSS.
نادیده گرفتن تصویر شاخص در وردپرس: در وردپرس، تصویر شاخص (featured image) یک مفهوم مشخص است. اگر از آن درست استفاده نکنید، در Google Images و در نتایج جستجو، سایت شما ضعیف ظاهر می‌شود. مطالعه‌ی بیشتر در توابع تصویر شاخص در وردپرس.

بخشی از این اشتباهات در اشتباهات رایج بهینه‌سازی تصاویر و سئو تکنیکال چیست هم آمده است.

لایه‌ای پایین‌تر از سینتکس img

اینجا وارد لایه‌ای می‌شوم که در پروژه‌های معمولی به آن نگاه نمی‌شود اما برای مهندسان پلتفرم و توسعه‌دهنده‌های ارشد اهمیت دارد. آنچه موتور مرورگر با تصاویر HTML شما می‌کند، در پنج مفهوم خلاصه می‌شود:

Image Decoding Pipeline و Thread Priority: وقتی مرورگر یک تصویر را لود می‌کند، سه مرحله طی می‌شود: دریافت بایت‌ها، decode (تبدیل به پیکسل‌های خام)، و rasterize (نمایش). مرحله‌ی decode برای تصاویر بزرگ می‌تواند main thread را برای چند صد میلی‌ثانیه اشغال کند و در نتیجه اسکرول یا انیمیشن را متوقف کند. ویژگی decoding="async" به مرورگر می‌گوید این کار را در thread جداگانه انجام بده. برای مطالعه‌ی این مفهوم در چارچوب کارایی، بهینه سازی جاوااسکریپت و بهینه‌سازی سرعت سایت را ببینید.
Resource Priority Hints و Fetch Priority: مرورگرها یک الگوریتم داخلی برای تعیین اولویت منابع دارند که بر اساس نوع فایل (HTML > CSS > JS > Images > Fonts) و موقعیت در صفحه کار می‌کند. اما این الگوریتم همیشه دقیق نیست. ویژگی fetchpriority به شما امکان می‌دهد این الگوریتم را بازنویسی کنید — high برای LCP image، low برای تصاویر دکوراتیو. این یک اصلاح کوچک با اثر محسوس روی LCP است.
Lazy Loading و Intersection Observer API: ویژگی loading="lazy" در واقع روی Intersection Observer API سوار است — همان API که جاوااسکریپت برای تشخیص ورود عناصر به ویوپورت استفاده می‌کند. مرورگر با دیدن این ویژگی، به‌طور داخلی یک observer ثبت می‌کند و زمانی که تصویر به فاصله‌ی مشخصی از ویوپورت رسید، بارگذاری را شروع می‌کند. این یعنی شما نیازی به جاوااسکریپت اضافه برای lazy loading ندارید. مطالعه‌ی موازی این لایه با DOM در کار با DOM در جاوااسکریپت و مفاهیم پیشرفته جاوااسکریپت آمده است.
Image Format Detection و Content Negotiation: وقتی از <picture> با source‌های چندفرمتی استفاده می‌کنید، مرورگر فرمت‌های پشتیبانی‌شده را از طریق Accept header اعلام می‌کند و سرور می‌تواند نسخه‌ی مناسب را سرو کند. اما در HTML استاتیک، خود مرورگر تصمیم می‌گیرد کدام source را بارگذاری کند — بدون رفت‌و‌برگشت به سرور. این تصمیم‌گیری سریع در سطح مرورگر، تجربه‌ی کاربری بهتری می‌سازد.
Interaction با Image CDN و Transformations: در پروژه‌های مدرن، معمولاً از Image CDN (مثل Cloudflare Images یا Imgix) استفاده می‌شود که تصاویر را روی پرواز بهینه می‌کند (فرمت، سایز، کیفیت). در این حالت، srcset و sizes شما به URL‌هایی اشاره می‌کنند که به CDN می‌روند و CDN نسخه‌ی مناسب را برمی‌گرداند. این ترکیب، بهترین کارایی را می‌سازد اما نیاز به تنظیمات دقیق دارد. مطالعه‌ی موازی در نقش CDN در سرعت و راه‌اندازی CDN برای وردپرس آمده است.

یک تجربه‌ی واقعی از پروژه‌ای که با مسئله‌ی Decoding Pipeline روبرو شدیم: در یک گالری با بیش از ۱۰۰ تصویر بزرگ، در دستگاه‌های ضعیف، اسکرول کاربر به‌طور مکرر قطع می‌شد. علت: هر بار که تصویر جدید به ویوپورت می‌رسید، decode آن در main thread انجام می‌شد و همین باعث jank (پرش بصری) می‌شد. راه‌حل ساده: اضافه کردن decoding="async" به همه‌ی تصاویر گالری. با این تغییر، اسکرول به‌طور محسوسی روان‌تر شد.

اگر روی پروژه‌های وردپرسی هستید و می‌خواهید این لایه‌ها را در قالب خود اعمال کنید، پیشنهاد می‌کنم ابتدا به قالب سبک مهاجرت کنید و بعد بهینه‌سازی تصاویر را انجام دهید. برای مطالعه‌ی موازی با استانداردها و معماری، استانداردهای HTML و CSS و CSS مدرن از Flexbox تا Grid دید وسیع‌تری می‌دهند. برای مطالعه‌ی این لایه در چارچوب بهینه‌سازی تصویر، فشرده‌سازی تصاویر سایت، افزونه‌های بهینه‌سازی تصویر و تأثیر تصاویر سنگین بر Core Web Vitals را هم ببینید. اگر روی انتخاب تصویر برای شبکه‌های اجتماعی هم کار می‌کنید، نقش Schema در AEO و سئوی تصویر دید وسیع‌تری می‌دهند.

تصویر در HTML، تنها عنصری است که سه مخاطب متفاوت دارد — چشم کاربر، درک ماشین، و فیلتر دسترس‌پذیری. نادیده گرفتن هرکدام، بخشی از پیام شما را نرسیده باقی می‌گذارد.

سخن پایانی این نگاه

تصاویر در HTML را می‌توان در یک جمله خلاصه کرد: «ابزاری ساده در ظاهر، اما پرتأثیرترین عنصر روی سرعت، سئو و دسترس‌پذیری هم‌زمان.» سه درس که از این مسیر با خودم بردم:

alt را جدی بگیرید. اگر فقط یک کار از این مقاله انجام دهید، همین باشد: بازنویسی alt تمام تصاویر سایت با توصیف‌های معنادار. اثرش روی Google Images، دسترس‌پذیری و اعتبارسنجی HTML در چند هفته دیده می‌شود.
width و height را هرگز فراموش نکنید. این دو ویژگی، ارزان‌ترین راه جلوگیری از پرش چیدمان است. اگر با یک CMS کار می‌کنید و قالب شما این‌ها را حذف می‌کند، آن را به‌عنوان یک باگ جدی ببینید.
srcset و lazy loading را جدی بگیرید. این دو ویژگی، بیشترین اثر را روی سرعت موبایل دارند. برای سایت‌های محتوایی و فروشگاهی که اکثر ترافیک روی موبایل است، این یک برد سریع و کم‌هزینه است.

مسیر یادگیری وب با این نوشته تمام نمی‌شود. اگر می‌خواهید مرحله‌ی بعدی را بردارید، آموزش CSS از صفر، آموزش جاوااسکریپت از صفر و HTML سمنتیک سه قدم منطقی بعدی هستند. اگر روی دسترس‌پذیری متمرکز هستید، استانداردهای دسترس‌پذیری وب و WCAG چیست منابع کلیدی هستند. اگر هم به سمت سئو و بهینه‌سازی می‌روید، سئوی تصویر، Core Web Vitals چیست و فشرده‌سازی تصاویر سایت دید وسیع‌تری می‌دهند.

اگر در پروژه‌ای با یک مورد عجیب تصویر روبرو شده‌اید — مثلاً تصویری که در دسکتاپ درست لود می‌شود اما در موبایل نه، یا گالری‌ای که در Google Images ایندکس نمی‌شود — جزئیات سناریو را در دیدگاه بنویسید. مخصوصاً اگر با اضافه کردن fetchpriority یا حذف lazy از تصویر شاخص، LCP به‌طور محسوسی بهبود یافت، همان تجربه برای خواننده‌ی بعدی از هر توضیح کلی ارزشمندتر است.