چگونه تصاویر را برای موبایل بهینه کنیم؟

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

چرا تصویر موبایل، گلوگاه اصلی سرعت است؟

فرض کنید تصویر یک محصول را با ابعاد ۳۰۰۰ در ۲۰۰۰ پیکسل و حجم ۳ مگابایت آپلود کرده‌اید و در صفحه با width: 300px نمایش می‌دهید. مرورگر دسکتاپ همان ۳ مگابایت را دانلود می‌کند اما روی اینترنت پرسرعت و پردازنده قوی، حس بدی ایجاد نمی‌کند. همین فایل روی یک گوشی میان‌رده با اینترنت ۴G، به یک انتظار چندثانیه‌ای تبدیل می‌شود. این پدیده در بحث سئوی تصویر هم توضیح داده شده، اما اینجا تمرکز روی موبایل است. اگر می‌خواهید بدانید این تصویر چه اثری روی امتیاز کل صفحه دارد، بخش LCP در Core Web Vitals چیست را ببینید.

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

srcset و ابعاد تصویر

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

1. در تنظیمات رسانه وردپرس، سایزهای اضافی را حذف کنید و فقط سایزهایی را نگه دارید که واقعاً در طرح استفاده می‌شوند.
2. مطمئن شوید قالب یا صفحه‌ساز شما srcset را در تگ <img> قرار می‌دهد.

<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="600"
  alt="بنر اصلی صفحه">

نکته‌ای که در پروژه‌ها زیاد دیده‌ام: خیلی از قالب‌های چندمنظوره (multipurpose theme) به‌دلیل ساختار پیچیده، srcset را در بلوک‌های صفحه‌ساز حذف می‌کنند و شما مجبورید همان تصویر کامل را به موبایل بفرستید. اگر با این مشکل درگیر هستید، مقایسه قالب سبک وردپرس نقطه شروع خوبی است.

فرمت‌های مدرن و انتخاب درست

برای بهینه‌سازی موبایل، ترتیب ترجیح من این است: WebP به‌عنوان پیش‌فرض تصاویر عکس‌گونه، AVIF به‌عنوان انتخاب آینده‌محور برای پروژه‌های پرمخاطب با پشتیبانی کافی، و JPEG به‌عنوان fallback برای مرورگرهای قدیمی. PNG را فقط برای گرافیک‌های تخت و آیکون‌ها نگه دارید. مقایسه تفصیلی این فرمت‌ها در بهترین فرمت تصویر برای وب آمده است. یک داده واقعی: در چند پروژه، مهاجرت از JPEG به WebP در تصاویر محتوایی، حدود ۲۵ تا ۳۵ درصد کاهش بایت به‌همراه داشت، بدون تغییر محسوس در کیفیت بصری.

نکته‌ای که فراموش می‌شود: فرمت بهتر بدون فشرده‌سازی درست، نصف فایده را می‌دهد. WebP با کیفیت ۱۰۰ می‌تواند از JPEG با کیفیت ۸۰ بزرگ‌تر شود. ترتیب درست: فرمت مدرن + فشرده‌سازی بی‌ضرر. روش‌های عملی در فشرده‌سازی تصاویر سایت آمده است.

تصویر شاخص روی موبایل

تصویر شاخص (featured image) پرنمایش‌ترین تصویر سایت شماست. در فهرست‌های موبایل، این تصویر معمولاً کوچک‌تر از دسکتاپ رندر می‌شود، اما اگر سایز خودش را نگیرد، همان بایت سنگین را می‌فرستد. دو قاعده عملی:

• سایز شاخص را با ابعاد واقعی نمایش هم‌راستا کنید (معمولاً ۶۰۰ تا ۸۰۰ پیکسل عرض در فهرست‌های موبایل کافی است).
• اگر قالب شما تصویر شاخص را به‌عنوان LCP صفحه پست بارگذاری می‌کند، fetchpriority="high" و loading="eager" روی آن بگذارید؛ روی موبایل این جزئیات تفاوت محسوسی در LCP ایجاد می‌کند.

lazy-load و تفاوت بنر با بقیه صفحه

lazy-load یعنی تصویر تا نزدیک نشدن به دید کاربر دانلود نشود. این ویژگی در وردپرس مدرن به‌صورت بومی فعال است، اما سه اشتباه رایج دارد. اول، اعمال lazy روی اولین عنصر بصری صفحه (بنر اصلی) که منجر به تأخیر در LCP می‌شود. دوم، lazy روی تصاویری که بلافاصله در دید هستند و تفاوتی ایجاد نمی‌کند جز یک ثانیه تأخیر در نمایش. سوم، اعمال lazy روی پس‌زمینه‌های CSS که به‌صورت بومی پشتیبانی نمی‌شود و منجر به حلقه‌های جاوااسکریپتی می‌شود. قاعده ساده: عنصر اصلی بالای صفحه، eager؛ بقیه صفحه، lazy.

