بهینه‌سازی تصویر با WebP و AVIF؛ راهنمای عملی کاهش حجم

چرا TTFB سایت شما خوب است اما صفحه هنوز ۴ ثانیه لود می‌شود؟

هاست را عوض کرده‌اید، کش فعال است، حتی CDN هم گرفته‌اید. اما PageSpeed Insights هنوز همان نمره ۶۰ را نشان می‌دهد و گزارش Lighthouse می‌گوید «Properly size images». مشکل از سرور نیست؛ از تصاویری است که با فرمت PNG یا JPEG قدیمی روی سرور نشسته‌اند. یک عکس ۲ مگابایتی JPEG که با موبایل گرفته شده، اگر با WebP تبدیل شود به ۱۵۰ کیلوبایت می‌رسد. همین یک تغییر، زمان لود صفحه را در اینترنت موبایل ایران از ۴ ثانیه به ۱.۵ ثانیه می‌رساند.

این مقاله برای کسی است که همین الان یک سایت دارد و می‌خواهد بداند دقیقاً با چه دستوری، چه فرمتی و با چه ساختار HTML این کار را انجام دهد. نه تئوری، نه تاریخچه.

وضعیت واقعی پشتیبانی مرورگرها در سال ۱۴۰۳

WebP از سال ۲۰۲۰ در تمام مرورگرهای مدرن پشتیبانی می‌شود. کروم، فایرفاکس، سافاری، اج و حتی مرورگرهای موبایل اندروید. AVIF اما داستان متفاوتی دارد. سافاری از نسخه ۱۶.۴ به بعد (مارس ۲۰۲۳) AVIF را ساپورت می‌کند. این یعنی کاربری که آیفون ۸ با iOS 15 دارد، AVIF را نمی‌بیند.

آمار واقعی استفاده از مرورگرها در ایران را چک کنید. اگر سهم سافاری قدیمی یا مرورگرهای مبتنی بر WebView قدیمی در سایت شما بالای ۵ درصد است، نمی‌توانید فقط AVIF سرو کنید. این‌جا اشتباه می‌کنند: خیلی‌ها می‌بینند که کروم AVIF را نمایش می‌دهد، بعد کل سایت را با AVIF بازنویسی می‌کنند و یک ماه بعد کاربر آیفونی تماس می‌گیرد که «عکس‌های سایت نمی‌آید». سیمپتوم این است: تصویر به‌طور کامل غایب است، نه اینکه کیفیت پایین باشد. مرورگر قدیمی اصلاً فرمت را نمی‌شناسد و چیزی رندر نمی‌کند.

راه‌حل، تگ <picture> است. نه اینکه فقط <img src="image.avif"> بگذارید.

ساختار صحیح تگ picture برای سرو همزمان AVIF و WebP

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

مرورگر اولین <source> را که بشناسد انتخاب می‌کند. اگر هیچ‌کدام را نشناخت، به <img> برمی‌گردد. این یعنی کاربر کروم AVIF می‌گیرد، کاربر فایرفاکس WebP می‌گیرد، و کاربر سافاری قدیمی همان JPEG اصلی را. هیچ‌کس چیزی نمی‌بیند که نشکند.

یک نکته مهم: width و height را حتماً در تگ <img> بگذارید. بدون این دو، مرورگر فضای تصویر را قبل از لود نمی‌داند و CLS (Cumulative Layout Shift) بالا می‌رود. این عدد در گزارش Core Web Vitals شما ثبت می‌شود.

مقایسه واقعی حجم: WebP در برابر AVIF در برابر JPEG

اعداد زیر از یک تست واقعی روی یک عکس محصول با ابعاد 1200×800 پیکسل و کیفیت ۸۰ گرفته شده است:

AVIF تقریباً نصف WebP حجم می‌دهد، اما هزینه دارد: زمان تبدیل. اگر یک آرشیو ۱۰ هزار عکس دارید، تبدیل همه به AVIF با CPU معمولی سرور ممکن است ۸ تا ۱۰ ساعت طول بکشد. WebP اما با همان سخت‌افزار در کمتر از ۲ ساعت تمام می‌شود.

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

