سایتی را به یاد می‌آورم که تصویر بنر اصلی‌اش چهار مگابایت حجم داشت و همان تصویر در موبایل با ابعاد ۳۷۵ پیکسل نمایش داده می‌شد. کاربر موبایل، چهار مگابایت داده مصرف می‌کرد تا تصویری ببیند که نمایشش در ۳۷۵ پیکسل بود. آن تجربه، نقطه‌ی شروع بررسی جدی روی مفهوم تصاویر ریسپانسیو بود: تصویری که برای هر دستگاه، نسخه‌ی مناسب خودش را دریافت کند. سال‌ها بعد، در پروژه‌های بهینه‌سازی سرعت، فهمیدم این مفهوم، یکی از ارزان‌ترین و مؤثرترین کارهایی است که می‌توان روی تصاویر سایت انجام داد. در این نوشته، همان چیزی را که در پروژه‌های واقعی یاد گرفته‌ام باز می‌کنم. اگر با مفهوم طراحی واکنش‌گرا (Responsive Design) آشنایید، ادامه‌ی این مقاله به لایه‌ی تصویری همان مفهوم می‌پردازد.

تصاویر ریسپانسیو دقیقاً چیست؟

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

ساختار پایه‌ی تصویر ریسپانسیو، از دو ویژگی srcset و sizes استفاده می‌کند:

<img src="image-800.jpg"
  srcset="image-400.jpg 400w,
          image-800.jpg 800w,
          image-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="توضیح تصویر">

این ساختار به مرورگر می‌گوید: سه نسخه در سه عرض مختلف موجود است. عرض نمایش مورد انتظار نیز تعریف شده. مرورگر با توجه به عرض صفحه، تراکم پیکسلی دستگاه، و سایر شرایط، یکی از این سه را انتخاب و دانلود می‌کند. مسیر کلی این ساختار را در قالب وردپرس ریسپانسیو چیست باز کرده‌ام و در ریسپانسیو با CSS هم به لایه‌ی فنی پرداخته‌ام.

تصویر ریسپانسیو یعنی کاربر موبایل، داده‌ی موبایل مصرف می‌کند و کاربر دسکتاپ، داده‌ی دسکتاپ. این ساده‌ترین راه صرفه‌جویی در بایت و بهبود تجربه است.

چرا تصاویر ریسپانسیو اهمیت دارند؟

در پروژه‌هایی که سنجش سرعت انجام داده‌ام، تصاویر معمولاً بین ۵۰ تا ۷۰ درصد حجم صفحه‌ی اول را تشکیل می‌دهند. اگر این حجم بهینه نشود، بیشترین اثر را روی سرعت صفحه و روی Core Web Vitals می‌گذارد. تصاویر ریسپانسیو، یکی از مؤثرترین راه‌های کاهش این حجم است.

سه دلیل اصلی برای جدی گرفتن تصاویر ریسپانسیو:

  • کاهش مصرف پهنای باند: کاربر موبایل به‌جای چهار مگابایت، نیم مگابایت دانلود می‌کند. این کاهش، مستقیماً بر مصرف داده و سرعت بارگذاری اثر می‌گذارد.
  • بهبود LCP: تصویر اصلی صفحه سریع‌تر دانلود می‌شود و LCP بهبود می‌یابد.
  • بهبود تجربه‌ی کاربر: سایت روی موبایل و شبکه‌ی محدود، سریع‌تر و روان‌تر تجربه می‌شود.

مسیر تفصیلی این اثر را در سئوی تصویر چیست باز کرده‌ام و در تاثیر تصاویر سنگین بر Core Web Vitals هم به بخش مکمل این موضوع پرداخته‌ام.

srcset چیست و چطور کار می‌کند؟

ویژگی srcset قلب تصاویر ریسپانسیو است. این ویژگی، به مرورگر فهرستی از تصاویر و مشخصات هرکدام را می‌دهد. مشخصات می‌تواند دو شکل داشته باشد:

  • وابسته به عرض (w): هر تصویر، عرض واقعی خود را اعلام می‌کند، مثلاً image-400.jpg 400w.
  • وابسته به تراکم پیکسلی (x): هر تصویر، ضریب تراکم خود را اعلام می‌کند، مثلاً image@2x.jpg 2x.