<!-- banner -->
<img src="hero.webp" loading="eager" fetchpriority="high">

<!-- below the fold -->
<img src="gallery-1.webp" loading="lazy">

فشرده‌سازی و ابزارها

ابزارها دو دسته‌اند: افزونه‌های بهینه‌سازی که در وردپرس کار می‌کنند (مقایسه‌شان در بهترین افزونه‌های بهینه‌سازی تصویر آمده) و سرویس‌های CDN که تبدیل فرمت و بهینه‌سازی را in-the-fly انجام می‌دهند (راه‌اندازی‌شان در راه‌اندازی CDN برای وردپرس). پیشنهاد من برای موبایل: یکی از این دو لایه را فعال کنید، اما نه هر دو را روی یک تصویر — چون دو لایه بهینه‌سازی روی هم می‌توانند کیفیت را در چند نسل کاهش دهند (generation loss).

بهترین تصویر موبایل آن است که کاربر ندیده که دانلود شده؛ فقط دیده که سریع ظاهر شده است.

تست واقعی روی موبایل

تست تصویر روی دسکتاپ گمراه‌کننده است. حتماً سایت را روی گوشی خودتان با دیتای اپراتور (نه وای‌فای اداری) باز کنید و در سربرگ Network مرورگر موبایل، فهرست تصاویر دانلودشده را ببینید. سوال کلیدی: آیا در عرض صفحه شما، نسخه‌ای از تصویر که دانلود شده، نزدیک به ابعاد نمایش است؟ اگر بله، srcset کار می‌کند. اگر نه، مشکل در قالب یا تنظیمات است.

تست دوم: صفحه را در حالت پراکسی کند (Slow 4G) باز کنید و ببینید تصویر اصلی صفحه چه زمانی ظاهر می‌شود. اگر زمان قابل توجهی طول می‌کشد، مهم نیست ابزارهای بهینه‌سازی چه می‌گویند؛ تجربه واقعی کاربر همان است که دیده‌اید. سنجه دقیق‌تر LCP را در LCP چیست و چگونه بهینه می‌شود با آستانه‌های رسمی‌اش آورده‌ام.

جدول مرجع

پرسش‌های کوتاه

آیا WebP روی همه موبایل‌ها پشتیبانی می‌شود؟ بله، از سال‌ها پیش پشتیبانی مرورگرهای اصلی موبایل کامل شده است. تنها مرورگرهای بسیار قدیمی ممکن است پشتیبانی نکنند؛ برای همین گذاشتن JPEG به‌عنوان fallback در صورت نیاز بازار، همچنان منطقی است.

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

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

از زاویه فنی

در نگاه مهندسی، بهینه‌سازی تصویر موبایل یک مسئله توزیع‌شده است: تصمیم می‌گیرید کدام نسخه از فایل، در کدام مرحله از چرخه تحویل، به کدام دستگاه برسد. سه نکته سطح‌پایین که در پروژه‌های بزرگ به‌کار آمده: اول، ابعاد width و height در تگ <img> را همیشه نگه دارید تا مرورگر جای تصویر را قبل از دانلود رزرو کند و CLS حفظ شود؛ جزئیات CLS در CLS چیست و چگونه کاهش می‌یابد آمده. دوم، برای صفحات با گالری سنگین، از content-visibility روی بلوک‌های گالری استفاده کنید تا مرورگر از رندر بخش‌های دور از دید صرف‌نظر کند. سوم، اگر روی CDN تصویر درست می‌کنید، هدر Vary: Accept را برای پشتیبانی از WebP و AVIF جدا تنظیم کنید تا کش مرورگر دچار اشتباه در نوع فایل نشود. این تصمیم‌ها در ظاهر جزئی‌اند، اما در تجربه نهایی کاربر موبایل، تفاوت محسوسی می‌سازند — همان تفاوتی که بین ماندن و رفتن کاربر روی یک صفحه محصول، تعیین می‌کند.

اگر در پروژه‌ای تجربه کرده‌اید که یک تغییر ساده در تصاویر موبایل، جهش محسوسی در نرخ پرش یا سرعت ایجاد کرد، در دیدگاه‌ها بنویسید. جزئیات همان تجربه، برای نفر بعدی از هر قاعده کلی‌تر مفیدتر است. 🖼️