تصاویر واکنش‌گرا چیست؟ راهنمای کامل بهینه‌سازی عکس برای سرعت سایت و سئو

تصاویر واکنش‌گرا یکی از مهم‌ترین پایه‌های بهینه‌سازی سرعت سایت، بهبود تجربه کاربری و تقویت سئو تکنیکال هستند. اگر سایت شما یک تصویر بسیار بزرگ مخصوص نمایشگر دسکتاپ را بدون تغییر برای کاربری که با موبایل وارد شده بارگذاری کند، حجم بیشتری از اینترنت کاربر مصرف می‌شود، زمان نمایش محتوا افزایش می‌یابد و احتمال افت امتیازهای Core Web Vitals بالا می‌رود. تصاویر واکنش‌گرا این مسئله را حل می‌کنند؛ یعنی مرورگر بر اساس عرض صفحه، اندازه‌ی واقعی جایگاه تصویر و تراکم پیکسلی نمایشگر، مناسب‌ترین نسخه‌ی تصویر را انتخاب و دانلود می‌کند.

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

طبق راهنمای رسمی web.dev، برای جلوگیری از سرریز و حفظ تناسب تصویر در چیدمان‌های واکنش‌گرا، بهتر است تصاویر را متناسب با فضای والد محدود کنید و نسخه‌های مناسب را با srcset و sizes تحویل بدهید.

در این مقاله به‌صورت کامل بررسی می‌کنیم که تصاویر واکنش‌گرا چیستند، چطور با srcset و sizes کار می‌کنند، چه ارتباطی با LCP و سئو دارند، چگونه باید آن‌ها را در وردپرس پیاده‌سازی کرد و چه خطاهایی را باید در Lighthouse برطرف نمود.

برای درک دقیق‌تر ریشه‌های کندی نمایش محتوای اصلی و بهبود LCP، راهنمای تخصصی افزایش سرعت بارگذاری و بهینه‌سازی Largest Contentful Paint را بخوانید.

در این مقاله، مسیرهای فنی افزایش سرعت بارگذاری از TTFB تا CSS، فونت و تصویر اصلی به‌صورت عملی بررسی شده است.

تصاویر واکنش‌گرا چیست؟

تصاویر واکنش‌گرا یا Responsive Images مجموعه‌ای از تکنیک‌های HTML، CSS و بهینه‌سازی فایل هستند که باعث می‌شوند هر کاربر، متناسب با شرایط دستگاه خود، نسخه‌ی بهینه‌ی یک تصویر را دریافت کند.

شرایطی که مرورگر هنگام انتخاب تصویر در نظر می‌گیرد معمولاً شامل موارد زیر است:

• عرض viewport یا همان محدوده‌ی قابل‌مشاهده‌ی مرورگر
• اندازه‌ی واقعی تصویر در طراحی صفحه
• تراکم پیکسلی نمایشگر یا Device Pixel Ratio
• نوع و کیفیت اتصال اینترنت، در برخی شرایط و مرورگرها
• قابلیت‌های مرورگر برای پشتیبانی از فرمت‌هایی مانند WebP و AVIF
• قوانین تعریف‌شده در ویژگی‌های srcset و sizes

فرض کنید یک تصویر شاخص مقاله در دسکتاپ با عرض ۹۰۰ پیکسل نمایش داده می‌شود، اما در موبایل تنها به عرض ۳۶۰ پیکسل نیاز دارد. اگر فقط یک فایل ۱۹۲۰ پیکسلی برای هر دو دستگاه ارائه کنید، کاربر موبایل تصویری بسیار بزرگ‌تر از نیاز واقعی خود دانلود خواهد کرد. راهکار استاندارد این است که چند نسخه از همان تصویر در اندازه‌های مختلف در دسترس مرورگر قرار بگیرد.

برای نمونه، می‌توانید از نسخه‌های ۴۸۰، ۷۶۸، ۱۰۲۴، ۱۲۸۰ و ۱۶۰۰ پیکسلی یک تصویر استفاده کنید. مرورگر با توجه به شرایط کاربر، نسخه‌ی منطقی‌تر را انتخاب می‌کند؛ نه لزوماً کوچک‌ترین فایل و نه بزرگ‌ترین فایل موجود.

برای آشنایی با روش‌های بهبود سرعت سایت و تجربه کاربری، راهنمای بهینه سازی Core Web Vitals؛ راهنمای جامع بهبود سرعت و تجربه کاربری را مطالعه کنید. در این مقاله، مهم‌ترین نکات مربوط به بهینه‌سازی LCP، INP و CLS به‌صورت کاربردی بررسی شده است.

