چرا بهینه‌سازی تصاویر در Responsive Design حیاتی است؟

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

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

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

مشکل بزرگ‌تر این است که اغلب سایت‌ها یک نسخه تصویر دارند و همان را در همه دستگاه‌ها استفاده می‌کنند. یعنی تصویر هدر که در دسکتاپ در عرض ۱۹۲۰ پیکسل نمایش داده می‌شود، در موبایل با عرض ۳۷۵ پیکسل هم همان فایل را دریافت می‌کند. این اتلاف پهنای باند، هم زمان بارگذاری را بالا می‌برد و هم نرخ پرش موبایل را. برای درک عمیق‌تر تأثیر این وضعیت بر معیارهای گوگل، تأثیر تصاویر سنگین بر Core Web Vitals را ببینید.

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

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

تصویر ریسپانسیو یعنی تصویری که در هر دستگاهی با اندازه و کیفیت مناسب همان دستگاه ارائه شود. نه یک تصویر ثابت که در همه جا پخش شود، نه چند تصویر جدا که شما دستی مدیریت کنید. استاندارد HTML از سال‌ها پیش ابزارهایی برای این کار ارائه کرده: ویژگی‌های srcset و sizes در تگ img، و تگ picture برای کنترل دقیق‌تر. با این ابزارها، شما به مرورگر می‌گویید چند نسخه از تصویر دارید و مرورگر خودش تصمیم می‌گیرد کدام نسخه را دانلود کند. مبنای تصمیم‌گیری مرورگر، ترکیبی است از عرض صفحه، تراکم پیکسل دستگاه (DPR - Device Pixel Ratio) و شرایط شبکه.

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

انتخاب فرمت تصویر: JPEG، WebP یا AVIF؟

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

مقایسه دقیق‌تر این فرمت‌ها را در بهترین فرمت تصویر برای وب نوشته‌ام؛ اما خلاصه انتخاب من در پروژه‌ها این است: از WebP به‌عنوان فرمت پیش‌فرض استفاده کنید، و اگر می‌خواهید پا را فراتر بگذارید، با تگ picture چند فرمت را به مرورگر ارائه دهید تا خودش انتخاب کند. مقایسه عددی WebP و JPEG در WebP یا JPEG برای سرعت سایت آمده که توصیه می‌کنم ببینید. AVIF را امروز می‌توانید به‌عنوان گزینه دوم در picture قرار دهید تا برای مرورگرهای پشتیبان بارگذاری شود.

مثال عملی استفاده از picture

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

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

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

مثال ساده‌ای که در پروژه‌ها زیاد استفاده می‌کنم: برای تصویر شاخص یک نوشته، پنج نسخه با عرض‌های ۳۲۰، ۶۴۰، ۹۶۰، ۱۲۸۰ و ۱۹۲۰ پیکسل تولید می‌کنم. سپس در sizes مشخص می‌کنم که در عرض کمتر از ۷۶۸ پیکسل، تصویر ۱۰۰ درصد عرض صفحه است؛ در عرض ۷۶۸ تا ۱۰۲۴ پیکسل، نصف عرض؛ و در عرض‌های بزرگ‌تر، یک‌سوم عرض. با این تنظیمات، موبایل نسخه ۳۲۰ یا ۶۴۰ را دانلود می‌کند و دسکتاپ نسخه ۱۲۸۰ یا ۱۹۲۰ را.

بدون sizes درست، srcset مانند یک کتابخانه بدون فهرست است؛ مرورگر نمی‌داند کدام نسخه را انتخاب کند و مجبور است محافظه‌کار باشد.

ابعاد اعلام‌شده و CLS

یکی از اشتباهات پرتکرار در سایت‌های وردپرسی، نبود ابعاد در تگ img است. وقتی عرض و ارتفاع تصویر در تگ مشخص نباشد، مرورگر تا زمان بارگذاری کامل تصویر، فضایی برای آن رزرو نمی‌کند. به‌محض رسیدن تصویر، عناصر زیرین جابه‌جا می‌شوند. این پدیده با نام انحراف تجمعی چیدمان یا CLS (Cumulative Layout Shift) شناخته می‌شود و مستقیماً بر معیارهای گوگل تأثیر می‌گذارد.

در وردپرس، اگر از ویرایشگر بلوک استفاده کنید و تصویر را از طریق کتابخانه رسانه آپلود کنید، ابعاد به‌طور خودکار اعلام می‌شوند. اما در قالب‌های دست‌ساز یا در تصاویری که با CSS یا جاوااسکریپت بارگذاری می‌شوند، ابعاد اغلب فراموش می‌شوند. راه‌حل ساده است: همیشه برای تگ img، هم در HTML و هم در CSS، ابعاد یا نسبت ابعاد (aspect-ratio) مشخص کنید. توضیح کامل این مفهوم و راه‌های کاهش آن در CLS چیست و چگونه کاهش می‌یابد آمده است.

lazy-load: کجا بله، کجا هرگز

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