دستورات دقیق تبدیل با cwebp و avifenc

ابزار رسمی گوگل برای WebP، cwebp است. روی اوبونتو با apt install webp نصب می‌شود. دستور پایه:

cwebp -q 80 input.jpg -o output.webp

فلگ -q 80 کیفیت را مشخص می‌کند. برای عکس‌های محصول، ۷۵ تا ۸۵ محدوده امن است. زیر ۷۰ روی پوست انسان یا آسمان گرادیانی، باندینگ (نوارهای رنگی) می‌بینید.

برای AVIF، ابزار avifenc از پروژه libavif است. نصب با apt install avifenc یا کامپایل از سورس. دستور:

avifenc --min 20 --max 40 --speed 6 input.jpg -o output.avif

فلگ --speed 6 تعادل بین سرعت و کیفیت است. سرعت ۱۰ خیلی سریع است اما کیفیت افت می‌کند. سرعت ۲ کیفیت عالی می‌دهد اما برای یک عکس ۵ ثانیه زمان می‌برد. برای تولید انبوه، سرعت ۶ تا ۸ را پیشنهاد می‌کنم.

اگر با PHP کار می‌کنید و نمی‌خواهید ابزار خط فرمان نصب کنید، پسوند imagick با WebP از نسخه ۶.۷.۰ به بعد کار می‌کند. AVIF در ImageMagick از نسخه ۷.۰.۲۷ پشتیبانی می‌شود، اما اگر هاست اشتراکی دارید، احتمالاً این نسخه را ندارید. چک کنید با php -m | grep imagick.

اتوماسیون تبدیل در وردپرس و لاراول

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

add_filter('wp_handle_upload', function($upload) {
    if (strpos($upload['type'], 'image/') !== 0) return $upload;
    $path = $upload['file'];
    $webp = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $path);
    exec("cwebp -q 80 " . escapeshellarg($path) . " -o " . escapeshellarg($webp));
    return $upload;
});

این کد ساده است و خطای احتمالی را مدیریت نمی‌کند. در تولید، باید بررسی کنید که exec در دسترس است و خروجی خطا را لاگ کنید.

در لاراول، پکیج spatie/laravel-medialibrary از نسخه ۱۰ به بعد به‌صورت داخلی WebP تولید می‌کند. فقط کافیست در کانفیگ، فرمت خروجی را تنظیم کنید.

تصاویر ریسپانسیو: فقط فرمت کافی نیست

تبدیل فرمت، نیمی از کار است. اگر یک تصویر 2000 پیکسلی را برای موبایل 360 پیکسلی سرو کنید، باز هم ۵ برابر حجم اضافه منتقل کرده‌اید. ترکیب srcset با sizes این را حل می‌کند:

<img srcset="image-360.webp 360w,
             image-768.webp 768w,
             image-1200.webp 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     src="image-1200.webp" alt="توضیح">

مرورگر بر اساس عرض viewport و تراکم پیکسل، مناسب‌ترین نسخه را انتخاب می‌کند. کاربر موبایل با صفحه 360 پیکسلی، نسخه 360 پیکسلی را می‌گیرد نه نسخه 1200 پیکسلی را.

این‌جا اشتباه می‌کنند: خیلی‌ها فقط srcset می‌گذارند اما sizes را فراموش می‌کنند. بدون sizes، مرورگر فرض می‌کند تصویر تمام عرض viewport را می‌گیرد و در نتیجه همیشه بزرگ‌ترین نسخه را انتخاب می‌کند. نتیجه: هیچ صرفه‌جویی‌ای نمی‌کنید و فکر می‌کنید تگ کار نمی‌کند.

اندازه‌گیری نتیجه: چه عددی را باید ببینید

بعد از اعمال تغییرات، با ابزار ابزارهای سئو و وب‌مستر سرعت سایت را دوباره تست کنید. عددی که باید ببینید: مجموع وزن تصاویر صفحه اصلی باید زیر ۵۰۰ کیلوبایت باشد. اگر بالای ۱ مگابایت است، هنوز جایی از کار را درست انجام نداده‌اید.

