بهینه سازی تصاویر برای وب؛ راهنمای عملی برای LCP بهتر

اگر سرعت سایت شما پایین است و در گزارش PageSpeed Insights نمره‌ی LCP (Largest Contentful Paint) خوبی نمی‌گیرید، به احتمال زیاد مشکل از تصاویر است. تصاویر معمولاً سنگین‌ترین بخش هر صفحه‌ی وب هستند و گاهی بیش از ۶۰٪ از حجم کل صفحه را تشکیل می‌دهند. در این مقاله، یک فرآیند کامل و عملی برای بهینه سازی تصاویر ارائه می‌کنیم؛ از انتخاب فرمت درست تا پیاده‌سازی lazy loading. این راهنما برای طراحان وب، توسعه‌دهندگان و مدیران سایت‌هایی که با وردپرس یا کدنویسی خام کار می‌کنند، مفید است.

چرا بهینه سازی تصاویر مستقیماً روی LCP اثر می‌گذارد؟

LCP یکی از معیارهای اصلی Core Web Vitals است که زمان بارگذاری بزرگ‌ترین عنصر قابل مشاهده در صفحه را اندازه می‌گیرد. در اکثر صفحات، این عنصر یک تصویر hero یا تصویر اصلی مقاله است. اگر این تصویر ۲ مگابایت حجم داشته باشد، مرورگر باید آن را دانلود، decode و رندر کند؛ این فرآیند می‌تواند چند ثانیه طول بکشد و LCP شما را به شدت خراب کند.

طبق آمار منتشرشده از سمت Google، ۵۳٪ از بازدیدهای موبایل اگر بارگذاری صفحه بیشتر از ۳ ثانیه طول بکشد، رها می‌شوند. بهینه سازی تصاویر نه‌تنها تجربه‌ی کاربر را بهبود می‌دهد، بلکه یک سیگنال مثبت برای رتبه‌بندی گوگل است.

سه عامل اصلی که LCP تصویر را تعیین می‌کنند

• حجم فایل: هرچه فایل سبک‌تر باشد، دانلود سریع‌تر انجام می‌شود.
• زمان شروع دانلود: اگر تصویر با lazy loading بارگذاری شود و در viewport نباشد، شروع دانلود به تأخیر می‌افتد.
• زمان decode: فرمت‌های مدرن مثل WebP سریع‌تر از JPEG قدیمی decode می‌شوند.

قدم اول: انتخاب فرمت درست (WebP در مقابل JPEG و PNG)

فرمت WebP که توسط Google توسعه داده شده، به طور میانگین ۲۵ تا ۳۵٪ حجم کمتری نسبت به JPEG با کیفیت مشابه دارد. برای تصاویر با شفافیت، WebP جایگزین بسیار بهتری برای PNG است؛ یک تصویر PNG با شفافیت ممکن است ۱ مگابایت باشد، در حالی که همان تصویر با فرمت WebP کمتر از ۳۰۰ کیلوبایت حجم خواهد داشت.

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

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

اگر از وردپرس استفاده می‌کنید، افزونه‌هایی مثل WebP Converter for Media یا Smush می‌توانند به صورت خودکار تصاویر را تبدیل کنند. اما اگر کدنویسی می‌کنید، بهترین ابزار خط فرمان cwebp است که همراه با کتابخانه‌ی libwebp نصب می‌شود. مثال:

# نصب روی Ubuntu/Debian
sudo apt install webp

# تبدیل یک تصویر JPEG به WebP با کیفیت ۸۰
cwebp -q 80 input.jpg -o output.webp

# تبدیل یک پوشه کامل به صورت دسته‌ای
for img in *.jpg; do cwebp -q 80 "$img" -o "${img%.jpg}.webp"; done

نکته‌ی مهم: کیفیت ۸۰ معمولاً بهترین تعادل بین حجم و کیفیت بصری است. کیفیت بالاتر از ۹۰ حجم را به شدت افزایش می‌دهد بدون اینکه تفاوت محسوسی در نمایش ایجاد کند.

خطای رایج: استفاده از WebP بدون fallback

اگر مرورگر کاربر از WebP پشتیبانی نکند (مثل برخی مرورگرهای قدیمی)، تصویر نمایش داده نمی‌شود. راه‌حل استاندارد استفاده از تگ <picture> است:

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

