بهینه سازی تصاویر سایت؛ فرمت، اندازه و بارگذاری تنبل

برای بهینه سازی تصاویر سایت سه کار رو به ترتیب انجام بده. اول ابعاد تصویر رو با اندازه ای که تو صفحه نمایش داده می شه هماهنگ کن. بعد فرمت مناسب (معمولاً WebP) رو بگیر و با فشرده سازی متعادل حجم رو پایین بیار. آخرش هم بارگذاری تنبل رو فقط برای تصاویر پایین تر از صفحه فعال کن. تو وردپرس و سایت سفارشی، این مسیر معمولاً بیشترین کاهش حجم رو با کمترین افت کیفیت می ده و لازم نیست طراح گرافیک یا برنامه نویس حرفه ای باشی. فقط یه شرط داره: مشکل رو اول اندازه بگیر، حدس نزن.

اول بسنج، بعد دست به کار شو

قبل از هر تغییری باید بدونی کدوم تصویر سایتت رو سنگین کرده. معمولاً سه چهار فایل بیشترین سهم رو دارن و بقیه تقریباً بی اثرن.

چطور فایل های سنگین رو پیدا کنی

دو راه ساده داری:

1. PageSpeed Insights رو روی صفحه مهمت اجرا کن. اگه از شبکه ات به این ابزار دسترسی نداری، Lighthouse داخل خود مرورگر کروم همین گزارش رو می ده.
2. توی مرورگر F12 رو بزن، برو تب Network، فیلتر Img رو انتخاب کن و فایل ها رو بر اساس ستون Size مرتب کن.

بعدش دو عدد رو یادداشت کن: حجم کل صفحه و حجم بزرگ ترین تصویر. این دو تا «قبل» تو هستن و آخر کار باهاشون مقایسه می کنیم.

دو نوع مشکل، دو نوع درمان

تصویری که بیش از حد بزرگه (مثلاً ۴۰۰۰ پیکسل پهنا برای کادر ۴۰۰ پیکسلی) با تغییر اندازه درست می شه. تصویری که بد فشرده شده (PNG برای یه عکس معمولی یا JPEG با کیفیت ۱۰۰) با تغییر فرمت و کیفیت درست می شه. این دو رو قاطی نکن، چون اگه ابعاد غلط باشه، هر فشرده سازی ای فقط یه فایل بیخودی بزرگ رو کمی کوچیک تر می کنه.

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

• «تصاویر را با اندازه مناسب نمایش دهید» یعنی مشکل ابعاد.
• «فرمت های نسل جدید» و «تصاویر را کارآمد کدگذاری کنید» یعنی مشکل فرمت و فشرده سازی.
• «تصاویر خارج از صفحه را به تعویق بیندازید» یعنی نیاز به بارگذاری تنبل.

یه موقعیت خیلی رایج: فروشگاه آنلاینی که مدیرش عکس محصول رو مستقیم از گوشی آپلود می کنه. هر عکس چند مگابایته، ولی تو صفحه داخل کادری حدود ۴۰۰ پیکسلی دیده می شه. مشتری با بسته اینترنت حجمی یا اتصال موبایل ناپایدار، نتیجه رو هم تو کندی صفحه می بینه هم تو حجم مصرفی اش. روی هاست های اقتصادی که فضا و منابع محدوده، این بی توجهی هزینه هم داره، چون فضای دیسک و پهنای باند رو الکی می خوره. اگه کل مسیر سرعت برات مهمه، مقاله بهبود LCP سایت؛ چرا بزرگ ترین عنصر صفحه دیر نمایش داده می شه؟ رو هم کنارش بخون.

اندازه درست: قبل از فشرده سازی، ابعاد رو اصلاح کن

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

قاعده ساده: دو برابر عرض نمایش

عرض واقعی کادر تصویر رو تو صفحه ببین (با Inspect توی مرورگر). فایل رو حدود دو برابر اون عرض بساز. چرا دو برابر؟ چون صفحه های نمایش با تراکم پیکسل بالا (بیشتر گوشی های امروزی) برای تیز دیدن تصویر به پیکسل بیشتری نیاز دارن. بیشتر از دو برابر معمولاً فقط حجم اضافه است.

