بهینه‌سازی تصاویر یکی از پرسودترین جنبه‌های عملکرد وردپرس است: با داشتن ساختار صفحه و قالب یکسان، تنها با تنظیم صحیح اندازه فایل تصویر، ابعاد، فرمت و روش ارائه آن اغلب می‌تواند منجر به بهبود فوری سرعت بارگذاری شود.

با این حال، بهینه‌سازی تصاویر همچنین حوزه‌ای است که در آن به آسانی ممکن است همه چیز به‌هم بریزد؛ دلیلش این نیست که فناوری بیش از حد دشوار است، بلکه اطلاعات بیش از حد پراکنده هستند:
چند مقاله خوانده‌اید و درباره “فشرده‌سازی”، “WebP/AVIF” و “بارگذاری تنبل” یاد گرفته‌اید، اما وقتی به توضیحات افزونه نگاه می‌کنید می‌بینید “۱۰۰ اعتبار رایگان در ماه”، “۲۰۱TP234T رایگان” و “۱ اعتبار برای هر تصویر” نوشته شده—و هرچه بیشتر می‌خوانید، سردرگم‌تر می‌شوید. آیا این سهمیه رایگان واقعاً کافی است؟ هزینه‌ها چگونه محاسبه می‌شوند؟ آیا “همان چیز” را اشتباه فهمیده‌اید؟ و مهم‌تر از همه:آیا وقتی کارتان تمام شد، واقعاً جواب داد؟

این مقاله تنها سه کار انجام می‌دهد:

  1. یک نکتهٔ عملی:نقشه راه(ابتدا چه باید کرد، سپس چه باید کرد)
  2. لطفاً گزینه‌های مدنظر خود را به‌طور مفصل توضیح دهید (دقیقاً چه چیزی نسخه‌های رایگان و پولی را از هم متمایز می‌کند و هر یک برای چه افرادی مناسب‌تر است)
  3. در اینجا رایج‌ترین تله‌هایی که باید مراقبشان باشید آورده شده است (تا مجبور نباشید بعد از اتمام کار برای یافتن راه‌حل وقت صرف کنید)

۱. اصول اولیه: آنچه وردپرس دارد و آنچه ندارد

اگر ابتدا درک نکنید که هسته وردپرس چه کاری انجام داده است، دو وضعیت محتمل پیش خواهد آمد:

  • به جای استفاده از “قابلیت‌های رایگان” در دسترس‌مان، در نهایت وقت و پول‌مان را صرف اختراع مجدد چرخ کرده‌ایم.
  • فکر می‌کردم وردپرس “تمام تصاویر قدیمی را به‌طور خودکار به WebP/AVIF تبدیل می‌کند”، اما معلوم شد که این کار را انجام نمی‌دهد.

هستهٔ وردپرس از پیش شامل این ویژگی‌های کلیدی است:

  • تصاویر واکنش‌گرا (srcset/sizes)از وردپرس ۴.۴ به بعد، هسته تصاویر را خروجی می‌دهد. srcsetsizes... و از تصاویر چندسایزه‌ای که در حین بارگذاری تولید می‌شوند استفاده می‌کند تا مرورگر بتواند بر اساس شرایط صفحه نمایش، مناسب‌ترین منبع را انتخاب و بارگذاری کند.
  • بارگذاری تنبل بومیاز وردپرس ۵.۵ به بعد، بارگذاری تنبلانه بومی برای تصاویر به طور پیش‌فرض فعال شده و از استانداردهای HTML استفاده می‌کند. loading پیاده‌سازی دارایی
  • حمایت از بارگذاری تصاویر WebPاز وردپرس ۵.۸ به بعد، می‌توانید فایل‌های WebP را به همان شیوه‌ی JPEG و PNG آپلود و استفاده کنید (به شرطی که محیط میزبانی شما از WebP پشتیبانی کند).
  • پشتیبانی از بارگذاری AVIFاز وردپرس ۶.۵ به بعد، فایل‌های AVIF می‌توانند به همان شیوه فایل‌های JPEG و PNG آپلود و استفاده شوند (مشروط به پشتیبانی محیط میزبان).

با این حال، لطفاً توجه داشته باشید:
“پشتیبانی از بارگذاری/استفاده” ≠ “تبدیل خودکار/تحویل خودکار”
به عبارت دیگر: حتی اگر هم‌اکنون از WP 6.5 استفاده می‌کنید، فایل‌های JPG/PNG در کتابخانهٔ رسانه‌ای شما به‌طور خودکار به WebP/AVIF تبدیل نخواهند شد؛ و همچنین به‌طور خودکار از قابلیت کامل “خروجی گرفتن AVIF/WebP بر اساس قابلیت‌های مرورگر و در صورت عدم پشتیبانی مرورگر، بازگشت به تصویر اصلی” بهره‌مند نخواهید شد—این بخش معمولاً نیازمند یک افزونه یا سرویس برای پر کردن این شکاف است.

۲. نقشه راه: راهنمای ۵ مرحله‌ای بهینه‌سازی تصویر

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

۲.۱ ابتدا “ابعاد” را درست در نظر بگیرید (ساده‌ترین چیزی که ممکن است نادیده گرفته شود، اما همان چیزی که بیشترین مزایا را به همراه دارد)

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

برای وردپرس ۴.۴ و نسخه‌های جدیدترمکانیزم تصویر واکنش‌گراsrcset/sizes) دقیقاً برای پرداختن به این مسئله طراحی شده بود.

چه چیزی یک پاس محسوب می‌شود:

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

رایج‌ترین تله ها:

  • برخی قالب‌ها یا سازنده‌ها تصاویر را به‌عنوان تصاویر پس‌زمینهٔ CSS در نظر می‌گیرند یا آن‌ها را به‌صورت سفارشی رندر می‌کنند که ممکن است از آن عبور کند. srcsetکه باعث می‌شود تصویر بزرگ همچنان در حال بارگذاری باقی بماند
  • اگر از سرویس‌های میزبانی تصویر خارجی یا بلوک‌های تصویر شخص ثالث استفاده کنید، ممکن است بتوانید سیستم اندازه‌های چندگانه تولیدشده توسط کتابخانه رسانه را دور بزنید.

۲.۲ فشرده‌سازی (کاهش اندازه فایل بدون افت کیفیت)

جوهر فشرده‌سازی این نیست که “کوچک‌تر بهتر است”، بلکه این است که “تفاوت تقریباً با چشم غیرمسلح قابل تشخیص نیست، اما حجم فایل به‌طور قابل‌توجهی کاهش می‌یابد”.

قوانین به شرح زیر است:

  • عکس‌ها/عکس‌های واقعی (پرتره، محصولات، منظره): فشرده‌سازی با افت را در اولویت قرار دهید (حداکثر مزیت)
  • تصاویر/اسکرین‌شات‌هایی که حاوی متن زیادی هستنداز یک تنظیم فشرده‌سازی محافظه‌کارانه‌تر استفاده کنید تا از محو شدن متن جلوگیری شود.
  • لوگو/آیکون: به SVG اولویت دهید یا از فشرده‌سازی بدون‌از‌دست‌دادن با احتیاط استفاده کنید (فشرده‌سازی با از دست دادن می‌تواند به‌راحتی باعث محو شدن لبه‌ها شود)

چه چیزی یک پاس محسوب می‌شود:

  • حجم فایل اکثر تصاویر صفحات به طور قابل توجهی کاهش یافته است.
  • بدون نویز قابل‌مشاهده، لبه‌های تار، نوارهای رنگی یا متن تار

۲.۳ WebP / AVIF (سیاست فرمت: اندازه فایل کوچکتر برای همان سطح وضوح)