چرا تصاویر واکنش‌گرا برای سرعت سایت مهم هستند؟

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

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

• افزایش زمان دانلود صفحه
• مصرف بیشتر اینترنت کاربران موبایل
• افزایش فشار روی پهنای باند سرور یا CDN
• کندتر شدن نمایش محتوای اصلی
• رقابت منابع تصویری با CSS، JavaScript، فونت‌ها و درخواست‌های مهم دیگر
• افزایش نرخ پرش در اینترنت‌های ضعیف‌تر
• افت احتمالی در شاخص‌های تجربه صفحه و Core Web Vitals

نکته‌ی مهم این است که CSS به‌تنهایی برای حل این مسئله کافی نیست. کدی مانند نمونه‌ی زیر فقط ابعاد نمایش تصویر را تغییر می‌دهد:

img {
  max-width: 100%;
  height: auto;
}

این CSS ضروری و درست است، اما باعث نمی‌شود مرورگر فایل سبک‌تری دانلود کند. اگر فایل اصلی ۲ مگابایت باشد، همان فایل ۲ مگابایتی دانلود می‌شود؛ حتی اگر در موبایل فقط با عرض ۳۰۰ پیکسل نمایش داده شود.

برای کاهش حجم انتقالی واقعی، باید نسخه‌های مختلف فایل تصویر را با srcset و sizes در اختیار مرورگر بگذارید.

ارتباط تصاویر واکنش‌گرا با LCP و Core Web Vitals

یکی از مهم‌ترین شاخص‌های Core Web Vitals، معیار Largest Contentful Paint یا LCP است. این معیار اندازه می‌گیرد که بزرگ‌ترین و مهم‌ترین محتوای قابل‌مشاهده‌ی صفحه، با چه سرعتی برای کاربر نمایش داده می‌شود.

در بسیاری از صفحات، عنصر LCP یکی از موارد زیر است:

• تصویر هیرو یا بنر ابتدای صفحه
• تصویر شاخص مقاله
• تصویر اصلی محصول
• لوگوی بزرگ در بخش ابتدایی
• یک بلوک متنی بزرگ

اگر LCP صفحه یک تصویر باشد، هر کیلوبایت اضافه در حجم آن می‌تواند زمان نمایش مهم‌ترین بخش صفحه را افزایش دهد. بنابراین بهینه‌سازی تصویر LCP باید با دقت بیشتری انجام شود.

تصاویر واکنش‌گرا چگونه LCP را بهبود می‌دهند؟

وقتی یک کاربر موبایل، نسخه‌ی کوچک‌تر و فشرده‌تر تصویر اصلی را دریافت کند:

1. فایل سریع‌تر دانلود می‌شود.
2. مرورگر زودتر امکان decode کردن تصویر را پیدا می‌کند.
3. شبکه کمتر درگیر دانلود منابع غیرضروری می‌شود.
4. منابع مهم دیگر صفحه، مانند CSS ضروری یا فونت‌های محلی، سریع‌تر بارگذاری می‌شوند.
5. بزرگ‌ترین محتوای صفحه زودتر ظاهر می‌شود و امتیاز LCP بهبود پیدا می‌کند.

برای تصویر اصلی بالای صفحه، صرفاً استفاده از تصاویر واکنش‌گرا کافی نیست. باید چند نکته‌ی دیگر نیز رعایت شوند:

• برای تصویر LCP از loading="lazy" استفاده نکنید.
• برای آن fetchpriority="high" در نظر بگیرید.
• در صورت نیاز، تصویر مهم را preload کنید.
• ابعاد واقعی تصویر را با width و height تعیین کنید.
• نسخه‌ی مناسب موبایل و دسکتاپ را با srcset ارائه دهید.
• از فایل بسیار حجیم PNG یا JPEG بدون فشرده‌سازی استفاده نکنید.

نمونه‌ی مناسب برای تصویر اصلی صفحه:

<img
  src="/wp-content/uploads/hero-image-1280.webp"
  srcset="
    /wp-content/uploads/hero-image-480.webp 480w,
    /wp-content/uploads/hero-image-768.webp 768w,
    /wp-content/uploads/hero-image-1280.webp 1280w,
    /wp-content/uploads/hero-image-1600.webp 1600w
  "
  sizes="100vw"
  width="1600"
  height="900"
  alt="نمونه‌ای از طراحی سایت سریع و واکنش‌گرا"
  fetchpriority="high"
  decoding="async">

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

