راهنمای جامع بهینه‌سازی تصاویر با فرمت WebP: افزایش سرعت سایت تا ۳۰٪ (انقلاب نسل جدید تصاویر)

در دنیای توسعه وب، ما همیشه درگیر یک جنگ نابرابر هستیم: جنگ بین “کیفیت بصری” و “سرعت بارگذاری”. طراحان گرافیک می‌خواهند عکس‌هایی با بالاترین کیفیت و جزئیات نمایش دهند، اما متخصصان سئو و سرور فریاد می‌زنند که “حجم صفحه نباید از ۲ مگابایت بیشتر شود!”

برای سال‌ها، ما مجبور بودیم بین فرمت JPEG (فشرده اما با افت کیفیت) و PNG (با کیفیت و شفاف اما سنگین) یکی را انتخاب کنیم. اما گوگل با معرفی فرمت WebP، قواعد بازی را تغییر داد. WebP فرمتی است که ویژگی‌های خوب هر دو را دارد: فشرده‌سازی عالیِ JPEG و شفافیتِ (Transparency) PNG، اما با حجمی که ۲۵ تا ۳۵ درصد کمتر است.

برای تو که در حال یادگیری و پیاده‌سازی پروژه‌های وب هستی، استفاده از WebP یعنی:

1. سبز شدن چراغ‌های Core Web Vitals (به خصوص LCP).

2. صرفه‌جویی در پهنای باند سرور.

3. رضایت کاربرانی که با اینترنت موبایل وارد سایت می‌شوند.

در این مقاله فنی، ما از سطح “نصب افزونه” فراتر می‌رویم و به عمق “کدنویسی و سرور” نفوذ می‌کنیم تا یاد بگیرید چگونه یک سیستم تحویل تصویر مدرن (Modern Image Delivery System) بسازید.

فاز اول: درک معماری WebP (چرا اینقدر سبک است؟)

قبل از اجرا، باید منطق را بفهمیم. WebP چگونه کار می‌کند؟ این فرمت بر اساس کدک ویدیویی VP8 ساخته شده است. برخلاف JPEG که کل تصویر را پیکسل به پیکسل فشرده می‌کند، WebP از تکنیکی به نام “کدگذاری پیش‌بینانه” (Predictive Coding) استفاده می‌کند.

• به زبان ساده: الگوریتم به پیکسل‌های همسایه نگاه می‌کند و “پیش‌بینی” می‌کند که پیکسل بعدی چه رنگی است. فقط تفاوت بین “پیش‌بینی” و “واقعیت” را ذخیره می‌کند. این داده‌های کمتر = حجم کمتر.

دو مود اصلی WebP:

1. Lossy (با افت کیفیت): جایگزین JPEG. برای عکس‌های محصول و بنرها. حجم را به شدت کاهش می‌دهد (مثلاً عکس ۵۰۰ کیلوبایتی می‌شود ۵۰ کیلوبایت).

2. Lossless (بدون افت کیفیت): جایگزین PNG. برای لوگوها، آیکون‌ها و اسکرین‌شات‌ها. حجم را حدود ۲۶٪ کاهش می‌دهد اما پیکسل‌ها دست‌نخورده می‌مانند.

فاز دوم: پیاده‌سازی در وردپرس (روش پلاگین و سرور)

برای سایت‌های ووکامرسی و وردپرسی، شما نمی‌توانید هزاران عکس را دستی تبدیل کنید. باید سیستم اتوماتیک باشد.

۱. استفاده از LiteSpeed Cache (بهترین گزینه)

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

• تنظیمات:

  1. به منوی LiteSpeed Cache > Image Optimization بروید.

  2. تب Image Optimization Settings را باز کنید.

  3. گزینه Create WebP Versions را روشن کنید.

  4. گزینه Image WebP Replacement را روشن کنید.

• چگونه کار می‌کند؟ سرور به صورت خودکار نسخه WebP را می‌سازد و در فایل .htaccess کدی می‌نویسد که اگر مرورگر کاربر از WebP پشتیبانی کرد، فایل .webp را تحویل دهد، وگرنه همان .jpg را بفرستد. این یعنی سازگاری ۱۰۰٪.

۲. استفاده از افزونه Imagify یا Smush

اگر سرور لایت‌اسپید نیست، این افزونه‌ها عالی هستند.

• Imagify: عکس‌ها را در سرور خودش فشرده می‌کند و نسخه WebP را تحویل می‌دهد.

• تگ Picture: این افزونه‌ها معمولاً کد HTML را تغییر می‌دهند و تگ <img> را به <picture> تبدیل می‌کنند (که در فاز بعد توضیح می‌دهم).

فاز سوم: پیاده‌سازی با کدنویسی (HTML & CSS) – برای توسعه‌دهندگان

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

۱. تگ <picture> (روش مدرن)

این روش به مرورگر “حق انتخاب” می‌دهد. مرورگرهای مدرن (Chrome, Firefox) نسخه WebP را برمی‌دارند و مرورگرهای فسیل شده (IE قدیمی) نسخه JPG را.