مرورگرهای مدرن فایل WebP را انتخاب می‌کنند و مرورگرهای قدیمی به JPEG برمی‌گردند. این روش استاندارد و کاملاً سازگار با سئو است.

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

یکی از بزرگ‌ترین اشتباهات، آپلود یک تصویر ۴۰۰۰ پیکسلی و نمایش آن در یک قاب ۸۰۰ پیکسلی است. مرورگر مجبور است کل فایل بزرگ را دانلود کند و سپس آن را کوچک‌نمایی کند. این کار هم پهنای باند را هدر می‌دهد و هم LCP را خراب می‌کند.

قبل از آپلود، تصویر را دقیقاً به اندازه‌ای که در سایت نمایش داده می‌شود تغییر دهید. اگر مطمئن نیستید، از تصاویر ۲x برای نمایش در صفحه‌های Retina استفاده کنید؛ یعنی اگر تصویر در CSS با عرض ۴۰۰ پیکسل نمایش داده می‌شود، فایل را با عرض ۸۰۰ پیکسل ذخیره کنید.

ابزارهای تغییر اندازه

• ImageMagick: قدرتمندترین ابزار خط فرمان. مثال: convert input.jpg -resize 800x600 output.jpg
• Photoshop یا GIMP: برای تغییر اندازه‌ی دستی و کنترل کیفیت.
• سرویس‌های آنلاین: مثل Squoosh.app از Google که هم تغییر اندازه می‌دهد و هم فرمت را تبدیل می‌کند.

در وردپرس، افزونه‌هایی مثل Smush یا ShortPixel به صورت خودکار اندازه‌ی تصاویر را هنگام آپلود اصلاح می‌کنند و نسخه‌های مختلف برای responsive تولید می‌کنند.

خطای رایج: فراموش کردن ویژگی‌های width و height

اگر در تگ <img> ویژگی‌های width و height را مشخص نکنید، مرورگر ابتدا صفحه را رندر می‌کند و سپس با دانلود تصویر، layout را جابه‌جا می‌کند. این پدیده که CLS (Cumulative Layout Shift) نام دارد، یکی دیگر از معیارهای Core Web Vitals است و امتیاز شما را پایین می‌آورد. همیشه ابعاد را مشخص کنید:

<img src="image.webp" width="800" height="600" alt="توضیح">

قدم سوم: پیاده‌سازی lazy loading

lazy loading به این معناست که تصاویر خارج از دید کاربر (below the fold) تا زمانی که کاربر به آن‌ها اسکرول نکند، بارگذاری نشوند. این کار باعث می‌شود منابع مرورگر روی تصاویر مهم (مثل تصویر hero) متمرکز شود و LCP بهبود یابد.

ساده‌ترین روش استفاده از ویژگی بومی loading="lazy" است که در HTML5 اضافه شده و توسط همه‌ی مرورگرهای مدرن پشتیبانی می‌شود:

<img src="image.webp" loading="lazy" width="800" height="600" alt="توضیح">

اما نکته‌ی حیاتی: هرگز روی تصویر hero یا تصویری که در ابتدای صفحه است، lazy loading اعمال نکنید. این تصویر باید فوراً بارگذاری شود تا LCP شما خوب باشد. برای تصویر hero، از loading="eager" و fetchpriority="high" استفاده کنید:

<img src="hero.webp" loading="eager" fetchpriority="high" width="1200" height="675" alt="تصویر اصلی">

روش پیشرفته: Intersection Observer

اگر نیاز به کنترل بیشتر دارید، می‌توانید از Intersection Observer API استفاده کنید. این روش به شما اجازه می‌دهد تا قبل از ورود تصویر به viewport، آن را بارگذاری کنید (مثلاً ۲۰۰ پیکسل زودتر) تا تجربه‌ی کاربر روان‌تر باشد:

const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, { rootMargin: '200px' });

images.forEach(img => observer.observe(img));

در این روش، به جای src از data-src استفاده می‌کنید تا مرورگر تصویر را از ابتدا دانلود نکند.

خطای رایج: lazy loading روی همه‌ی تصاویر