تفاوت بین تغییر اندازه تصویر و کوچک نمایش دادن آن با CSS

این دو مفهوم معمولاً با هم اشتباه گرفته می‌شوند:

تغییر اندازه‌ی واقعی تصویر

یعنی فایل جدیدی با ابعاد پیکسلی کمتر ایجاد شود. مثلاً فایل اصلی ۲۰۰۰×۱۲۰۰ پیکسل باشد و یک نسخه‌ی جدید ۸۰۰×۴۸۰ پیکسل تولید شود. این کار معمولاً حجم فایل را نیز پایین می‌آورد.

کوچک کردن تصویر با CSS

یعنی همان فایل اصلی بزرگ دانلود شود، اما مرورگر آن را کوچک‌تر نمایش دهد:

<img src="large-image.jpg" alt="نمونه تصویر">

img {
  width: 400px;
}

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

ویژگی srcset چیست و چگونه کار می‌کند؟

ویژگی srcset در تگ <img> به مرورگر اعلام می‌کند که از یک تصویر، چند نسخه با عرض‌ها یا تراکم‌های متفاوت در دسترس است.

رایج‌ترین روش، استفاده از توصیف‌گر عرض یا Width Descriptor است. در این روش، کنار هر آدرس تصویر، عرض واقعی آن فایل به پیکسل نوشته می‌شود.

نمونه:

<img
  src="flower-1080.jpg"
  srcset="
    flower-480.jpg 480w,
    flower-768.jpg 768w,
    flower-1080.jpg 1080w,
    flower-1440.jpg 1440w
  "
  alt="گل طبیعی در باغ">

معنای بخش‌های بالا:

• flower-480.jpg 480w یعنی فایل اول واقعاً ۴۸۰ پیکسل عرض دارد.
• flower-768.jpg 768w یعنی فایل دوم ۷۶۸ پیکسل عرض دارد.
• flower-1080.jpg 1080w یعنی فایل سوم ۱۰۸۰ پیکسل عرض دارد.

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

ویژگی sizes چیست و چرا اهمیت دارد؟

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

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

نمونه:

<img
  src="article-cover-1280.webp"
  srcset="
    article-cover-480.webp 480w,
    article-cover-768.webp 768w,
    article-cover-1024.webp 1024w,
    article-cover-1280.webp 1280w
  "
  sizes="(max-width: 767px) 100vw, (max-width: 1024px) 75vw, 800px"
  width="1280"
  height="720"
  alt="آموزش کامل تصاویر واکنش‌گرا">

در این کد:

• در نمایشگرهای کوچک‌تر از ۷۶۷ پیکسل، تصویر تقریباً تمام عرض viewport یا 100vw را اشغال می‌کند.
• در نمایشگرهای حداکثر ۱۰۲۴ پیکسل، تصویر حدود ۷۵ درصد عرض viewport را دارد.
• در نمایشگرهای بزرگ‌تر، حداکثر عرض تصویر ۸۰۰ پیکسل است.

اگر sizes اشتباه تنظیم شود، ممکن است مرورگر نسخه‌ای بزرگ‌تر از نیاز واقعی دانلود کند. بنابراین باید ساختار واقعی قالب، عرض کانتینر محتوا، ستون‌ها و breakpointهای CSS را بررسی کنید.

تفاوت srcset بر پایه عرض و تراکم پیکسلی

دو شیوه‌ی اصلی برای تعریف srcset وجود دارد:

۱. توصیف‌گر عرض یا w

این شیوه برای بیشتر وب‌سایت‌ها، قالب‌های وردپرسی و تصاویر محتوایی مناسب‌تر است:

<img
  src="sample-1024.jpg"
  srcset="sample-480.jpg 480w, sample-768.jpg 768w, sample-1024.jpg 1024w"
  sizes="(max-width: 768px) 100vw, 768px"
  alt="نمونه تصویر">

۲. توصیف‌گر تراکم پیکسلی یا x

این روش بیشتر برای تصاویری با اندازه‌ی نمایش ثابت کاربرد دارد؛ مثل آیکن‌ها یا لوگوهایی که در یک اندازه مشخص نمایش داده می‌شوند:

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x"
  width="180"
  height="50"
  alt="لوگوی سایت">

در اینجا دستگاه‌هایی با نمایشگر Retina یا تراکم پیکسلی بالاتر می‌توانند نسخه‌ی 2x را دریافت کنند.