کد استاندارد:

<picture>
  <source srcset="images/product.webp" type="image/webp">
  
  <img src="images/product.jpg" alt="پسته اکبری اعلا" width="800" height="600">
</picture>

۲. استفاده در CSS (Background Images)

اگر عکس پس‌زمینه دارید، نمی‌توانید از تگ <picture> استفاده کنید.

• راهکار: استفاده از کلاس‌های مدرنایزر (Modernizr) یا تشخیص ویژگی در CSS.

• کد CSS:

/* پیش‌فرض برای همه */
.hero-banner {
  background-image: url('banner.jpg');
}

/* اگر مرورگر WebP را ساپورت می‌کند */
.no-js .hero-banner, 
.webp .hero-banner {
  background-image: url('banner.webp');
}

(نکته: بسیاری از مرورگرهای جدید حتی بدون این کد هم به صورت خودکار فرمت بهینه را درخواست می‌کنند).

فاز چهارم: تبدیل تصاویر (ابزارهای تبدیل)

چگونه عکس‌های موجود را تبدیل کنیم؟

۱. ابزار آنلاین Squoosh (شاهکار گوگل)

برای تبدیل دستی عکس‌های تکی (مثلاً بنر اصلی سایت)، هیچ چیز بهتر از squoosh.app نیست.

• می‌توانید به صورت زنده (Real-time) کیفیت را کم و زیاد کنید و ببینید حجم چقدر می‌شود.

۲. ابزار خط فرمان (CLI) – برای حرفه‌ای‌ها

اگر ۱۰۰۰ عکس در یک پوشه داری و می‌خواهی همه را یکجا تبدیل کنی، از ابزار رسمی گوگل (cwebp) در ترمینال لینوکس یا مک استفاده کن.

دستور نمونه:

cwebp -q 80 image.png -o image.webp

(این دستور کیفیت را روی ۸۰٪ تنظیم می‌کند و تبدیل را انجام می‌دهد).

فاز پنجم: تنظیمات سمت سرور (Server Config)

گاهی اوقات شما فایل .webp را دارید، اما سرور نمی‌داند با آن چه کند (یا آن را به عنوان فایل متنی می‌شناسد!). باید MIME Type را تعریف کنید.

در آپاچی (.htaccess):

کد زیر را به فایل htaccess اضافه کنید تا سرور بداند webp یک تصویر است:

<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

در Nginx:

در فایل کانفیگ (nginx.conf)، در بخش mime.types:

image/webp  webp;

فاز ششم: فرمت آینده (AVIF)

WebP عالی است، اما تکنولوژی متوقف نمی‌شود. فرمت جدیدتر AVIF حتی ۲۰ تا ۳۰ درصد فشرده‌تر از WebP است!

• وضعیت فعلی: پشتیبانی مرورگرها از AVIF هنوز به گستردگی WebP نیست (حدود ۸۵٪).

• استراتژی: اگر می‌خواهید خیلی پیشرو باشید، از ساختار ۳ لایه استفاده کنید:

<picture>
  <source srcset="image.avif" type="image/avif"> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="..."> </picture>

بخش پرسش و پاسخ فنی (FAQ)

۱. آیا کیفیت WebP برای سایت‌های عکاسی یا لوکس مناسب است؟ بله. اگر تنظیمات فشرده‌سازی را روی Lossless یا کیفیت ۹۰٪ بگذارید، چشم انسان هیچ تفاوتی با JPEG اصلی نمی‌بیند، اما حجم همچنان کمتر است.

۲. آیا همه مرورگرها WebP را ساپورت می‌کنند؟ امروزه بله. تمام مرورگرهای مدرن (Chrome, Firefox, Edge, Safari 14+) پشتیبانی می‌کنند. تنها اینترنت اکسپلورر (IE) پشتیبانی نمی‌کند که سهم بازارش زیر ۱٪ است و با استراتژی <picture> برای آن‌ها هم مشکلی پیش نمی‌آید.

۳. آیا تبدیل تمام عکس‌های قدیمی سایت به WebP ضروری است؟ برای سئو و سرعت، بله. اگر سایت وردپرسی دارید، افزونه‌هایی مثل LiteSpeed یا Smush با یک دکمه (Bulk Optimize) تمام عکس‌های قدیمی را تبدیل می‌کنند. نیازی به آپلود مجدد نیست.

جمع‌بندی: سرعت، زبان احترام به کاربر است

استفاده از WebP، دیگر یک “ترفند” نیست؛ یک استاندارد است. به عنوان یک طراح وب، وقتی سایتی را تحویل می‌دهید که عکس‌های آن با وجود کیفیت بالا، در کسری از ثانیه لود می‌شوند، شما مهارت فنی خود را به رخ کشیده‌اید.

این تکنیک (همراه با Lazy Load)، سنگین‌ترین بخش سایت (تصاویر) را رام می‌کند و تجربه کاربری (UX) را به سطح جهانی می‌رساند.