در اکثر پروژه‌های وب مدرن، روش w انتخاب بهتری است چون با ویژگی sizes ترکیب می‌شود و انتخاب هوشمندانه‌تری از سمت مرورگر ممکن می‌کند. تفکیک دقیق‌تر این دو روش را در اصول طراحی ریسپانسیو در 2026 باز کرده‌ام و در مدیا کوئری در CSS هم به لایه‌ی مکمل این موضوع پرداخته‌ام.

ویژگی sizes و انتخاب هوشمند مرورگر

ویژگی sizes، به مرورگر می‌گوید تصویر در هر شرایط، چه عرضی از صفحه را اشغال می‌کند. بدون این ویژگی، مرورگر نمی‌داند کدام نسخه از تصویر را انتخاب کند و ممکن است نسخه‌ی بزرگ‌تر را انتخاب کند. ساختار نمونه:

sizes="(max-width: 600px) 100vw,
       (max-width: 1200px) 50vw,
       33vw"

این ساختار یعنی: در عرض کمتر از ۶۰۰ پیکسل، تصویر تمام عرض صفحه را می‌گیرد؛ بین ۶۰۰ و ۱۲۰۰، نیمی از عرض؛ و در عرض بالاتر، یک‌سوم عرض. مرورگر با این اطلاعات و با در نظر گرفتن تراکم پیکسلی دستگاه، مناسب‌ترین نسخه را انتخاب می‌کند.

نکته‌ای که در پروژه‌ها زیاد می‌بینم: بسیاری از کاربران sizes را تعریف نمی‌کنند یا از یک مقدار ثابت استفاده می‌کنند. نتیجه، انتخاب نامناسب مرورگر و دانلود نسخه‌ی بزرگ‌تر از حد لازم است. مسیر دقیق این تنظیمات را در ریسپانسیو با CSS باز کرده‌ام.

تگ picture و کاربردهای آن

در کنار srcset و sizes، تگ <picture> امکان انعطاف بیشتر را فراهم می‌کند. این تگ، اجازه می‌دهد بین فرمت‌های مختلف تصویر انتخاب شود یا در برخی شرایط، تصویر کاملاً متفاوتی نمایش داده شود. نمونه:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.avif" type="image/avif">
  <img src="image.jpg" alt="توضیح تصویر">
</picture>

این ساختار، به مرورگر می‌گوید اول AVIF را امتحان کن، اگر پشتیبانی نمی‌کند WebP و در نهایت JPEG. این رویکرد، برای پشتیبانی از مرورگرهای قدیمی و ترکیب فرمت‌های مختلف کاربرد دارد. مسیر این ساختار را در WebP یا JPEG برای سرعت سایت باز کرده‌ام و در بهترین فرمت تصویر برای وب هم به لایه‌ی انتخاب فرمت پرداخته‌ام.

lazy-load و ریسپانسیو

lazy-load، مکمل طبیعی تصاویر ریسپانسیو است. با lazy-load، تصویری که در دید کاربر نیست، دانلود نمی‌شود. ترکیب lazy-load با تصاویر ریسپانسیو، مصرف باند را به حداقل می‌رساند.

نکته‌ی مهمی که در پروژه‌ها زیاد به آن برمی‌خورم: تصویر اصلی صفحه (LCP candidate) نباید lazy-load شود. اگر تصویر اصلی صفحه با lazy بارگذاری شود، LCP به‌شدت بدتر می‌شود. برای تصویر اصلی، باید از loading="eager" و در صورت نیاز fetchpriority="high" استفاده شود.

<img src="hero.webp" fetchpriority="high" alt="بنر اصلی">

مسیر تفکیک دقیق این ساختار را در بهینه‌سازی تصاویر برای موبایل باز کرده‌ام و در تاثیر تصاویر سنگین بر Core Web Vitals هم به بخش مکمل این موضوع پرداخته‌ام.

پیاده‌سازی در وردپرس