وردپرس اکنون از بارگذاری فایل پشتیبانی می‌کند. WebP (۵.۸) و AVIF (۶.۵)
با این حال، برای به‌کارگیری عملی “فرمت نسل بعدی”، معمولاً دو مسئله باید حل شوند:

  1. چگونه کتابخانه رسانه‌ای تاریخی را به‌صورت دسته‌ای تبدیل کنیم(در غیر این صورت، شما فقط در حال بهینه‌سازی “تصاویر جدید آپلودشده در آینده” خواهید بود)
  2. آیا باید یک نسخه کپی ایجاد کنم یا تصویر اصلی را جایگزین کنم؟(این یک نکتهٔ حیاتی است؛ بعداً به قابلیت “جایگزینی و حذف نسخهٔ اصلی” در Plus WebP خواهیم پرداخت.)

رویکرد پیشنهادی:

  • WebP: معمولاً انتخاب پیش‌فرض (سازگاری قابل‌اعتمادتری ارائه می‌دهد)
  • AVIF: یک فرمت فشرده‌سازی پیشرفته‌تر، مناسب برای تصاویر بزرگ، تصاویر بزرگ در صفحه اول و تصاویر گالری (اما بیشتروابسته به حمایت محیط زیستی

۲.۴ از بارگذاری تنبل به‌درستی استفاده کنید (از رویکرد یکسان برای همه استفاده نکنید)

از وردپرس ۵.۵ به بعدبارگذاری تنبل پیش‌فرضتصویر.
این امر مصرف پهنای باند را در حین رندر اولیه کاهش می‌دهد:

  • بارگذاری تنبل برای منابع خارج از صفحه مناسب است.“
  • تصویر بزرگ در بالای صفحه (که اغلب مهم‌ترین تصویر در اولین صفحه است) معمولاً برای بارگذاری تنبلانه مناسب نیست.

۲.۵ لایه تحویل: CDN / تصویر CDN

فشرده‌سازی، اندازهٔ فایل و فرمت همگی دربارهٔ کوچک‌تر و مناسب‌تر کردن فایل‌ها هستند.
با این حال، اگر تصاویر به‌طور مداوم از سرور اصلی در فواصل طولانی دریافت شوند، تأخیر شبکه همچنان به‌طور قابل‌توجهی بر تجربه کاربری تأثیر خواهد گذاشت. در چنین مواردی، به راه‌حل “لایه تحویل” نیاز است (CDN/image CDN).

دو رویکرد معمول:

  • کلودفلر لهستانمستندات کلودفلراین بخش روش‌های فشرده‌سازی موجود در پالیش (بدون‌افت، با‌افت و WebP) را معرفی می‌کند و به کاربرد آن‌ها اشاره می‌کند. format=auto فرمت‌های WebP و AVIF مجاز هستند.
  • شتاب‌دهندهٔ سایت جت‌پکمستندات جت‌پکاین بدان معناست که تصاویر را بهینه‌سازی کرده و آن‌ها را همراه با منابع ایستا از طریق شبکهٔ خود توزیع خواهد کرد.

بهینه‌سازی تصویر تضمین می‌کند که تصاویر از نظر اندازه کاهش یافته و به طور مناسب تغییر اندازه داده شوند.CDN: تحویل نزدیک‌تر و قابل‌اطمینان‌تر

۳. انتخاب مسیر: فقط دو مسیر اصلی را دنبال کنید.

رایج‌ترین تله در بهینه‌سازی تصاویر، “نصب نکردن افزونه” نیست، بلکه نصب بیش از حد افزونه‌هاست که منجر به پردازش تکراری می‌شود:
A در حال فشرده‌سازی است، B هم در حال فشرده‌سازی است؛ A در حال تبدیل به WebP/AVIF است، B هم همین کار را انجام می‌دهد؛ A در حال تغییر آدرس‌های URL است، B در حال بازنویسی URLهاست—در نهایت حتی خودتان هم نمی‌توانید سر در بیاورید که واقعاً با سایت چه خبر است.

قوانین:

به یک رویکرد پایبند باشید: یا کاملاً رایگان در محل، یا یکی از سه گزینهٔ مبتنی بر ابر.

  • مسیر A (حمل‌ونقل محلی کاملاً رایگان):به‌علاوه WebP یا AVIF + EWWW Image Optimizer(یا فقط یکی را انتخاب کنید)
  • گزینه ب (یکی از سه روش فشرده‌سازی ابری را انتخاب کنید):ShortPixel / Imagify / TinyPNG

۳.۱ گزینه A: میزبانی محلی کاملاً رایگان (به‌علاوه WebP یا AVIF یا EWWW)

ویژگی‌های کلیدی این مسیر عبارتند از:

  • شما به سرویس‌های فشرده‌سازی شخص ثالث که بر اساس سهمیه ماهانه یا به ازای هر فایل هزینه دریافت می‌کنند، متکی نیستید (اگرچه برخی امکانات ممکن است به صورت خدمات اختیاری در دسترس باشند)
  • مقابل این مزیت، پردازش دسته‌ای ممکن است بار سنگین‌تری از نظر CPU/IO بر سرور وارد کند و شما را ملزم می‌کند تا توجه بیشتری به “استراتژی و ریسک” داشته باشید.”

3.1.1 به‌علاوه WebP یا AVIFمفهوم اصلی “تولید/جایگزینی” است؛ این ابزار در معنای سنتی یک ابزار فشرده‌سازی نیست.“

  • هنگام تولید مجموعه کامل تصاویر:شناسهٔ فایل تصویر اصلی با فایل WebP/AVIF جایگزین خواهد شد، فایل اصلی حذف می‌شود و هرگونه URL در محتوا نیز جایگزین خواهد شد.
  • این افزونه دستورات WP-CLI را فراهم می‌کند و اشاره می‌کند که WP-CLI هنگام کار با تعداد زیادی فایل قابل‌اعتمادتر است.

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

تفاوت بین دو حالت

گزینه ۱: حفظ تصویر اصلی + تولید نسخه‌های WebP/AVIF (قابل‌اعتمادتر)

  • مزیت: در صورت بروز مشکلات سازگاری، بازگشت به حالت قبلی آسان‌تر است.
  • نقطه‌ضعف: مصرف دیسک افزایش خواهد یافت (تصویر اصلی + فرمت جدید + چندین اندازهٔ پیش‌نمایش)

روش دوم: جایگزینی و حذف تصویر اصلی (رادیکال‌تر)

  • مزایا: دیسک به این زودی پر نخواهد شد؛ پیوندهای داخلی به‌طور خودکار به فرمت جدید تبدیل می‌شوند.
  • ریسک: اگر هم دارایی‌ها و هم ارجاعات آن‌ها را تغییر دهید، عیب‌یابی مشکلات سازگاری پرهزینه‌تر خواهد بود (به‌ویژه اگر سیستم‌های خارجی یا منطق قالب‌بندی به نام‌های فایل، مسیرها یا فرمت‌های اصلی وابسته باشند).

توصیه

قبل از انتخاب “جایگزینی و حذف نسخهٔ اصلی”، یک آزمایش کوچک‌مقیاس انجام دهید و مطمئن شوید که نسخهٔ پشتیبان در دسترس دارید؛ کل پایگاه داده را بلافاصله جایگزین نکنید.

تله های رایج با WebP یا AVIF

  1. پس از انجام جایگزینی کامل کتابخانه، تصاویر در برخی صفحات به درستی نمایش داده نمی‌شوند.
    علت معمولاً این نیست که “تصویر خراب است”، بلکه چیزی در جایی از زنجیره دچار مشکل شده است—مانند تغییر آدرس URL، کش‌گذاری یا سیاست تصاویر بندانگشتی.
  2. هرچه تعداد پیش‌نمایش‌ها بیشتر باشد، دامنهٔ تغییرات گسترده‌تر است.
    بارگذاری یک تصویر در وردپرس چندین اندازه مختلف ایجاد می‌کند؛ قالب‌ها و افزونه‌ها ممکن است اندازه‌های بیشتری هم اضافه کنند. جایگزینی کامل به این معنی است که ممکن است در حال ویرایش مجموعه‌ای بسیار بزرگ از فایل‌ها باشید.
  3. انجام تبدیل فرمت به تنهایی لزوماً منجر به کوچک‌ترین اندازه فایل نمی‌شود.
    فایل‌های WebP و AVIF معمولاً حجم کمتری دارند، اما “استراتژی‌های تعیین ابعاد” و “استراتژی‌های فشرده‌سازی” همچنان حیاتی هستند. Plus WebP را به‌عنوان یک “راه‌حل یک‌کلیک” برای بارگذاری سریع‌تر در نظر نگیرید.

3.1.2 بهینه‌ساز تصویر EWWWیک ارائه‌دهندهٔ پیشرو در فشرده‌سازی محلی رایگان

صفحهٔ افزونهٔ EWWW هدف بسیار روشنی دارد:

  • این می‌تواند با استفاده از مجموعه‌ای از ابزارها (jpegtran، optipng، pngout، pngquant، gifsicle، cwebp و غیره) تصاویر روی سرور شما را بهینه‌سازی کند.
  • اگر به فشرده‌سازی بیشتری نیاز دارید یا می‌خواهید در مصرف CPU صرفه‌جویی کنید، می‌توانید پردازشی را که CPU مصرف می‌کند به سرور خود منتقل کنید (اختیاری).

EWWW چه نقشی باید در مسیر A ایفا کند؟

اگر از Plus WebP برای “استراتژی مهاجرت/جایگزینی فرمت” استفاده می‌کنید، EWWW برای انجام موارد زیر مناسب‌تر است:

  • بهینه‌سازی فشرده‌سازی و حجم(به‌ویژه بهینه‌سازی دارایی‌های خام مانند فایل‌های JPG و PNG)
  • بهینه‌سازی دسته‌ای کتابخانه رسانه‌ای تاریخی(هدف‌گذاری برای “کاهش حجم” به جای “جایگزینی URL”)

لطفاً توجه داشته باشید

به‌علاوه WebP ای وای: همه را می‌توان به AVIF یا WebP تبدیل کرد.
ما توصیه می‌کنیم تنها یکی از آن‌ها را نصب کنید، زیرا نصب هر دو ممکن است باعث بروز تعارض شود.

یک تلهٔ معمول EWWW

  1. بار سرور در طول بهینه‌سازی دسته‌ای افزایش می‌یابد.
    این به این دلیل است که فشرده‌سازی محلی CPU/IO مصرف می‌کند. راه‌حل این نیست که “استفاده از آن را متوقف کنید”، بلکه این است که “در دسته‌های مشخص، در ساعات کم‌ترافیک پردازش کنید و در صورت لزوم به بارگذاری در سرورهای دیگر یا راه‌حل‌های ابری روی بیاورید”.
  2. “WebP تولید شده است” لزوماً به این معنا نیست که سمت جلویی در واقع WebP را ارائه می‌دهد.
    بسیاری از افزونه‌ها دچار این تصور غلط هستند که تولید یک چیز است، در حالی که استراتژی‌های تحویل (مانند بازنویسی، برچسب‌های `picture` و انقضای کش) کاملاً چیز دیگری هستند.
  3. کارکرد یک افزونهٔ دیگر را تکرار می‌کند.
    اگر گزینهٔ A را انتخاب کنید، سعی کنید از ابزارهای فشرده‌سازی ابری اضافی مانند ShortPixel، Imagify یا TinyPNG استفاده نکنید؛ اگر گزینهٔ B را انتخاب کنید، منطق جایگزینی را در Plus WebP فعال نکنید. اصل اساسی این است:به یک روش عمل کنید.

۳.۲ گزینه ب: یکی از سه سرویس فشرده‌سازی ابری (ShortPixel / Imagify / TinyPNG) را انتخاب کنید

این طرح برای کسانی ایده‌آل است که می‌خواهند منابع سرور را حفظ کنند، رویکردی بدون دردسر برای پردازش دسته‌ای را ترجیح می‌دهند و با صورتحساب مبتنی بر مصرف یا پرداخت به‌ازای استفاده راحت هستند.
با این حال، رایج‌ترین نکتهٔ سوءتفاهم در مورد فشرده‌سازی ابری این است:محدودهٔ مجاز صرفاً به “برگ‌های آزاد” محدود نمی‌شود.تعداد اندازه‌های تصویر بندانگشتی، تولید فرمت‌های WebP/AVIF و فشرده‌سازی مکرر تصاویر، همگی تأثیر قابل‌توجهی بر مصرف منابع خواهند داشت.

در ادامه توضیح خواهیم داد: تفاوت بین گزینه‌های رایگان و پولی، نحوه کسر اعتبار، رایج‌ترین دام‌هایی که باید از آن‌ها اجتناب کرد، و اینکه کدام نوع وب‌سایت‌ها برای این سرویس مناسب‌تر هستند.


3.2.1 شورت‌پیکسل: ۱۰۰ اعتبار رایگان در ماه، اما اعتبارات با استفاده از تصاویر بندانگشتی و بزرگ‌نمایی‌های WebP/AVIF مصرف خواهند شد.

موضوع گزینه‌های رایگان و پولی چیست؟

توضیحات افزونه ShortPixel به‌وضوح بیان می‌کند:

  • ۱۰۰ اعتبار رایگان در ماه
  • همچنین “اعتبارات ماهانه نامحدود اضافی” نیز وجود دارد (جزئیات قیمت‌گذاری در صفحهٔ افزونه ارائه شده است)
  • ما همچنین بسته‌های اعتباری یک‌باره که هرگز منقضی نمی‌شوند را (همراه با اطلاعات مربوط به قیمت‌های پایه) ارائه می‌دهیم.

توجه:

  • رایگان: هر ماه تعداد مشخصی اعتبار برای استفاده در وب‌سایت‌های سبک یا برای اهداف آزمایشی در اختیار قرار می‌گیرد.
  • بستهٔ یک‌باره: مناسب برای سایت‌هایی با کتابخانهٔ رسانه‌ای بزرگ که می‌خواهند موجودی خود را یک‌جا پاکسازی کنند (یک‌بار خریداری شده و تا زمان اتمام معتبر است؛ معمولاً تاریخ انقضا ندارد)
  • ماهانه/نامحدود: مناسب برای سایت‌هایی که به به‌روزرسانی منظم تصاویر و بهینه‌سازی پایدار و بلندمدت نیاز دارند.

پایگاه دانش رسمی ShortPixel همچنین راهنمایی‌هایی در مورد “بسته یک‌باره در مقابل نامحدود ماهانه” ارائه می‌دهد.یک توضیح واضحطرح ماهانه نامحدود به‌صورت ماهانه (یا سالانه) صورتحساب می‌شود و اعتبارات نامحدود و سهمیه ثابت CDN را ارائه می‌دهد؛ اعتبارات یک‌باره منقضی نمی‌شوند و کنترل بیشتری بر مصرف در هر زمان که لازم باشد به شما می‌دهند.

توصیه

  • پاکسازی سایت قدیمی: اولویت با بسته‌های یک‌باره است
  • به‌روزرسانی‌های مداوم: مناسب‌تر برای طرح‌های ماهانه/نامحدود (اگر نمی‌خواهید اعتبارها را پیگیری کنید، از طرح نامحدود استفاده کنید)

مهم‌ترین نکته: اعتبارهای ShortPixel چگونه محاسبه می‌شوند؟

مستندات رسمی ShortPixel کی‌بی خیلی رک گفت:

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

نمونه‌ی اعتبارات

فرض کنید یک تصویر را آپلود می‌کنید و قالب یا افزونه هشت تصویر بندانگشتی تولید می‌کند:

  • فقط تصویر اصلی و پیش‌نمایش‌ها را بهینه‌سازی کنید: ۱ (تصویر اصلی) + ۸ (پیش‌نمایش‌ها) = ۹ اعتبار
  • اگر شما هم می‌خواهید WebP/AVIF تولید کنید: یک نسخه نسل بعدی به هر یک از ۹ مورد بالا اضافه کنید ← به‌علاوه ۹ اعتبار
    به عبارت دیگر، آنچه ممکن است “یک تصویر” فکر کنید، در واقع می‌تواند تقریباً به اندازه “ده اعتبار” هزینه داشته باشد.

بنابراین:“۱۰۰ اعتبار رایگان” به معنای “۱۰۰ تصویر رایگان” نیست.

رایج‌ترین مشکلات ShortPixel

  1. ۱۰۰ اعتبار رایگان به‌زودی تمام خواهد شد.
    دلیل: تعداد زیاد پیش‌نمایش‌ها + امتیاز اضافی برای تولید فایل‌های WebP/AVIF.
    توصیه
  • ابتدا تعداد پیش‌نمایش‌های سایت را ارزیابی کنید.
  • اندازه‌های غیرضروری تصویر بندانگشتی را حذف کنید (تنها اندازه‌هایی را بهینه‌سازی کنید که واقعاً استفاده خواهند شد)
  • ابتدا یک استراتژی فشرده‌سازی تعیین کنید، سپس فرآیند را به‌صورت دسته‌ای اجرا کنید تا از هدررفت زمان در آزمون و خطا جلوگیری شود.
  1. در کنار سایر افزونه‌های تبدیل فرمت استفاده شود.
    اگر جایگزینی Plus WebP را فعال کنید و همچنین از ShortPixel بخواهید برچسب‌های نسل بعدی را تولید و درج کند، منطق دوگانه می‌شود و عیب‌یابی را دشوارتر می‌کند. با گزینه B، ShortPixel این کار را به‌تنهایی انجام می‌دهد.
  2. من فرض می‌کردم که پس از نصب، فرانت‌اند به‌طور خودکار فایل‌های WebP/AVIF را تولید می‌کند.“
    صفحهٔ افزونهٔ ShortPixelشایان ذکر است که این قابلیت تبدیل فایل‌های WebP و AVIF را دارد و می‌تواند تصاویر نسل بعدی را در صفحات فرانت‌اند (برای مثال، از طریق تگ‌ها) بگنجاند.
    با این حال، شما همچنان باید پس از اتمام، نتایج را بررسی کنید.

3.2.2 تصویرساز۲۰۱TP234T رایگان در ماه؛ سهمیه بر اساس “اندازهٔ تصویر اصلی + تعداد پیش‌نمایش‌ها” کسر می‌شود؛ فشرده‌سازی مجدد منجر به کسر تکراری خواهد شد.

محدودهٔ آزاد و موقعیت

صفحه قیمت‌گذاری رسمی Imagifyبه‌وضوح بیان شده است:حساب‌های رایگان دارای سهمیه ماهانه 20MB هستند.
صفحهٔ افزونهٔ آن نیز بیان می‌کند که می‌تواند فشرده، تغییر اندازه و تبدیل به WebP/AVIF کند.

مقدار سهمیه چگونه کسر می‌شود؟

مستندات رسمی Imagify “نحوه محاسبه میزان استفاده از سهمیه چگونه است؟” سازوکار صورتحساب را به‌طور بسیار واضح تشریح می‌کند:

  • تعداد پیش‌نمایش‌ها بر مصرف منابع تأثیر می‌گذارد.برای مثال، اگر شما ۱۰ اندازهٔ تصویر بندانگشتی داشته باشید، بهینه‌سازی یک تصویر به‌طور مؤثر به معنای بهینه‌سازی ۱۱ تصویر (تصویر اصلی به‌علاوهٔ ۱۰ بندانگشتی) است که همگی در سهمیهٔ شما محاسبه می‌شوند.
  • کوتا را بر اساس اندازهٔ اصلی فایل کم کنید.برای مثال، اگر تصویری به حجم ۱۰۰ کیلوبایت را در Imagify بارگذاری کنید، ۱۰۰ کیلوبایت از سهمیه شما کسر خواهد شد.
  • تغییر سطح فشرده‌سازی و بهینه‌سازی مجدد دوباره از سهمیه مصرف خواهد کرد.
  • یک کلید API واحد می‌تواند در چندین سایت استفاده شود، اما سهمیه بین آن‌ها مشترک است.

این رویکرد اصلی ایمجی‌فای است:
این بیشتر شبیه یک بسته دیتا است: هرچه بیشتر آپلود کنید، بیشتر کسر می‌شود؛ هرچه بیشتر تصویر بندانگشتی آپلود کنید، بیشتر کسر می‌شود؛ و اگر یک محتوا را بارها دوباره آپلود کنید، هر بار هزینه کسر خواهد شد.

یک مثال ساده و قابل‌فهم از سهمیه‌های Imagify

فرض کنید یک تصویر اصلی ۸۰۰ کیلوبایتی را آپلود می‌کنید و سایت ۸ تصویر بندانگشتی تولید می‌کند.

  • هنگام بهینه‌سازی با Imagify، هم “تصویر اصلی” و هم “۸ تصویر کوچک” گنجانده می‌شوند (اگر «بهینه‌سازی همه» را انتخاب کنید)، که به این معنی است این عملیات سهمیه‌ای معادل تقریباً «حجم کل این فایل‌ها» مصرف خواهد کرد.
    به همین دلیل برخی سایت‌ها متوجه می‌شوند که سهمیه “20MB” آن‌ها به‌سرعت تمام می‌شود: مشکل از Imagify نیست، بلکه تصاویر آپلودشده شما بیش از حد بزرگ هستند، تعداد زیادی تصویر بندانگشتی تولید می‌کنید و ممکن است بارها و بارها با سطوح فشرده‌سازی مختلف آزمایش کنید.

رایج‌ترین مشکلات Imagify

  1. فرمان Free 20MB برای انجام “پاک‌سازی کامل تاریخچه سایت” کافی نیست.”
    20MB عموماً برای آزمایش و به‌روزرسانی‌های جزئی مناسب‌تر است؛ اگر کتابخانه رسانه‌ای شما از قبل بزرگ باشد، پاک کردن یک‌بارهٔ همهٔ آن احتمالاً نیازمند ارتقا خواهد بود.
  2. تنظیم مکرر سطح فشرده‌سازی باعث می‌شود سهمیه بارها مصرف شود.
    Imagify: توضیحی روشنبهینه‌سازی مجدد دوباره سهمیه را مصرف خواهد کرد.
    ما پیشنهاد می‌کنیم که “استراتژی” را به‌وضوح در این صفحه بیان کنید:
  • ابتدا با استفاده از تعداد کمی تصویر، سطح فشرده‌سازی و کیفیت بصری را تعیین کنید.
  • پس از نهایی شدن استراتژی، آن را به‌صورت دسته‌ای اجرا کنید.
    از آزمون و خطا در سراسر کل پایگاه داده اجتناب کنید.
  1. اشتراک‌گذاری یک کلید API در چندین سایت باعث کاهش مرموزانه سهمیه‌ها می‌شود.“
    اگر از یک کلید API یکسان در چندین سایت استفاده کنید، سهمیه‌ها مشترک خواهند بود.
    بنابراین، در سناریوهای تیمی یا چندمحله‌ای، بهتر است مشخص شود کدام سایت‌ها منابع را به اشتراک می‌گذارند و کدام به طور مستقل عمل می‌کنند تا از افزایش هزینه‌ها جلوگیری شود.

3.2.3 تینی‌پی‌ان‌جی(تصاویر فشردهٔ کوچک): ۵۰۰ اعتبار رایگان در ماه؛ تبدیل به WebP/AVIF مستلزم پرداخت هزینهٔ اضافی ۱ اعتبار برای هر اندازه است.“

معافیت‌های مالیاتی و نحوهٔ محاسبهٔ آن‌ها

صفحهٔ افزونهٔ TinyPNG وردپرس بسیار واضح نوشته شده است:

  • ۵۰۰ اعتبار رایگان هر ماه
  • در یک “نصب استاندارد وردپرس”، احتمالاً می‌توانید فشرده کنید. تقریباً ۱۰۰ تصویر در ماه
  • با این حال، اگر تبدیل AVIF یا WebP فعال باشد:هر اندازه تصویر یک اعتبار اضافی هزینه خواهد داشت.، بنابراین فکر می‌کنم تنها گزینه فشرده‌سازی و تبدیل آن است. تقریباً ۵۰ تصویر در ماه(این بستگی دارد به اینکه شما چند اندازهٔ تصویر بندانگشتی دارید.)

در همین حال، تینی‌فای (توسعه‌دهنده TinyPNG و TinyJPG) نیز صفحه قیمت‌گذاری APIلطفاً توجه داشته باشید: برای دریافت ۵۰۰ فشرده‌سازی رایگان در ماه ثبت‌نام کنید؛ پس از فراتر رفتن از این حد، بر اساس تعداد فشرده‌سازی‌های موفق از شما هزینه دریافت می‌شود، بدون نیاز به اشتراک اجباری.

برای خلاصه‌کردن نحوهٔ کار TinyPNG در یک جمله:
این بر اساس اعتبار محاسبه می‌شود؛ هرچه اندازه‌های تصویر بندانگشتی بیشتری داشته باشید و هرچه WebP/AVIF را بیشتر فعال کنید، اعتبار شما سریع‌تر مصرف می‌شود.

یک مثال ساده و قابل‌فهم از اعتبارات TinyPNG

فرض کنید سایت شما برای هر تصویر هشت اندازهٔ بندانگشتی تولید می‌کند:

  • فقط فشرده‌سازی: تصویر اصلی + ۸ تصویر کوچک → ۹ اعتبار لازم است
  • اگر تبدیل WebP/AVIF فعال باشد: برای هر سایز یک اعتبار اضافی کسر خواهد شد → این ممکن است هزینه کل را تقریباً دو برابر کند.
    این مطابق با توضیحات صفحهٔ افزونه است: وقتی تبدیل فعال شود، سهمیهٔ رایگان از تقریباً “۱۰۰ در ماه” به “۵۰ در ماه” تغییر می‌کند.

رایج‌ترین مشکلات TinyPNG

  1. فکر می‌کردم ۵۰۰ اعتبار یعنی ۵۰۰ تصویر.
    خیر. هزینه به‌ازای هر “اندازه/نوع تصویر” محاسبه می‌شود. صفحهٔ افزونه به‌وضوح بیان می‌کند که “تبدیل برای هر اندازهٔ تصویر یک اعتبار اضافی هزینه خواهد داشت”.
  2. پلاگین قالب/فروشگاه اینترنتی اندازه‌های تصویری زیادی تولید می‌کند و سهمیهٔ رایگان به‌طور قابل‌توجهی کاهش یافته است.
    هرچه ابعاد بیشتر باشد، تخلیه اعتبارها آسان‌تر است.
  3. بعد از فعال کردن تبدیل، متوجه شدم که سقف اعتبارم ناگهان تمام شده است.
    این یک باگ نیست؛ این نحوه عملکرد سیستم صورتحساب است.
    توصیه‌های استراتژیک:
  • اگر فاز آزاد عمدتاً برای فشرده‌سازی و کاهش حجم باشد، می‌توانید با اعمال فشرده‌سازی شروع کنید. وقتی مطمئن شدید ساختار سایت پایدار است و واقعاً به نسل بعدی نیاز دارید، می‌توانید تبدیل را آغاز کنید.

۴. توصیه‌ها بر اساس سناریو: چگونه برای انواع مختلف وب‌سایت‌ها انتخاب کنیم

با اینکه همه‌شان روی وردپرس اجرا می‌شوند، “نقطه‌های درد تصویر” بین سایت‌های محتوایی، سایت‌های تجارت الکترونیک، پرتفولیوها و سایت‌های عضویت متفاوت است.

۴.۱ سایت‌های/وبلاگ‌های محتوایی (شامل تصاویر و مقالات متعدد، با فرکانس به‌روزرسانی متوسط)

توصیه‌های اولویت‌دار:

  1. استراتژی تعیین ابعاد (مرحله ۱)
  2. فشرده‌سازی (مرحله ۲)
  3. وب‌پی (مرحله ۳)

مسیر مناسب‌تر:

  • اگر می‌خواهید گزینه‌ای بدون دردسر داشته باشید: یکی از سه گزینه در بخش B (ShortPixel / Imagify / TinyPNG) را انتخاب کنید.
  • اگر به دنبال یک گزینهٔ رایگان هستید: مسیر A (Plus WebP + EWWW)، اما توصیه می‌کنیم ابتدا با “حالت محافظه‌کارانه (تصاویر اصلی را حذف نکنید)” شروع کنید تا ریسک‌ها را ارزیابی کنید.

دام‌های رایج:

۴.۲ وب‌سایت‌های تجارت الکترونیک/محصول (با داشتن تصاویر بندانگشتی و گزینه‌های تصویری متعدد؛ پایداری از اهمیت بالایی برخوردار است)

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

توصیه‌های اولویت‌دار:

  1. با احتیاط شروع کنید: یک استراتژی فشرده‌سازی محافظه‌کارانه اتخاذ کنید؛ مستقیماً سراغ جایگزینی کامل پایگاه داده نروید.
  2. ارزیابی اندازه‌های تصویر بندانگشتی: قالب‌های تجارت الکترونیک معمولاً اندازه‌های بیشتری تولید می‌کنند که می‌تواند مصرف داده را به‌طور قابل‌توجهی افزایش دهد (این موضوع به‌ویژه در مورد ShortPixel و TinyPNG مشهود است).
  3. ابتدا یک آزمایش کوچک‌مقیاس انجام دهید، سپس آن را برای مخاطبان گسترده‌تر ارائه کنید (این امر کاملاً حیاتی است)

مسیر مناسب‌تر:

  • گزینهٔ B معمولاً انتخابی بدون دردسر است: ShortPixel، Imagify و TinyPNG همگی از پردازش دسته‌ای پشتیبانی می‌کنند؛ نکتهٔ کلیدی درک سیستم سهمیه و برآورد هزینه‌ها از پیش است.
  • گزینهٔ A نیز قابل قبول است، اما باید در مورد رفتار Plus WebP در “نوشتن روی شناسه‌ها، حذف تصاویر اصلی و جایگزینی آدرس‌های URL” با احتیاط بیشتری عمل کنید: از آنجا که این امر به معنای مهاجرت دارایی است، ما توصیه نمی‌کنیم فوراً جایگزینی کامل را انجام دهید.

۴.۳ پورتفولیو/وب‌سایت‌های عکاسی (جایی که کیفیت تصویر حیاتی است، فایل‌ها حجیم هستند و جذابیت بصری در اولویت قرار دارد)

توصیه‌های اولویت‌دار:

  1. استراتژی ابعاد‌بندی (کنترل ناحیه نمایش)
  2. استراتژی فشرده‌سازی (بهتر است فایل کمی بزرگ‌تر باشد تا جزئیات از دست نرود)
  3. WebP/AVIF (مزایای آن برای تصاویر بزرگ واضح است، اما کیفیت بصری آن نیاز به تأیید دارد)

مسیر مناسب‌تر:

  • تصویرسازاز آنجا که سهمیه بر اساس “اندازهٔ تصویر اصلی” کسر می‌شود، این نوع سایت کنترل هزینه‌ها را آسان‌تر می‌کند (چون تقریباً می‌دانید هر تصویر بزرگ چقدر هزینه خواهد داشت)، اما باید از بارگذاری مکرر همان تصاویر خودداری کنید.
  • شورت‌پیکسلاگر اندازه‌های کوچک‌شده زیاد نباشند، مصرف اعتبار نسبتاً ساده است؛ اما اگر تعداد زیادی اندازه به‌علاوه نسخه‌های نسل بعدی تولید کنید، مصرف اعتبار به‌طور قابل‌توجهی افزایش می‌یابد، بنابراین باید از قبل برنامه‌ریزی کنید.

۵. سهمیه در مقابل صورت‌حساب: بررسی دقیق اینکه آیا سهمیهٔ رایگان کافی است

کدام یک ارزش خرید بهتری دارد و دوره آزمایشی رایگان تا چه مدت ادامه خواهد داشت؟

۵.۱ سه مدل صورتحساب

  • شورت‌پیکسل(اعتبارها)اعتبارات بر اساس “تصویر اصلی به‌علاوه تعداد آیکون‌ها” محاسبه می‌شوند؛ تولید فایل‌های WebP/AVIF برای هر نسخه، هزینه اعتبار اضافی در بر خواهد داشت.
  • تصویرساز(سهمیه MB)کوتا بر اساس “حجم فایل اصلی” کسر می‌شود؛ هرچه تعداد پیش‌نمایش‌ها بیشتر باشد، کوتا بیشتری مصرف می‌شود؛ فشرده‌سازی مجدد منجر به کسر بیشتر کوتا خواهد شد.
  • تینی‌پی‌ان‌جی(اعتبارها): ۵۰۰ اعتبار در ماه؛ فعال‌سازی تبدیل WebP/AVIF برای هر اندازه تصویر هزینه اضافی در بر خواهد داشت.

۵.۲ روش‌های برآورد سریع

می‌توانید آن را به شرح زیر تخمین بزنید:

  1. هر تصویر اصلی‌ای را که اغلب آپلود می‌کنید انتخاب کنید و اندازه تقریبی آن را بررسی کنید (مثلاً 300 کیلوبایت / 1MB / 3MB)
  2. این بستگی دارد به اینکه سایت شما معمولاً چند اندازهٔ تصویر بندانگشتی تولید می‌کند (مثلاً ۵، ۱۰ یا ۲۰).
  3. تصمیم بگیرید که آیا می‌خواهید WebP/AVIF تولید کنید (بله/خیر)

سپس از “حساب ذهنی” زیر برای درک مصرف استفاده کنید:

  • شورت‌پیکسلبرای هر تصویر تقریباً (۱ + تعداد آیکون‌های کوچک) اعتبار؛ اگر WebP/AVIF تولید شود، تقریباً دو برابر آن (زیرا نسخه‌های نسل بعدی نیز به اعتبار نیاز دارند)
  • تصویرسازمحدودیت هر تصویر تقریباً برابر است با (اندازهٔ تصویر اصلی + مجموع اندازهٔ تمام تصویرهای کوچک)؛ تغییر سطح فشرده‌سازی و فشرده‌سازی مجدد تصویر منجر به کاهش بیشتر در این محدودیت خواهد شد.
  • تینی‌پی‌ان‌جی۵۰۰ اعتبار رایگان؛ اگر سایت شما برای هر تصویر اندازه‌های متعددی تولید کند و تبدیل تصویر فعال باشد، تعداد تصاویر رایگان به‌طور قابل‌توجهی کاهش می‌یابد (صفحهٔ افزونه تخمین تقریبی “حدود ۱۰۰ در ماه” و “حدود ۵۰ در ماه” را ارائه می‌دهد)

۶. افشای ریسک

ریسک ۱: از اینکه چندین افزونه یک کار را انجام دهند اجتناب کنید

این رایج‌ترین “منبع فاجعه” است.”

  • مسیر A:به‌علاوه WebP یا AVIF + EWWW(وظایف را بین این دو تقسیم کنید؛ تبدیل و تحویل را همزمان انجام ندهید، یا فقط یکی از آنها را نصب کنید)
  • گزینه ب: ShortPixel / Imagify / TinyPNG یکی از سه مورد را انتخاب کنید(یکی را برای مدیریت فشرده‌سازی و نسل بعدی انتخاب کنید)

ریسک ۲: علاوه بر این، ویژگی‌های “نوشتن روی شناسه / حذف تصویر اصلی / جایگزینی URL” در WebP، انتقال دارایی محسوب می‌شوند.

برای تأکید مجدد:به‌علاوه WebP توضیحات به‌وضوح بیان می‌کند که در طول یک نسل کامل، شناسهٔ تصویر اصلی بازنویسی می‌شود، فایل اصلی حذف می‌شود و URL محتوا جایگزین می‌گردد.
این بدان معناست که این یک “تعدیل جزئی که در هر زمان قابل بازگشت است” نیست، بلکه تغییری در سطح دارایی است.

استراتژی پیشنهادی باید به این صورت باشد:

  • با یک آزمایش در مقیاس کوچک (چند ده تا چند صد) شروع کنید.
  • تأیید کنید که نمایش فرانت‌اند، پیش‌نمایش‌ها و به‌روزرسانی‌های کش همگی به‌درستی کار می‌کنند.
  • پردازش کل پایگاه داده را در نظر بگیرید.

ریسک ۳: مصرف واقعی “مقدار مجاز رایگان” برای فشرده‌سازی ابری به تعداد پیش‌نمایش‌ها و انتخاب گزینه‌های نسل بعدی بستگی دارد.

  • شورت‌پیکسل: پیش‌نمایش‌ها و ویژگی‌های نسل بعدی تأثیر قابل‌توجهی بر اعتبارها خواهند داشت
  • تینی‌پی‌ان‌جیفعال‌سازی WebP/AVIF منجر به کسر اعتبار اضافی برای هر اندازه تصویر خواهد شد.
  • تصویرسازهزینه‌ها بر اساس اندازهٔ تصویر اصلی محاسبه می‌شوند؛ هرچه تعداد تصاویر بندانگشتی بیشتر باشد، هزینه بالاتر خواهد بود؛ دانلودهای مکرر مستلزم پرداخت هزینه‌های اضافی است.

ریسک ۴: “تولید WebP/AVIF شده است” به معنای “فرانت‌اند در حال ارائه WebP/AVIF است” نیست.”

بسیاری از افراد احساس می‌کنند که سایت‌شان پس از تبدیل هیچ‌گونه افزایش سرعتی نداشته است؛ علت اصلی این است که بخش فرانت‌اند همچنان فایل‌های JPG/PNG را ارائه می‌دهد (به دلیل عدم تطابق در هر یک از موارد زیر: کشینگ، بازنویسی، تگ‌ها یا مذاکره مرورگر).

۷. وقتی کارم تمام شد، چگونه بفهمم که اثر کرده است؟

۴ نقطهٔ کنترل بسیار ساده:

  1. آیا هنگام تازه‌سازی همان صفحه برای بار دوم، فرآیند بارگذاری پایدارتر و سریع‌تر است؟(تاثیرهای کشینگ و بهینه‌سازی چقدر قابل‌مشاهده هستند؟)
  2. آیا تفاوت قابل‌توجهی در اندازهٔ تصاویر بارگذاری‌شده در دستگاه‌های موبایل و رایانه‌های رومیزی وجود دارد؟(واکنش‌گرا مجموعه/اندازه‌ها (که آیا کار می‌کند)
  3. چند تصویر را به‌صورت تصادفی بررسی کنید: آیا فایل‌ها یا منابع WebP یا AVIF وجود دارند؟(آیا این سایت واقعاً در حال استفاده از نسل بعدی
  4. چند تصویر را نگاه کنید: زوم کنید تا ببینید آیا آن‌ها به‌طور قابل‌توجهی تار هستند یا متن مبهم به نظر می‌رسد.(آیا فشرده‌سازی بیش از حد قوی است؟)

اگر هر چهار مورد از این‌ها صدق کند، یعنی مسیری که انتخاب کرده‌اید از قبل راه‌اندازی شده و در حال اجراست. سپس به سراغ CDN “لایه تحویل”...در کل پایدارتر خواهد بود.

۸. توصیه‌ها برای اقدام

  1. ابتدا یک مسیر را انتخاب کنید:
  • می‌خواهم آن را تا حد امکان رایگان نگه دارم.: به‌علاوه WebP یا AVIF + EWWW (یا فقط یکی از آن‌ها را نصب کنید)
  • می‌خواهید در منابع سرور صرفه‌جویی کنید؟ پرداخت بر اساس مصرف، بدون دردسرتر است.: یکی از ShortPixel، Imagify یا TinyPNG را انتخاب کنید
  1. با یک آزمایش در مقیاس کوچک (چند ده) شروع کنید.
  2. قبل از پردازش دسته‌ای، بررسی کنید که همه‌چیز مرتب باشد.
  3. اعتمادپذیری تحویل باید بیش‌تر بهبود یابد:خواندن شتاب CDN

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

۱. چند پلاگین باید نصب کنم؟ آیا می‌توانم همه‌شان را نصب کنم؟

سعی کنید به یک مسیر واحد پایبند بمانید.

  • گزینه A: WebP یا AVIF به‌علاوه EWWW Image Optimizer (یا نصب تنها یکی از آن‌ها)
  • گزینهٔ ب: یکی از ShortPixel، Imagify یا TinyPNG را انتخاب کنید.
    اجرای همزمان چندین افزونه روی یک سایت برای انجام فشرده‌سازی، تبدیل به WebP یا AVIF، تغییر URL و بازنویسی تحویل، مطمئن‌ترین راه برای ایجاد آشفتگی و سخت‌ترین مورد برای عیب‌یابی است.

۲. آیا وردپرس از قبل از WebP/AVIF پشتیبانی نمی‌کند؟ آیا هنوز به یک افزونه نیاز دارم؟

مهم است که بین موارد زیر تمایز قائل شویم:
“پشتیبانی از بارگذاری/استفاده” ≠ “تبدیل خودکار/تحویل خودکار”
وردپرس ۶.۵ به‌طور خودکار فایل‌های موجود JPG/PNG را به‌صورت دسته‌ای به WebP/AVIF تبدیل نمی‌کند و همچنین کل فرایند “ارائه AVIF/WebP بر اساس قابلیت‌های مرورگر و بازگشت به فرمت اصلی” را به‌طور خودکار مدیریت نمی‌کند. برای اطمینان از به‌روزرسانی شدن کتابخانه رسانه‌ای فعلی‌تان، معمولاً باید از یک افزونه یا سرویس برای پر کردن این شکاف‌ها استفاده کنید.

۳. وقتی صحبت از بهینه‌سازی تصویر می‌شود، کدام مرحله واقعاً بالاترین بازگشت سرمایه را ارائه می‌دهد؟

معمولاً ابتدا ابعاد را درست تنظیم کنید (srcset/sizes)
بسیاری از وب‌سایت‌ها کند هستند نه به این دلیل که فشرده نشده‌اند، بلکه به این دلیل که صفحه‌ای با عرض تنها ۹۰۰ پیکسل نمایش می‌دهند در حالی که کاربران را مجبور می‌کنند تصویر اصلی ۳۰۰۰ پیکسل را دانلود کنند. فشرده‌سازی می‌تواند چند کیلوبایت صرفه‌جویی کند، اما “ابعاد نادرست” باعث می‌شود بدون هیچ دلیلی چندین برابر آن حجم داده را دانلود کنید.

۴. چگونه می‌توانم مطمئن شوم که هر بار “نسخه کوچکتر” بارگذاری می‌شود، نه تصویر اصلی؟

دو پدیده را در نظر بگیرید:

  • وقتی در یک دستگاه موبایل مشاهده می‌شوند، تصاویر دانلودشده به‌طور قابل‌توجهی کوچکتر از نسخه دسکتاپ هستند.
  • اندازهٔ فایل همان تصویر بسته به دستگاهی که روی آن بارگذاری می‌شود، متفاوت است.
    اگر تصاویر همیشه با اندازهٔ اصلی خود دانلود می‌شوند، اغلب به این دلیل است که قالب یا سازندهٔ صفحه تصویر را به‌عنوان تصویر پس‌زمینهٔ CSS یا خروجی سفارشی در نظر می‌گیرد و بدین ترتیب از قابلیت پشتیبانی کتابخانهٔ رسانه از ابعاد مختلف و ویژگی `srcset` عبور می‌کند.

۵. آیا “تولید WebP/AVIF” لزوماً به این معنی است که فرانت‌اند در حال خروجی گرفتن WebP/AVIF است؟

مساوی نیست با.
فرآیند تولید تنها در سطح فایل کامل می‌شود؛ اینکه آیا WebP/AVIF واقعاً به سمت کلاینت ارسال می‌شود یا خیر، به عواملی مانند بازنویسی، سیاست تگ `picture`، برخورد با کش و مؤثر بودن مذاکره مرورگر بستگی دارد. پس از اتمام کار، حتماً انواع منابع چند تصویر را به‌صورت نمونه‌ای بررسی کنید.

۶. دقیقاً ریسک‌های مرتبط با WebP یا AVIF چیست؟ آیا می‌توانم یک اسکن یک‌کلیک را روی کل پایگاه داده اجرا کنم؟

خطر در “فشردگی” نیست، بلکه درتغییرات در سطوح مهاجرت دارایی

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

۷. چگونه بین دو حالت در Plus WebP انتخاب می‌کنید: حفظ تصویر اصلی یا جایگزینی و حذف تصویر اصلی؟

به زبان ساده:

  • گزینه ۱: حفظ تصویر اصلی + تولید نسخه‌های WebP/AVIF (قابل‌اعتمادتر)بازگشت به حالت اولیه آسان است، اما فضای بیشتری روی دیسک اشغال می‌کند (تصویر اصلی + فرمت جدید + چندین اندازهٔ پیش‌نمایش).
  • روش دوم: جایگزینی و حذف تصویر اصلی (رادیکال‌تر)دیسک مستعد گسترش نیست، اما اگر دارایی‌ها و ارجاعات را تغییر دهید، عیب‌یابی مشکلات سازگاری پرهزینه‌تر می‌شود.
    هرچه سایت پیچیده‌تر باشد (فروشگاه اینترنتی، افزونه‌های متعدد، اندازه‌های گوناگون)، بیشتر توصیه می‌کنیم با رویکردی پایدارتر شروع کنید.

۸. آیا فشرده‌سازی محلی رایگان ارائه‌شده توسط EWWW Image Optimizer کافی است؟ آیا این کار سرور را بیش‌بارگذاری می‌کند؟

EWWW بیشتر شبیه یک “ابزار فشرده‌سازی محلی” است: آن CPU/IO مصرف می‌کند.
افزایش بار در حین بهینه‌سازی دسته‌ای امری رایج است؛ این به معنای از کار افتادن سیستم نیست، بلکه نشان می‌دهد که باید رویکرد مناسبی اتخاذ شود: پردازش به‌صورت دسته‌ای در ساعات کم‌بار، و در صورت لزوم استفاده از راهکارهای بارگذاری خارج از سیستم یا راه‌حل‌های ابری.
اگر به دنبال یک راه‌حل بدون دردسر هستید یا منابع سرور شما محدود است، گزینهٔ ب از نظر سرور کارآمدتر است.

۹. ShortPixel ماهانه ۱۰۰ اعتبار رایگان ارائه می‌دهد، پس چرا احساس می‌کنم این اعتبارات فقط پس از چند تصویر تمام می‌شوند؟

زیرا “Credits” به «تعداد تصاویر» اشاره نمی‌کند.”، با تصاویر بندانگشتی و نسل بعدی بزرگ‌تر خواهد شد:

  • تصویر اصلی + اعتبار برای هر آیکون
  • اگر فایل‌های WebP/AVIF تولید شوند، برای هر نسخهٔ متناظر هزینهٔ اضافی در اعتبارات منظور خواهد شد.
    پس آنچه ممکن است فکر کنید “یک تصویر” باشد، در واقع می‌تواند تقریباً “ده اعتبار” مصرف کند. ShortPixel

۱۰. چرا سهمیه رایگان ماهانه ۲۰۰۰ تصویر Imagify این‌قدر سریع تمام می‌شود؟

Imagify بیشتر شبیه یک “بسته داده” است:

  • طبق پیام شمااندازهٔ فایل اصلیکسر از سهمیه
  • هرچه تعداد پیش‌نمایش‌ها بیشتر باشد، مصرف منابع نیز بیشتر خواهد بود.
  • تغییر سطح فشرده‌سازی و بهینه‌سازی مجدد، دوباره سهمیه را مصرف خواهد کرد.
  • یک کلید API واحد می‌تواند در چندین سایت استفاده شود و سهمیه‌ها به‌صورت مشترک به اشتراک گذاشته می‌شوند.
    بنابراین پیام “20MB به‌زودی تمام می‌شود” اغلب به‌خاطر تصاویر بسیار بزرگ، تعداد زیاد پیش‌نمایش‌ها یا آزمون و خطای مکرر رخ می‌دهد.

۱۱. TinyPNG ماهانه ۵۰۰ اعتبار رایگان ارائه می‌دهد، پس چرا افزونه می‌گوید ماهانه فقط حدود ۱۰۰ تصویر در دسترس است، و چرا پس از فعال کردن WebP/AVIF این تعداد به ۵۰ تصویر در ماه کاهش می‌یابد؟

این به این دلیل است که اعتبارهای TinyPNG نیز در بخش “ابعاد/واریانت‌ها” بزرگ‌تر شده‌اند:

  • یک نصب استاندارد وردپرس معمولاً حدود ۱۰۰ تصویر در ماه را فشرده می‌کند.
  • فعال‌سازی تبدیل AVIF یا WebP:هر اندازه تصویر یک اعتبار اضافی هزینه خواهد داشت.، بنابراین احتمالاً فقط می‌توانم حدود ۵۰ تصویر در ماه را فشرده و تبدیل کنم (بسته به تعداد اندازه‌های تصویر بندانگشتی).
    پس ۵۰۰ اعتبار ≠ ۵۰۰ تصویر.

۱۲. در سایت ما چند تصویر بندانگشتی وجود دارد؟ چرا آن‌ها تأثیر قابل‌توجهی دارند؟

بارگذاری یک تصویر در وردپرس چندین اندازه تولید می‌کند؛ قالب‌ها و افزونه‌ها (به‌ویژه افزونه‌های تجارت الکترونیک) ممکن است اندازه‌های بیشتری تولید کنند.
با فشرده‌سازی ابری، اعتبارها یا سهمیه‌ها معمولاً بر اساس “تصاویر اصلی به‌علاوهٔ مجموع مینیاتورها” محاسبه می‌شوند، بنابراین هرچه مینیاتورهای بیشتری داشته باشید، سهمیهٔ رایگان شما سریع‌تر تمام می‌شود.

۱۳. آیا بارگذاری تنبل همیشه سرعت را افزایش می‌دهد؟ چرا بعضی‌ها می‌گویند بارگذاری تنبل در واقع سرعت را کاهش می‌دهد؟

بارگذاری تنبل برای “منابع خارج از صفحه” مناسب است.
اگر مهم‌ترین تصویر بزرگ در صفحهٔ اول نیز با تأخیر بارگذاری شود، ممکن است تجربهٔ بارگذاری اولیه را کند کند. اگرچه بارگذاری تنبل پیش‌فرض در وردپرس ۵.۵ و نسخه‌های جدیدتر خوب است، نباید آن را به‌طور یکسان در همه جا اعمال کنید.

۱۴. اگر مسیر A یا B را انتخاب کنم، چه زمانی به CDN / Image CDN نیاز دارم؟

فشرده‌سازی، اندازه و فرمت فایل به مسئله کوچک‌تر و مناسب‌تر کردن فایل‌ها می‌پردازند.
CDN تحویل سریع‌تر و قابل‌اعتمادتری را تضمین می‌کند.
وقتی تأخیر قابل‌توجهی به‌دلیل دریافت تصاویر از یک سرور مبدأ دوردست وجود دارد، افزودن CDN برای هر تصویر (مثلاً Cloudflare Polish / Jetpack Site Accelerator) معمولاً تجربه‌ای پایدارتر ایجاد می‌کند و خواندن محتوا را آسان‌تر می‌سازد. شتاب‌دهی وردپرس CDN

۱۵. وقتی کارم تمام شد، ساده‌ترین راه برای بررسی اینکه واقعاً در حال کار کردن است چیست؟

سریع‌ترین راه برای تأیید:

  • آیا هنگام تازه‌سازی همان صفحه برای بار دوم، فرآیند بارگذاری پایدارتر و سریع‌تر است؟
  • آیا تفاوت قابل‌توجهی در اندازه تصویر بین نسخه‌های موبایل و دسکتاپ وجود دارد (آیا ویژگی‌های `srcset` و `sizes` طبق انتظار عمل می‌کنند)؟
  • چند تصویر را به‌صورت تصادفی بررسی کنید: آیا فایل‌ها یا منابع WebP یا AVIF وجود دارند؟
  • چند تصویر را نگاه کنید: زوم کنید تا ببینید آیا آن‌ها به‌طور قابل‌توجهی تار هستند یا متن مبهم به نظر می‌رسد.