چند نمونه عملی:

• تصویر محصول تو کادر ۴۰۰ پیکسلی: فایل حدود ۸۰۰ پیکسل.
• تصویر شاخص مقاله تو ستون ۸۰۰ پیکسلی: فایل حدود ۱۶۰۰ پیکسل.
• بنر تمام عرض صفحه: سقف منطقی حدود ۱۶۰۰ تا ۲۰۰۰ پیکسل.

ما خودمون تو سایت هایی که مدیریت می کنیم، تصاویر آپلودی پهن تر از ۱۶۰۰ پیکسل رو خودکار کوچیک می کنیم. ابعاد هر تصویر رو هم تو صفحه ثبت می کنیم (چرایی اش تو بخش بارگذاری تنبل میاد). این سقف برای اکثر کسب و کارهای کوچیک و متوسط کافیه.

دسته ای کوچیک کردن با یه دستور

اگه سرور یا سیستمت ImageMagick داره، این دستور همه JPEGهای پوشه رو به عرض حداکثر ۱۶۰۰ می رسونه و متادیتا رو هم پاک می کنه:

mkdir -p resized
for f in *.jpg; do
  magick "$f" -resize "1600x>" -strip "resized/$f"
done

علامت > یعنی فقط اگه تصویر از ۱۶۰۰ بزرگ تره کوچیکش کن، و تصویرهای کوچیک رو بزرگ نمی کنه. تو نسخه های قدیمی ImageMagick به جای magick باید convert بنویسی. گزینه -strip اطلاعات EXIF رو حذف می کنه که هم حجم کمتری داره، هم مختصات جی پی اس عکس هایی که با گوشی گرفتی تو سایت نمی مونه.

اگه خط فرمان برات سخته، ابزار مرورگری Squoosh هم همین کار رو با کشیدن و رها کردن انجام می ده.

فرمت درست: JPEG، PNG، WebP یا AVIF؟

فرمت باید با نوع تصویر بخونه. یه جدول کوتاه کار رو راحت می کنه:

توصیه من برای شروع: WebP. فایل هایی که الان JPEG یا PNG هستن رو به WebP تبدیل کن. AVIF رو وقتی اضافه کن که بخوای آخرین مرحله بهینه سازی رو برن و حاضری وقت بذاری. سازگاری مرورگرها با گذر زمان عوض می شه، پس قبل از تصمیم، یه نگاه به جدول سازگاری یه منبع معتبر مثل MDN بنداز.

تبدیل به WebP با cwebp

ابزار cwebp که گوگل ارائه می ده، تو بیشتر توزیع های لینوکس نصب می شه. برای یه فایل:

cwebp -q 80 photo.jpg -o photo.webp

برای همه فایل های یه پوشه:

for f in *.jpg; do
  cwebp -q 80 "$f" -o "${f%.jpg}.webp"
done

عدد 80 کیفیته. چرا ۸۰ و نه ۱۰۰؟ چون بالاتر از یه حدی، چشم هیچ فرقی نمی بینه ولی حجم ادامه پیدا می کنه. برای لوگو و تصویرهایی که متن دارن، به جای -q از -lossless استفاده کن تا لبه ها تار نشن:

cwebp -lossless logo.png -o logo.webp

فایل قدیمی رو دور نریز

مرورگرهای خیلی قدیمی WebP رو نمی شناسن. اگه سایت سفارشی داری و مخاطبت ممکنه از دستگاه های قدیمی بیاد، از تگ picture استفاده کن تا مرورگر خودش اولین فرمت قابل قبول رو برداره:

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.jpg" width="800" height="600" alt="کفش ورزشی مشکی">
</picture>

ترتیب مهمه. از جدیدترین و کم حجم ترین شروع کن و آخرش فایل مطمئن رو بذار.

فشرده سازی متعادل: کیفیت چقدر کافیه؟

برای عکس، کیفیت بین ۷۵ تا ۸۵ تقریباً همیشه نقطه خوبیه. این عدد قانون نیست، شروع کاره. روش درستش اینه:

1. یه عکس معمولی از سایتت رو با کیفیت ۸۵ ذخیره کن.
2. همون رو با ۷۰ هم ذخیره کن.
3. هر دو رو تو ۱۰۰ درصد زوم کنار هم ببین، مخصوصاً روی لبه ها و سایه های ملایم.

اگه فرقی ندیدی، همون ۷۰ رو نگه دار. اگه دیدی (اغلب تو آسمان صاف، پس زمینه های گرادیانی یا پوست)، یکی دو پله بالاتر برو. هر تصویر ذات خودش رو داره و یه عدد جادویی برای همه وجود نداره.

دو استثنا هم هست:

• اسکرین شات و تصویر دارای متن: فشرده سازی با اتلاف زیاد باعث لکه دور حروف می شه. اینجا یا کیفیت رو بالا نگه دار یا lossless بگیر.
• عکس های سایت هایی مثل گالری یا نمونه کار: مشتری اینجا کیفیت رو جدی نگاه می کنه. بهتره حجم بیشتری رو تحمل کنی تا اینکه اثر کار آدم ضعیف دیده بشه. تو نمونه کارها هم همین رو رعایت می کنیم: تصاویر اصلی کیفیت بالاتری دارن و آیکون و تصاویر فرعی فشرده تر هستن.

بهینه سازی تصاویر سایت در وردپرس: افزونه یا دستی؟

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

با این حال چند کار رو خودت باید انجام بدی:

1. قبل از آپلود، ابعاد رو درست کن. وردپرس تصویر اصلی رو هم نگه می داره، پس عکس چهار مگابایتی حتی اگه اندازه های کوچیک تر هم ساخته بشه، روی هاست جا می گیره.
2. یه افزونه فشرده سازی نصب کن (ShortPixel، Imagify، EWWW، Smush و مشابه). مهم ترین فرق شون اینه که پردازش کجا انجام می شه.
3. به روش پردازش دقت کن. بعضی افزونه ها تصویر رو به سرویس خارجی می فرستن و نتیجه رو برمی گردونن. با محدودیت اینترنت بین الملل و نوسان اتصال به سرورهای خارج، این روش ممکنه کند یا ناپایدار باشه. افزونه ای که پردازش رو روی خود هاست انجام می ده، از این نظر قابل پیش بینی تره، البته مصرف CPU هاست رو بالا می بره.
4. تصاویر قدیمی رو دسته ای بازسازی کن. بیشتر افزونه ها گزینه Bulk دارن. این کار رو تو ساعت های کم ترافیک (مثلاً نیمه شب) انجام بده تا سایت زنده کند نشه.

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

سایت سفارشی: دو چیز رو تو HTML درست بنویس

توی سایت سفارشی هیچ افزونه ای نیست که جات کار کنه. باید دو چیز رو خودت رعایت کنی.

srcset و sizes

به مرورگر بگو چند نسخه از تصویر وجود داره تا بسته به عرض صفحه، کوچیک ترین نسخه کافی رو برداره:

<img
  src="product-800.webp"
  srcset="product-400.webp 400w,
          product-800.webp 800w,
          product-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, 400px"
  width="800" height="600"
  alt="کفش ورزشی مشکی">

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

width و height همیشه

این دو ویژگی رو روی هر img بذار. وقتی مرورگر ابعاد رو از قبل بدونه، جای تصویر رو تو صفحه رزرو می کنه. وگرنه متن تا لحظه ای که تصویر لود بشه بالا می مونه و بعدش ناگهان پایین می افته. اون پرش آزاردهنده همینه و تو امتیاز Core Web Vitals هم حساب می شه. به همین دلیل ما ابعاد هر تصویر رو تو صفحه ثبت می کنیم.

بارگذاری تنبل: فقط برای پایین صفحه

بارگذاری تنبل یعنی مرورگر تصویر رو فقط وقتی لود کنه که کاربر نزدیک اون نقطه از صفحه رسیده باشه. در HTML جدید یه ویژگی کافیه:

<img src="gallery-3.webp" loading="lazy" decoding="async"
     width="800" height="600" alt="نمونه سه از گالری">

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