وردپرس از نسخه‌ی ۴.۴ به بعد، پشتیبانی خودکار از srcset را دارد. یعنی وقتی تصویری را آپلود می‌کنید، وردپرس به‌طور خودکار نسخه‌های مختلف را می‌سازد و همان‌ها را در srcset استفاده می‌کند. اما این پشتیبانی خودکار، در همه‌ی قالب‌ها به‌درستی پیاده نشده است. سه نکته‌ی کلیدی:

  • بسیاری از قالب‌ها از تابع the_post_thumbnail() استفاده می‌کنند که به‌طور خودکار srcset را اضافه می‌کند.
  • اگر تصویر با کد مستقیم <img> اضافه شده باشد، باید srcset و sizes دستی تعریف شوند.
  • در گوتنبرگ، بلوک تصویر به‌طور خودکار از این ویژگی‌ها استفاده می‌کند.

در پروژه‌ها، افزونه‌های بهینه‌سازی تصویر معمولاً لایه‌ی مکمل این ساختار را فراهم می‌کنند. مسیر این ابزارها را در بهترین افزونه‌های بهینه‌سازی تصویر باز کرده‌ام و در فشرده‌سازی تصاویر سایت هم به لایه‌ی مکمل پرداخته‌ام.

تأثیر روی LCP و Core Web Vitals

تصاویر ریسپانسیو، بیشترین اثر را روی LCP دارند. تصویر اصلی صفحه، معمولاً LCP candidate است و اگر نسخه‌ی کوچک‌تر و مناسب‌تری برای هر دستگاه ارائه شود، LCP بهبود می‌یابد. این بهبود، گاهی چند صد میلی‌ثانیه است.

سه نکته‌ی کلیدی در این لایه:

  • تصویر اصلی صفحه باید eager باشد، نه lazy.
  • نسخه‌ی موبایل باید ابعاد مناسب داشته باشد (معمولاً حداکثر ۸۰۰ پیکسل عرض).
  • در کنار ابعاد، فرمت هم باید بهینه باشد (WebP یا AVIF).

مسیر کامل این ترکیب را در LCP چیست و چگونه آن را بهینه کنیم باز کرده‌ام و در Core Web Vitals چیست هم به لایه‌ی کلی پرداخته‌ام.

تصاویر ریسپانسیو، ارزان‌ترین راه بهبود LCP است؛ چون نه نیاز به تغییر سرور دارد و نه نیاز به بازنویسی قالب.

اشتباهات رایج در تصاویر ریسپانسیو

در پروژه‌هایی که سنجش تصاویر انجام داده‌ام، پنج اشتباه رایج دیده‌ام:

  • تعریف نکردن sizes: بدون این ویژگی، مرورگر انتخاب مناسبی نمی‌کند و نسخه‌ی بزرگ‌تر را دانلود می‌کند.
  • lazy-load روی LCP: تصویر اصلی صفحه با lazy بارگذاری می‌شود و LCP بدتر می‌شود.
  • نسخه‌های نامناسب: مثلاً فقط دو نسخه (کوچک و بزرگ) با فاصله‌ی ابعادی بسیار زیاد، که انتخاب میانی را سخت می‌کند.
  • نادیده گرفتن تراکم پیکسلی: دستگاه‌های Retina نیاز به نسخه‌ی بزرگ‌تر دارند؛ تعریف نکردن این مورد، کیفیت را افت می‌دهد.
  • تصویر پس‌زمینه بدون srcset: تصاویری که با CSS بارگذاری می‌شوند، از این ساختار استفاده نمی‌کنند و باید با media query مدیریت شوند.

مسیر پرهیز از این اشتباهات را در اشتباهات رایج در بهینه‌سازی تصاویر باز کرده‌ام و در تست ریسپانسیو در مرورگرها هم به لایه‌ی تست این موضوع پرداخته‌ام.

چگونه اثر تصاویر ریسپانسیو را بسنجیم؟

سه شاخص کلیدی که در پروژه‌ها پایش می‌کنم:

  1. حجم تصاویر دانلودشده در هر دستگاه: با ابزار DevTools و پنل Network، مقدار انتقال داده را در دسکتاپ و موبایل مقایسه کنید.
  2. LCP موبایل در برابر دسکتاپ: تفاوت این دو عدد، نشان می‌دهد تصاویر چقدر در موبایل مؤثر بوده‌اند.
  3. CTR موبایل: بهبود سرعت موبایل، معمولاً بر نرخ تبدیل اثر می‌گذارد.

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

