در بیشتر سایت‌ها، بیش از نصف حجم صفحه تصویر است. سه کار، تقریباً همه‌ی سود را می‌دهد: تصویر را قبل از آپلود به ابعادی که واقعاً نمایش داده میشود کوچک کنید، با فرمت WebP ذخیره کنید، و برای تصاویر پایین صفحه Lazy Load بگذارید. عکسی که مستقیم از گوشی آپلود شود ۴ تا ۸ مگابایت است؛ همان عکس برای وب باید زیر ۲۰۰ کیلوبایت باشد.
اندازه‌ی مناسب
| کاربرد | عرض | حجم هدف |
|---|---|---|
| تصویر تمام‌عرض بالای صفحه | ۱۶۰۰ تا ۱۹۲۰ پیکسل | زیر ۲۵۰ کیلوبایت |
| تصویر داخل متن مقاله | ۱۰۰۰ تا ۱۲۰۰ | زیر ۱۵۰ |
| تصویر محصول | ۸۰۰ تا ۱۲۰۰ | زیر ۱۵۰ |
| تصویر شاخص و کارت | ۶۰۰ تا ۸۰۰ | زیر ۸۰ |
| لوگو و آیکون | SVG، یا PNG دو برابر اندازه‌ی نمایش | زیر ۳۰ |
تصویری که ۴۰۰۰ پیکسل عرض دارد و در کادر ۸۰۰ پیکسلی نمایش داده میشود، بیست‌وپنج برابر لازم داده دانلود میکند.
فرمت
| فرمت | برای چه | نکته |
|---|---|---|
| WebP | تقریباً همه‌چیز | ۲۵ تا ۳۵ درصد کوچک‌تر از JPEG با همان کیفیت؛ همه‌ی مرورگرهای امروزی پشتیبانی می‌کنند |
| AVIF | عکس | از WebP هم کوچک‌تر؛ ساختنش کندتر است |
| JPEG | عکس | اگر WebP ندارید؛ کیفیت ۷۵ تا ۸۵ |
| PNG | تصویر با پس‌زمینه‌ی شفاف، اسکرین‌شات با متن | برای عکس خیلی حجیم است |
| SVG | لوگو، آیکون | در هر اندازه‌ای تیز؛ وردپرس پیش‌فرض آپلودش را نمی‌پذیرد |
| GIF | هیچ | برای انیمیشن، ویدیوی کوتاه بی‌صدا خیلی سبک‌تر است |
قبل از آپلود
- تصویر را به عرض موردنیاز کوچک کنید.
- با یک ابزار فشردهسازی (مثل Squoosh که در مرورگر و روی دستگاه خودتان کار میکند) به WebP با کیفیت حدود ۷۵ تبدیل کنید.
- نام فایل را معنی‌دار و لاتین بگذارید: red-leather-bag.webp نه IMG_4032.jpg.
وردپرس از نسخه‌ی ۵٫۸ آپلود WebP را می‌پذیرد. این روش دستی از هر افزونه‌ای مطمئن‌تر است، چون به سرویس بیرونی وابسته نیست.
تصاویری که قبلاً آپلود شده
| روش | چطور کار میکند | نکته |
|---|---|---|
| افزونه با پردازش روی سرور بیرونی | تصویر را می‌فرستد، فشرده برمی‌گرداند | به اتصال هاست به آن سرویس وابسته است و معمولاً سهمیه‌ی ماهانه دارد |
| افزونه با پردازش روی خود هاست | با کتابخانه‌های PHP (GD یا Imagick) تبدیل میکند | وابستگی بیرونی ندارد؛ هنگام تبدیل گروهی CPU مصرف میکند |
| دستی | دانلود، تبدیل، آپلود دوباره | فقط برای چند تصویر مهم (صفحهی اصلی، بنرها) |
تبدیل گروهی را در ساعت کم‌بازدید و در دسته‌های کوچک انجام دهید تا به سقف منابع نخورید. قبلش از پوشه‌ی uploads بکاپ بگیرید. (Resource Usage)
Lazy Load
یعنی تصویر فقط وقتی دانلود شود که کاربر به آن نزدیک شده. وردپرس این را خودکار به تصاویر اضافه میکند. دو نکته:
- تصویر اصلی بالای صفحه نباید Lazy باشد. این تصویر معمولاً همان عنصر LCP است و تأخیر در آن مستقیم نمره را پایین می‌آورد. در افزونه‌ی کش، آن را از Lazy Load استثنا کنید. (Core Web Vitals)
- ابعاد را مشخص کنید. تصویر بدون width و height، وقتی بار میشود محتوا را به پایین هل می‌دهد (CLS). وردپرس برای تصاویر کتابخانه این را خودش می‌گذارد؛ تصاویری که دستی با HTML گذاشته‌اید را بررسی کنید.
اندازه‌های اضافه‌ی وردپرس
وردپرس از هر تصویر آپلودشده چند اندازه می‌سازد و قالب و ووکامرس هم اندازه‌های خودشان را اضافه می‌کنند. یک آپلود می‌تواند ده فایل شود. نتیجه: فضای هاست و تعداد فایل‌ها سریع بالا می‌رود.
- در تنظیمات، رسانه، اندازه‌هایی را که استفاده نمی‌کنید صفر بگذارید.
- قبل از عوض کردن قالب بدانید که اندازه‌های قالب قبلی روی هاست می‌ماند.
- افزونه‌های پاک‌سازی رسانه اندازه‌های بلااستفاده را پیدا می‌کنند؛ فقط بعد از بکاپ.
(inode و تعداد فایل، چقدر فضا لازم دارم)
سئوی تصویر
- متن جایگزین (alt): یک جمله‌ی کوتاه که تصویر را توصیف میکند، نه فهرست کلمه‌ی کلیدی.
- نام فایل معنی‌دار.
- تصویر اختصاصی بهتر از عکس استوک تکراری است.
- هات‌لینک: اگر سایت‌های دیگر تصاویر شما را مستقیم نشان می‌دهند، پهنای باندتان مصرف میشود. (Hotlink Protection)
ویدیو
ویدیو را روی هاست سایت نگذارید. یک ویدیوی چنددقیقه‌ای، پهنای باند و فضای یک ماه را می‌خورد. آن را روی سرویس ویدیو بگذارید و در صفحه جاسازی کنید؛ و همان را هم Lazy کنید تا تا وقتی کاربر کلیک نکرده، بار نشود.
چطور بسنجم؟
در گزارش PageSpeed بخش‌های «Properly size images»، «Serve images in next-gen formats» و «Defer offscreen images» دقیقاً می‌گویند کدام تصویرها مشکل دارند و چقدر صرفه‌جویی میشود. (تست سرعت)
سوال‌های رایج
کیفیت تصویر بعد از فشردهسازی بد میشود؟
در کیفیت ۷۵ تا ۸۰، تفاوت با چشم دیده نمیشود ولی حجم نصف میشود. برای عکس محصول که جزئیات مهم است، ۸۵.
CDN مشکل تصاویر را حل میکند؟
مسیر را کوتاه میکند، ولی تصویر ۵ مگابایتی از CDN هم ۵ مگابایت است. اول بهینه کنید. (CDN چیست)
تصاویر قدیمی را هم باید WebP کنم؟
از صفحههای پربازدید شروع کنید: صفحهی اصلی، دستهها و ده مطلب اول. بقیه را کمکم.