برای تصاویر محتوایی، تصویر شاخص مقاله، محصولات فروشگاهی و تصاویر با عرض متغیر، معمولاً استفاده از w و sizes انتخاب حرفه‌ای‌تر و منعطف‌تری است.

نقش تگ picture در تصاویر واکنش‌گرا

تگ <picture> زمانی استفاده می‌شود که علاوه بر اندازه، بخواهید فرمت تصویر یا حتی کادر و محتوای تصویر را تغییر دهید.

برای مثال، ممکن است بخواهید:

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

نمونه برای ارائه‌ی فرمت‌های مختلف:

<picture>
  <source
    type="image/avif"
    srcset="
      /images/seo-image-480.avif 480w,
      /images/seo-image-768.avif 768w,
      /images/seo-image-1200.avif 1200w
    "
    sizes="(max-width: 767px) 100vw, 800px">

  <source
    type="image/webp"
    srcset="
      /images/seo-image-480.webp 480w,
      /images/seo-image-768.webp 768w,
      /images/seo-image-1200.webp 1200w
    "
    sizes="(max-width: 767px) 100vw, 800px">

  <img
    src="/images/seo-image-1200.jpg"
    width="1200"
    height="675"
    alt="بهینه‌سازی تصاویر برای افزایش سرعت سایت"
    decoding="async">
</picture>

مرورگر اولین فرمت قابل پشتیبانی را انتخاب می‌کند. این ساختار برای سایت‌هایی که می‌خواهند حداکثر فشرده‌سازی را بدون حذف سازگاری مرورگرها داشته باشند، بسیار مفید است.

Art Direction چیست؟

Art Direction در تصاویر واکنش‌گرا به این معناست که به‌جای ارائه‌ی نسخه‌های کوچک و بزرگ از یک تصویر مشابه، نسخه‌هایی با قاب‌بندی یا محتوای بصری متفاوت برای دستگاه‌های مختلف بسازید.

برای مثال، یک بنر عریض دسکتاپ ممکن است در موبایل جذاب یا خوانا نباشد. در نسخه‌ی موبایل، می‌توانید یک تصویر عمودی با تمرکز روی سوژه‌ی اصلی ارائه دهید.

<picture>
  <source
    media="(max-width: 767px)"
    srcset="/images/hero-mobile.webp">

  <source
    media="(min-width: 768px)"
    srcset="/images/hero-desktop.webp">

  <img
    src="/images/hero-desktop.webp"
    width="1600"
    height="650"
    alt="طراحی وب‌سایت حرفه‌ای و سریع">
</picture>

این روش برای موارد زیر ارزشمند است:

• اسلایدرها و بنرهای اصلی
• تصاویر هدر
• کمپین‌های تبلیغاتی
• صفحات فرود
• تصاویر محصول با جزئیات مهم
• تصاویر دارای متن یا سوژه‌ی حساس به برش

نکته‌ی مهم: برای محتوای داخل تصویر، تا جای ممکن از متن گرافیکی استفاده نکنید. متن HTML هم برای سئو و هم برای دسترس‌پذیری بهتر است.

چند نسخه از هر تصویر لازم است؟

تعداد نسخه‌های تصویر باید متناسب با نوع سایت، قالب، اندازه‌های واقعی نمایش و فضای هاست تعیین شود. هیچ عدد واحدی برای همه‌ی سایت‌ها وجود ندارد، اما در بیشتر پروژه‌ها، تولید ۳ تا ۵ اندازه‌ی کاربردی کافی است.

برای نمونه، می‌توانید این عرض‌ها را در نظر بگیرید:

• 480px برای موبایل‌های کوچک و متوسط
• 768px برای موبایل‌های بزرگ و تبلت
• 1024px برای تبلت افقی و محتواهای عریض
• 1280px برای دسکتاپ استاندارد
• 1600px برای تصاویر هیرو یا نمایشگرهای عریض

تولید تعداد زیادی نسخه‌ی غیرضروری از هر تصویر، فضای دیسک و هزینه‌ی بکاپ را افزایش می‌دهد. در سایت‌های وردپرسی، این موضوع مهم‌تر است؛ زیرا وردپرس و برخی افزونه‌ها ممکن است به‌صورت خودکار چندین thumbnail از هر فایل آپلودی بسازند.

