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

چرا تصاویر این‌قدر روی سرعت اثر دارند؟

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

فرمت درست را انتخاب کنید

همان‌طور که در نمودار بالا می‌بینید، برای یک تصویر یکسان، فرمت‌های مدرن‌تر حجم بسیار کوچک‌تری تولید می‌کنند:

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

راهکار عملی: از تگ <picture> با چند <source> استفاده کنید تا مرورگر بهترین فرمتی که پشتیبانی می‌کند را انتخاب کند و برای مرورگرهای قدیمی‌تر یک نسخه‌ی JPEG/PNG به‌عنوان fallback باقی بماند.

ابعاد درست را آپلود کنید

یکی از رایج‌ترین اشتباهات، آپلود تصویر مستقیم از دوربین یا موبایل (مثلاً ۴۰۰۰ در ۳۰۰۰ پیکسل) برای نمایش در یک باکس ۸۰۰ پیکسلی است. مرورگر مجبور می‌شود کل فایل سنگین را دانلود کند و بعد در CSS کوچکش کند — یعنی پهنای باند برای چیزی که هرگز دیده نمی‌شود هدر می‌رود.

با srcset و sizes می‌توانید چند نسخه از یک تصویر در ابعاد مختلف ارائه دهید تا مرورگر بر اساس اندازه‌ی صفحه‌نمایش، مناسب‌ترین را انتخاب کند:

srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1200.webp 1200w"

Lazy Loading درست

با افزودن loading="lazy" به تصاویر پایین‌تر از fold، مرورگر دانلود آن‌ها را تا نزدیک شدن کاربر به آن بخش صفحه به تعویق می‌اندازد. اما یک نکته‌ی مهم: تصویر LCP (معمولاً همان تصویر اصلی بالای صفحه) هرگز نباید lazy باشد، چون این کار باعث تاخیر در نمایش آن و افت امتیاز LCP می‌شود.

فشرده‌سازی بدون افت محسوس کیفیت

ابزارهایی مثل Squoosh، TinyPNG یا افزونه‌های فشرده‌سازی خودکار (مثل ShortPixel یا Imagify در وردپرس) می‌توانند حجم فایل را بدون افت قابل‌توجه کیفیت بصری تا ۶۰ تا ۸۰ درصد کاهش دهند. برای عکس‌های معمولی، کیفیت ۷۵ تا ۸۵ درصد در فشرده‌سازی JPEG/WebP معمولاً تفاوت بصری محسوسی با کیفیت ۱۰۰ درصد ندارد.

از CDN برای سرو تصاویر استفاده کنید

خیلی از CDN‌های مدرن قابلیت تبدیل خودکار فرمت و تغییر اندازه‌ی تصویر «در لحظه» (on-the-fly image optimization) را دارند؛ یعنی کافیست یک نسخه‌ی با کیفیت بالا آپلود کنید و CDN بر اساس درخواست هر کاربر، نسخه‌ی بهینه را تولید و سرو می‌کند.

SVG برای آیکون‌ها و لوگو

برای گرافیک‌های ساده مثل آیکون، لوگو و نمودار، بهتر است اصلاً از عکس (PNG/JPEG) استفاده نکنید. SVG یک فرمت برداری است، یعنی در هر اندازه‌ای بدون افت کیفیت نمایش داده می‌شود و معمولاً حجمی کمتر از چند کیلوبایت دارد. علاوه بر این، چون SVG متن است (نه داده‌ی باینری)، می‌توان آن را inline در HTML قرار داد و یک درخواست شبکه‌ی جداگانه را کلاً حذف کرد — نکته‌ای که برای آیکون‌های تکرارشونده (مثل آیکون‌های منو یا دکمه‌ها) تفاوت محسوسی در تعداد درخواست‌های صفحه ایجاد می‌کند.

تصاویر پس‌زمینه در CSS را فراموش نکنید

خیلی از تیم‌ها فقط روی تگ <img> تمرکز می‌کنند و تصاویر پس‌زمینه‌ای که با background-image در CSS تعریف شده‌اند را نادیده می‌گیرند. این تصاویر هم دقیقاً همان قوانین را دارند: فرمت مدرن، ابعاد درست و فشرده‌سازی. تفاوت مهم این است که مرورگر نمی‌تواند این تصاویر را lazy load کند مگر با تکنیک‌های اضافی (مثل IntersectionObserver)، پس برای تصاویر پس‌زمینه‌ی سنگین که پایین صفحه هستند، بهتر است به‌جای CSS از <img loading="lazy"> استفاده کنید.

بعد از بهینه‌سازی، نتیجه را اندازه بگیرید

بهینه‌سازی تصویر بدون اندازه‌گیری قبل و بعد، فقط یک حدس است. سه عدد را حتماً قبل و بعد از تغییرات ثبت کنید:

• حجم کل صفحه (Total Page Weight): از تب Network مرورگر یا گزارش SpeedScan قابل مشاهده است.
• زمان LCP: چون در اکثر صفحات، عنصر LCP یک تصویر است.
• تعداد درخواست‌های تصویر: ادغام آیکون‌ها در یک SVG sprite یا استفاده از inline SVG می‌تواند این عدد را به‌طور قابل توجهی کاهش دهد.

چک‌لیست سریع

• تصاویر را به WebP یا AVIF تبدیل کنید.
• ابعاد آپلود را متناسب با محل نمایش انتخاب کنید، نه سایز اصلی دوربین.
• از srcset برای responsive images استفاده کنید.
• تصاویر پایین صفحه را lazy کنید؛ تصویر LCP را هرگز.
• فشرده‌سازی را روی کیفیت ۷۵ تا ۸۵ درصد تنظیم کنید.

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