برخی توسعه‌دهندگان برای سادگی، روی همه‌ی تصاویر lazy loading اعمال می‌کنند. این کار اشتباه است؛ تصویر hero باید فوراً بارگذاری شود. اگر lazy loading روی تصویر hero اعمال شود، مرورگر ممکن است آن را با تأخیر بارگذاری کند و LCP شما به شدت بدتر شود. همیشه تصاویر بالای صفحه را با loading="eager" مشخص کنید.

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

فشرده‌سازی تصاویر به دو نوع تقسیم می‌شود: lossy (با افت کیفیت) و lossless (بدون افت کیفیت). برای عکس‌های وب، فشرده‌سازی lossy با کیفیت ۷۰ تا ۸۵ معمولاً بهترین نتیجه را می‌دهد؛ تفاوت کیفیت با حالت اصلی تقریباً نامحسوس است اما حجم فایل ۵۰ تا ۷۰٪ کاهش می‌یابد.

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

• ImageOptim (مک): رایگان و بسیار مؤثر.
• RIOT (ویندوز): فشرده‌سازی با پیش‌نمایش زنده.
• TinyPNG / TinyJPG: سرویس آنلاین با API برای اتوماسیون.
• mozjpeg: یک fork از JPEG که فشرده‌سازی بهتری ارائه می‌دهد.

اتوماسیون با gulp یا webpack

اگر پروژه‌ی شما از build tool استفاده می‌کند، می‌توانید فشرده‌سازی را به صورت خودکار انجام دهید. مثال با gulp:

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const webp = require('imagemin-webp');

gulp.task('images', () =>
  gulp.src('src/images/**/*')
    .pipe(imagemin([
      imagemin.mozjpeg({ quality: 80 }),
      imagemin.optipng({ optimizationLevel: 3 }),
      imagemin.webp({ quality: 80 })
    ]))
    .pipe(gulp.dest('dist/images'))
);

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

اندازه‌گیری تأثیر بهینه سازی تصاویر بر LCP

بعد از اعمال تغییرات، باید نتیجه را اندازه‌گیری کنید. ابزارهای زیر را استفاده کنید:

1. PageSpeed Insights: گزارش دقیق LCP و پیشنهادهای اختصاصی.
2. Lighthouse در Chrome DevTools: برای تست محلی و سریع.
3. WebPageTest: برای تحلیل عمیق‌تر waterfall و زمان‌بندی دقیق.

یک مثال واقعی: فرض کنید تصویر hero شما قبلاً ۱.۸ مگابایت JPEG بود و LCP شما ۴.۲ ثانیه. بعد از تبدیل به WebP با کیفیت ۸۰ و تغییر اندازه به ۱۲۰۰ پیکسل، حجم به ۲۴۰ کیلوبایت کاهش می‌یابد. با همین تغییر، LCP معمولاً به زیر ۲.۵ ثانیه می‌رسد که در محدوده‌ی سبز Core Web Vitals است.

نکته‌ی نهایی: CDN و کش

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

همچنین، کش مرورگر را فراموش نکنید. با تنظیم هدر Cache-Control روی تصاویر، مرورگر کاربر تصاویر را برای مدت طولانی ذخیره می‌کند و در بازدیدهای بعدی، هیچ درخواستی به سرور ارسال نمی‌شود. این کار LCP را در بازدیدهای تکراری به شدت بهبود می‌بخشد.

جمع‌بندی

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

• تصاویر را به فرمت WebP تبدیل کنید و fallback بگذارید.
• ابعاد تصاویر را به اندازه‌ی واقعی نمایش کاهش دهید.
• از lazy loading فقط برای تصاویر پایین صفحه استفاده کنید.
• فشرده‌سازی lossy با کیفیت ۷۰ تا ۸۵ انجام دهید.
• ابعاد را در تگ img مشخص کنید تا CLS رخ ندهد.
• با ابزارهای اندازه‌گیری، نتیجه را بررسی و بهینه کنید.

با اجرای این مراحل، نه‌تنها LCP شما بهبود می‌یابد، بلکه تجربه‌ی کاربری بهتری ارائه می‌دهید و شانس رتبه‌ی بالاتر در نتایج جستجو را افزایش می‌دهید. بهینه سازی تصاویر یکی از کم‌هزینه‌ترین و مؤثرترین کارهایی است که می‌توانید برای سایت خود انجام دهید.