قاعده ساده‌ای که در پروژه‌ها به کار می‌برم این است: برای تصاویر بالای خط دید (above the fold)، هرگز از lazy-load استفاده نکنید و در عوض با ویژگی‌های fetchpriority و loading="eager" به مرورگر بگویید این تصویر را در اولویت قرار دهد. برای تصاویر زیر خط دید، lazy-load یک ابزار مفید است. توضیح عمیق‌تر این معیار و راه‌های بهینه‌سازی آن را در LCP چیست و چگونه بهینه شود نوشته‌ام.

فشرده‌سازی هوشمند: تعادل کیفیت و حجم

فشرده‌سازی، مرحله‌ای است که در آن با کاهش حجم فایل، تصویر را برای وب سبک‌تر می‌کنیم. دو نوع فشرده‌سازی وجود دارد: فشرده‌سازی بدون افت (Lossless) که کیفیت را کاملاً حفظ می‌کند اما حجم را کمتر می‌کاهد، و فشرده‌سازی با افت (Lossy) که با از دست دادن بخشی از جزئیات، حجم را به‌طور چشمگیری کاهش می‌دهد. در عمل، تقریباً همیشه از فشرده‌سازی با افت استفاده می‌کنم اما کیفیت را روی عددی نگه می‌دارم که چشم کاربر تفاوت را تشخیص ندهد؛ معمولاً بین ۷۵ تا ۸۵ درصد برای JPEG و مشابه برای WebP.

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

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

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

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

راه‌حل عملی در وردپرس، ترکیب سه کار است. اول، اطمینان از فعال بودن نسخه‌های خودکار تصویر در تنظیمات رسانه. دوم، استفاده از افزونه‌ای که به‌صورت خودکار WebP تولید کند و srcset را با sizes درست تزریق کند. سوم، بازبینی دستی در DevTools که آیا موبایل واقعاً نسخه کوچک را دریافت می‌کند یا نه. در پروژه‌ها معمولاً افزونه‌های بهینه‌سازی تصویر این کار را به‌خوبی انجام می‌دهند؛ فهرستشان را در بهترین افزونه‌های بهینه‌سازی تصویر وردپرس آورده‌ام.

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

تصویر خوب، تصویری است که کاربر ببیند و متوجه نشود چقدر سبک است؛ تصویر بد، تصویری است که کاربر منتظر بماند تا ببیند.

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

آیا همه تصاویر باید WebP باشند؟

تقریباً بله، اما نه به‌طور مطلق. برای اکثر مرورگرهای امروزی، WebP هم سبک‌تر است و هم کیفیت مشابه دارد. اما برای پشتیبانی از مرورگرهای قدیمی، بهتر است با تگ picture یک نسخه JPEG هم ارائه دهید. AVIF هم به‌عنوان گزینه پیشرفته در همان ساختار قابل استفاده است.

آیا فشرده‌سازی زیاد به کیفیت آسیب می‌زند؟

بله. فشرده‌سازی تهاجمی در تصاویر پرجزئیات (مثل عکس‌های پوست، پارچه یا مناظر) می‌تواند نویز و لکه ایجاد کند. توصیه می‌کنم برای هر دسته تصویر، سطح فشرده‌سازی مناسب تعیین کنید و همیشه قبل از انتشار، تصویر را در موبایل با چشم بررسی کنید. نرم‌افزارهایی که امکان تنظیم دقیق سطح فشرده‌سازی می‌دهند انتخاب بهتری هستند.

چرا سایت من با وجود تصاویر کم‌حجم، کند است؟

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

آیا lazy-load همیشه مفید است؟

خیر. برای تصاویر بالای خط دید، lazy-load مضر است چون LCP را به تأخیر می‌اندازد. برای تصاویر زیر خط دید مفید است. توصیه می‌کنم با افزونه‌ها یا کد سفارشی، تصویر اصلی هدر را از lazy-load استثنا کنید.

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

بله، بسیار. بسیاری از CDNهای امروزی، امکان تبدیل تصویر در لحظه را دارند: یعنی نسخه WebP و اندازه‌های مختلف را به‌طور خودکار بر اساس دستگاه کاربر سرو می‌کنند. این ویژگی باعث می‌شود موبایل دقیقاً همان نسخه‌ای را دریافت کند که نیاز دارد. اگر سایت شما مخاطب جهانی دارد، CDN یکی از مؤثرترین راهکارهاست.

چه اشتباهاتی در بهینه‌سازی تصویر رایج است؟

سه اشتباه رایج: اول، بارگذاری همان تصویر دسکتاپ در موبایل. دوم، نبود ابعاد در تگ img که منجر به CLS می‌شود. سوم، استفاده از lazy-load برای تصاویر حیاتی بالای صفحه. اشتباهات بیشتر را در اشتباهات رایج بهینه‌سازی تصاویر فهرست کرده‌ام.

سخنی از تجربه: تصویر، تصمیم معماری است

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

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