بنابراین بهتر است سایزهای پیش‌فرض، سایزهای ثبت‌شده توسط قالب و افزونه‌هایی مثل WooCommerce یا Elementor را بررسی و موارد غیرضروری را با احتیاط حذف کنید. قبل از هر تغییری نیز بکاپ کامل فایل‌ها و دیتابیس ضروری است.

فرمت مناسب برای تصاویر واکنش‌گرا: WebP، AVIF، JPEG یا PNG؟

انتخاب فرمت به نوع تصویر بستگی دارد.

JPEG

برای عکس‌های واقعی، تصاویر طبیعت، محصولات و تصاویر دارای جزئیات زیاد همچنان فرمت قابل‌قبولی است؛ اما در بسیاری از موارد، WebP یا AVIF حجم بهتری ارائه می‌دهند.

PNG

برای تصاویر دارای شفافیت، لوگوها، آیکن‌های خاص یا گرافیک‌هایی که به کیفیت بدون افت نیاز دارند مناسب است؛ اما برای عکس‌های معمولی و تصاویر بزرگ معمولاً حجم بالایی دارد.

WebP

WebP در اکثر مرورگرهای مدرن پشتیبانی می‌شود و معمولاً نسبت به JPEG یا PNG حجم کمتری با کیفیت مشابه ایجاد می‌کند. برای سایت‌های وردپرسی، استفاده از WebP در اغلب سناریوها انتخاب مناسبی است.

AVIF

AVIF اغلب فشرده‌سازی بهتری نسبت به WebP ارائه می‌کند، اما encode کردن آن ممکن است منابع بیشتری مصرف کند و در برخی محیط‌های میزبانی اشتراکی، فرآیند تولید آن سنگین‌تر باشد. برای سایت‌های پرترافیک، اگر سیستم تولید و کش تصاویر به‌درستی طراحی شده باشد، AVIF می‌تواند انتخاب ارزشمندی باشد.

پیشنهاد عملی

برای اکثر سایت‌های وردپرسی:

• نسخه‌ی اصلی آپلودی را باکیفیت اما منطقی نگه دارید.
• WebP را به‌عنوان فرمت اصلی تحویل تصویر در نظر بگیرید.
• در صورت فراهم بودن زیرساخت مناسب، AVIF را نیز اضافه کنید.
• JPEG را برای fallback یا سازگاری نگه دارید.
• PNG را فقط در مواردی استفاده کنید که واقعاً به شفافیت یا کیفیت بدون افت نیاز است.

lazy loading برای تصاویر؛ کجا مفید است و کجا خطرناک؟

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

نمونه:

<img
  src="/images/gallery-item.webp"
  width="800"
  height="600"
  alt="نمونه تصویر گالری"
  loading="lazy"
  decoding="async">

اما یک قانون مهم وجود دارد:

برای تصویر اصلی بالای صفحه یا تصویر LCP از Lazy Loading استفاده نکنید.

اگر تصویر اصلی یک مقاله یا صفحه‌ی فرود lazy load شود، مرورگر ممکن است بارگیری آن را به تأخیر بیندازد. این مسئله می‌تواند LCP را ضعیف کند و نتیجه‌ی کاملاً برعکسی داشته باشد.

استفاده‌ی درست از Lazy Loading

از Lazy Load برای این موارد استفاده کنید:

• تصاویر پایین‌تر از fold
• گالری‌ها
• تصاویر داخل محتوای طولانی
• تصاویر محصولات مرتبط
• تصاویر اسلایدرهای غیرابتدایی
• تصاویر بخش نظرات یا فوتر

اما برای این موارد با احتیاط عمل کنید:

• لوگوی مهم بالای صفحه
• تصویر شاخص بالای مقاله
• تصویر اصلی محصول
• بنر یا هیروی صفحه‌ی اول
• اولین تصویر قابل‌مشاهده در موبایل

تعیین width و height؛ راه‌حل جلوگیری از CLS

یکی دیگر از معیارهای مهم تجربه‌ی صفحه، Cumulative Layout Shift یا CLS است. اگر مرورگر از ابتدا نداند تصویر چه فضایی اشغال خواهد کرد، ممکن است پس از لود تصویر، المان‌های صفحه جابه‌جا شوند.

برای جلوگیری از این مشکل، ابعاد واقعی تصویر را در HTML اعلام کنید:

<img
  src="/images/responsive-image.webp"
  width="1200"
  height="675"
  alt="تصاویر واکنش‌گرا برای سئو و سرعت سایت">