اشتباه رایج: تنبل کردن تصویر بالای صفحه

اینجا بیشتر سایت ها زمین می خورن. تصویر اصلی بالای صفحه (بنر یا عکس شاخص) معمولاً همون عنصر LCPئه. اگه loading="lazy" بهش بدی، مرورگر باید اول صفحه رو بخونه، بعد بفهمه تصویر تو دید هست و بعد شروع به دانلود کنه. نتیجه یه LCP کندتره. برای تصویر اصلی برعکس عمل کن:

<img src="hero.webp" fetchpriority="high"
     width="1600" height="900" alt="بنر اصلی فروشگاه">

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

دو محدودیت هم یادت باشه:

• تصاویر پس زمینه CSS با loading="lazy" تنبل نمی شن. برای اون ها باید از جاوااسکریپت یا Intersection Observer استفاده کنی.
• اسلایدرهایی که اسلاید اول رو نشون می دن و بقیه رو مخفی می کنن، گاهی با بارگذاری تنبل مرورگر درست کار نمی کنن. بعد از تغییر، اسلایدر رو حتماً تست کن.

بعد از تصویر: کش و CDN

تصویر سبک شده فقط یک نیمه کاره. نیمه دیگه اینه که مرورگر دوباره همون فایل رو دانلود نکنه. روی تصاویر ثابت، هدر Cache-Control با زمان طولانی بذار و موقع تغییر فایل، اسمش رو هم عوض کن (مثلاً product-v2.webp) تا کش قدیمی دردسر درست نکنه.

اگه کاربرهات از شهرها و اتصال های مختلفی میان، CDN می تونه کمک کنه، ولی جای هاست مناسب رو نمی گیره. جزئیاتش تو CDN برای سایت؛ آیا جای هاست قوی را می گیرد؟ اومده. فقط یادت باشه برای سایتی که مخاطبش داخل ایرانه، مسیر دسترسی به سرویس CDN از داخل کشور رو هم تست کنی.

دوباره بسنج: «بعد» رو با «قبل» مقایسه کن

حالا برگرد به دو عددی که اول یادداشت کردی. دوباره PageSpeed Insights یا تب Network رو اجرا کن و این ها رو چک کن:

• حجم کل صفحه و حجم بزرگ ترین تصویر چقدر کم شده؟
• هشدارهای «اندازه مناسب» و «فرمت نسل جدید» از گزارش رفتن؟
• LCP بدتر نشده؟ (اگه شده، سراغ تصویر بالای صفحه برو.)
• موقع لود، متن ها جابه جا نمی شن؟

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

سوالات متداول

بهترین فرمت تصویر برای سایت چیه؟

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

آیا بهینه سازی تصاویر کیفیت سایت رو پایین نمی آره؟

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

بارگذاری تنبل به سئو آسیب نمی زنه؟

اگه با loading="lazy" استاندارد انجام بشه، نه. مشکل از جایی شروع می شه که تصویر بالای صفحه رو هم تنبل کنی یا تصاویر فقط با جاوااسکریپت و بدون src واقعی بارگذاری بشن. در این حالت، هم کاربر و هم ربات ها دیرتر تصویر رو می بینن.

بعد از تبدیل به WebP باید فایل های JPEG قدیمی رو پاک کنم؟

اگه سایت سفارشی داری و از picture استفاده می کنی، فایل قدیمی رو به عنوان fallback نگه دار. تو وردپرس هم بدون بکاپ چیزی رو پاک نکن، چون ممکنه بعضی صفحات هنوز به آدرس قدیمی اشاره کنن.

هر تصویر چند کیلوبایت باشه خوبه؟

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

از کجا شروع کنم؟

اگه وقت نداری همه چیز رو یک جا انجام بدی، همین ترتیب رو بگیر: اول سنگین ترین سه تصویر رو پیدا کن، ابعادشون رو درست کن، بعد به WebP تبدیل شون کن و در آخر loading="lazy" رو برای تصاویر پایین صفحه بذار، به جز تصویر اصلی. همین چهار قدم معمولاً بیشتر فایده رو می رسونن.

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