همچنین در PageSpeed Insights، متریک LCP (Largest Contentful Paint) باید زیر ۲.۵ ثانیه باشد. اگر تصویر اصلی صفحه (معمولاً هیرو یا اولین تصویر محتوا) با فرمت جدید سرو شود، این عدد معمولاً ۰.۵ تا ۱ ثانیه پایین می‌آید.

برای بررسی اینکه آیا مرورگر شما واقعاً فرمت جدید را دریافت می‌کند، کنسول توسعه‌دهنده کروم (F12) را باز کنید، تب Network را ببینید و روی تصویر کلیک کنید. اگر نوع فایل image/avif یا image/webp باشد، کار درست است.

تصاویر قدیمی را چه کنیم؟ استراتژی مهاجرت

اگر سایت شما ۵ سال قدمت دارد و ۲۰ هزار تصویر در آرشیو دارد، یک‌شبه تبدیل همه ممکن نیست. اولویت‌بندی کنید:

1. تصاویر صفحه اصلی و صفحات فرود پرفروش را اول تبدیل کنید. این‌ها بیشترین بازدید را دارند.
2. تصاویر پست‌های بلاگ پرترافیک را دوم تبدیل کنید.
3. بقیه را در پس‌زمینه با یک cron job تبدیل کنید، روزی ۵۰۰ عکس.

برای تبدیل انبوه، اسکریپت زیر را با find و xargs اجرا کنید:

find /var/www/html/wp-content/uploads -name "*.jpg" -mtime +30 | xargs -P 4 -I {} sh -c 'cwebp -q 80 "$1" -o "${1%.jpg}.webp"' _ {}

فلگ -P 4 چهار پردازش موازی اجرا می‌کند. اگر CPU سرور ضعیف است، این عدد را به ۲ کاهش دهید تا وب‌سایت لگ نزند.

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

تصاویر و سئو: چه چیزی در گوگل تغییر می‌کند

گوگل از سال ۲۰۱۹ اعلام کرد که WebP را در نتایج جستجوی تصویر ایندکس می‌کند. AVIF هم از سال ۲۰۲۱ به این لیست اضافه شد. اما نکته مهم: گوگل فرمت را به‌عنوان یک سیگنال رتبه‌بندی مستقیم در نظر نمی‌گیرد. آنچه اهمیت دارد، سرعت لود صفحه است که فرمت روی آن اثر می‌گذارد.

یک نکته فنی: اگر تصویر WebP را با همان نام فایل JPEG قدیمی آپلود کنید (مثلاً product.jpg که در واقع WebP است)، گوگل ممکن است سردرگم شود. بهتر است نام فایل را عوض کنید یا از تگ picture استفاده کنید تا مرورگر و خزنده گوگل هر دو فرمت صحیح را ببینند.

همچنین، متن جایگزین (alt) را برای تصاویر جدید بنویسید. این متن هم برای دسترسی‌پذیری و هم برای ایندکس‌گذاری تصویر در گوگل ضروری است. یک جمله کامل که توصیف دقیق محتوای تصویر باشد، نه سه کلمه تکراری.

پرسش‌های پرتکرار

آیا WebP کیفیت تصویر را پایین می‌آورد؟

در کیفیت ۸۰، تفاوت با JPEG اصلی تقریباً نامحسوس است. در کیفیت ۷۰، اگر دقت کنید، روی نواحی گرادیانی (مثل آسمان) باندینگ می‌بینید. برای عکس‌های محصول، کیفیت ۸۰ انتخاب امنی است. برای عکس‌های هنری که کیفیت برایتان حیاتی است، ۹۰ بگذارید و همچنان حجم نهایی از JPEG کمتر خواهد بود.

آیا AVIF ارزش زمان تبدیل بیشتر را دارد؟

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

چطور بفهمم مرورگر کاربر من AVIF را ساپورت می‌کند؟

با تگ picture دیگر لازم نیست بدانید. مرورگر خودش تصمیم می‌گیرد. اگر AVIF را بشناسد، آن را می‌گیرد. اگر نه، به WebP یا JPEG برمی‌گردد. این کار را مرورگر انجام می‌دهد، نه شما.

آیا تبدیل تصاویر قدیمی سایت به WebP روی سئو اثر منفی دارد؟

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