پرسش‌های پرتکرار درباره تصاویر ریسپانسیو

آیا وردپرس به‌طور خودکار تصاویر ریسپانسیو می‌سازد؟

بله، وردپرس از نسخه‌ی ۴.۴ به بعد، پشتیبانی خودکار از srcset را دارد. اما این پشتیبانی، زمانی کار می‌کند که قالب از توابع استاندارد مثل the_post_thumbnail() استفاده کند. اگر تصویر با کد مستقیم <img> اضافه شده باشد، باید srcset دستی تعریف شود.

آیا لازم است همه‌ی تصاویر ریسپانسیو باشند؟

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

تفاوت srcset و picture چیست؟

srcset با یک تصویر کار می‌کند و به مرورگر اجازه انتخاب نسخه می‌دهد. picture امکان استفاده از فرمت‌های مختلف یا نسخه‌های کاملاً متفاوت را فراهم می‌کند. برای اکثر موارد، srcset کافی است و picture برای مواقع خاص (مثل ترکیب فرمت‌ها) استفاده می‌شود.

چرا تصویر اصلی صفحه نباید lazy-load شود؟

چون lazy-load به مرورگر می‌گوید تصویر را فقط زمانی دانلود کن که در دید کاربر قرار بگیرد. برای تصویری که در همان لحظه‌ی اول بارگذاری در دید کاربر است، این کار باعث تأخیر در دانلود و بدتر شدن LCP می‌شود. تصویر اصلی باید eager باشد.

آیا تصاویر پس‌زمینه هم می‌توانند ریسپانسیو باشند؟

بله، اما با روش متفاوتی. تصاویر پس‌زمینه با CSS بارگذاری می‌شوند و نمی‌توان از srcset استفاده کرد. راه‌حل، استفاده از media query در CSS است: برای هر بازه‌ی عرض، تصویر مناسب تعریف شود.

آیا تصاویر ریسپانسیو روی سئو اثر دارد؟

به‌طور غیرمستقیم، بله. تصاویر ریسپانسیو سرعت صفحه را بهبود می‌دهند و همین بر Core Web Vitals و تجربه‌ی کاربر اثر می‌گذارد. اثر مستقیم آن روی رتبه، از مسیر سرعت و تجربه‌ی کاربر می‌گذرد، نه به‌عنوان یک سیگنال مستقل.

آنچه تصاویر ریسپانسیو را از یک تصمیم تکنیکال به یک مزیت تبدیل می‌کند

اگر بخواهم تجربه‌ی سال‌ها کار با تصاویر را در یک نکته خلاصه کنم، این است: تفاوت میان سایتی که تصاویر ریسپانسیو دارد و سایتی که ندارد، در کاربر موبایل با شبکه‌ی محدود خودش را نشان می‌دهد. کاربر دسکتاپ با وای‌فای پرسرعت، تفاوت را حس نمی‌کند. کاربر موبایل با اینترنت ۴G و دستگاه میان‌رده، تفاوت را در ثانیه‌ها می‌بیند.

سه حرکت عملی که تصاویر ریسپانسیو را از یک ایده به یک مزیت تبدیل می‌کند:

  1. مطمئن شوید تصویر اصلی صفحه eager و با fetchpriority high بارگذاری می‌شود.
  2. ویژگی sizes را با دقت تنظیم کنید تا مرورگر انتخاب درستی داشته باشد.
  3. ترکیب srcset با فرمت‌های بهینه (WebP) و فشرده‌سازی درست را جدی بگیرید.

آینده‌ی تصاویر در وب، به‌سمت هوشمندتر و سبک‌تر حرکت می‌کند. مسیر این تحول را در ترندهای بهینه‌سازی تصاویر در 2026 باز کرده‌ام و در قالب وردپرس ریسپانسیو چیست هم به لایه‌ی مکمل این موضوع پرداخته‌ام. اگر تجربه‌ی شما در پیاده‌سازی تصاویر ریسپانسیو متفاوت بوده — مثلاً در پروژه‌های فروشگاهی یا پربازدید — در دیدگاه‌ها بنویسید؛ تجربه‌ی واقعی شما برای خواننده‌ی بعدی این مقاله ارزشمندتر از هر توصیه‌ی کلی است. 📱