مرورگر با استفاده از نسبت عرض به ارتفاع، فضای لازم را قبل از کامل شدن دانلود فایل رزرو می‌کند. در CSS نیز بهتر است این الگو را داشته باشید:

.article-content img {
  display: block;
  max-width: 100%;
  height: auto;
}

ترکیب width، height و height: auto باعث می‌شود تصویر هم واکنش‌پذیر باشد و هم باعث پرش ناگهانی چیدمان نشود.

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

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

<img
  src="https://example.com/uploads/image-1024x576.webp"
  srcset="
    https://example.com/uploads/image-480x270.webp 480w,
    https://example.com/uploads/image-768x432.webp 768w,
    https://example.com/uploads/image-1024x576.webp 1024w,
    https://example.com/uploads/image-1536x864.webp 1536w
  "
  sizes="(max-width: 1024px) 100vw, 1024px"
  width="1024"
  height="576"
  alt="نمونه تصویر">

با این حال، وجود srcset به‌تنهایی تضمین نمی‌کند که همه‌چیز بهینه است. لازم است بررسی کنید:

• آیا سایزهای تولیدشده واقعاً با طراحی قالب هم‌خوان هستند؟
• آیا تصویر شاخص در صفحه‌ی مقاله، عرض واقعی درستی دارد؟
• آیا Elementor یا قالب شما تصاویر را با اندازه‌ی Full بارگذاری نمی‌کند؟
• آیا افزونه‌ی بهینه‌سازی، srcset را حذف یا خراب نکرده است؟
• آیا WebP و AVIF به‌صورت اصولی و سازگار سرو می‌شوند؟
• آیا در کش LiteSpeed، تصاویر برای همه‌ی کاربران به‌درستی تحویل داده می‌شوند؟

نکته برای Elementor و ابزارک‌ها

در Elementor یا سایر صفحه‌سازها، هنگام انتخاب تصویر، همیشه گزینه‌ی Image Size را بررسی کنید. انتخاب بی‌دلیل گزینه‌ی Full برای تصاویر داخل کارت‌ها، ستون‌های کوچک یا ابزارک‌های پایین صفحه معمولاً باعث دانلود فایل سنگین‌تر از نیاز می‌شود.

برای مثال، اگر یک تصویر در کارت محصول با عرض ۳۰۰ پیکسل نمایش داده می‌شود، استفاده از فایل اصلی ۲۰۰۰ پیکسلی منطقی نیست. بهتر است سایز متناسبی مثل Medium Large یا یک سایز اختصاصی بهینه انتخاب شود.

ساخت نسخه‌های مختلف تصویر با Sharp

Sharp یک کتابخانه‌ی سریع برای Node.js است که به‌خصوص برای تولید گروهی تصویر، ساخت thumbnail، تبدیل فرمت و قرار دادن فرآیند بهینه‌سازی در pipeline پروژه مناسب است.

نمونه‌ی ساده:

import sharp from 'sharp';

await sharp('original-image.jpg')
  .resize({
    width: 768,
    withoutEnlargement: true
  })
  .webp({
    quality: 82
  })
  .toFile('image-768.webp');

در این کد:

• تصویر به عرض ۷۶۸ پیکسل تغییر اندازه می‌دهد.
• با withoutEnlargement از بزرگ شدن غیرضروری تصاویر کوچک جلوگیری می‌شود.
• خروجی با فرمت WebP و کیفیت ۸۲ ذخیره می‌شود.

برای سایت‌های بزرگ، بهتر است این عملیات هنگام آپلود تصویر، در صف پردازش یا روی سرور جداگانه انجام شود؛ نه در هر درخواست کاربر. پردازش هم‌زمان تصویر هنگام بازدید، به‌ویژه در هاست اشتراکی، می‌تواند CPU و حافظه را تحت فشار قرار دهد.

تغییر اندازه تصویر با ImageMagick

ImageMagick ابزار قدرتمند خط فرمان برای پردازش تصویر است. برای کارهای فوری، تغییر اندازه‌ی چند فایل و اسکریپت‌های سمت سرور کاربرد دارد.

مثال برای ایجاد نسخه‌ای با عرض حداکثر ۱۲۰۰ پیکسل:

magick original.jpg -resize 1200x1200\> optimized-image.jpg

علامت > باعث می‌شود اگر فایل اصلی کوچک‌تر از اندازه‌ی مشخص‌شده است، بی‌دلیل بزرگ نشود.

نمونه برای تبدیل به WebP:

magick original.jpg -resize 1200x1200\> -quality 82 optimized-image.webp