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

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

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

  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 را در اولویت قرار دهید یا از فشرده‌سازی بدون افت کیفیت استفاده کنید (فشرده‌سازی با افت کیفیت به‌راحتی باعث محو شدن لبه‌ها می‌شود)

نمره قبولی چیست:

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

۲.۳ وب‌پی / ای‌وی‌آی‌اف (سیاست فرمت: اندازهٔ فایل کوچکتر برای وضوح یکسان)

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

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

سبک نگارش پیشنهادی:

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

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

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

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

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

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

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

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

بهینه‌سازی تصویر مسئول کاهش اندازه و تضمین تناسب آن است.CDN: تحویل نزدیک‌تر و قابل‌اعتمادتر

۳. انتخاب: تنها دو مسیر اصلی باید دنبال شوند.

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

قوانین:

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

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

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

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

  • شما به خدمات فشرده‌سازی شخص ثالث که بر اساس سهمیه ماهانه یا به ازای هر فایل عمل می‌کنند، متکی نیستید (اگرچه برخی ویژگی‌ها ممکن است خدمات اختیاری ارائه دهند).
  • در مقابل، پردازش دسته‌ای ممکن است بار سنگین‌تری بر سرور وارد کند (۱ TP به ازای هر 205 T/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 را ارائه می‌کند.
    بسیاری از افزونه‌ها دچار این تصور غلط هستند: تولید یک چیز است و استراتژی تحویل (بازنویسی، برچسب‌های تصویر، دسترسی به کش و غیره) چیز دیگری است.
  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 تصویرسازیرایگان تا ۲۰۱ تی‌پی، ۲۳۵ تی‌پی در ماه؛ سهمیه بر اساس “اندازهٔ تصویر اصلی + تعداد آیکان‌ها” کسر می‌شود؛ بارگذاری مجدد منجر به کسر تکراری می‌شود.

اختیار و قراردهی آزاد

صفحه رسمی قیمت‌گذاری Imagifyبه‌وضوح نوشته شده است:حساب‌های رایگان دارای سهمیه ماهانه ۲۰۰۱–۲۳۵ ترابایت هستند.
صفحهٔ افزونهٔ آن نیز صراحتاً بیان می‌کند که می‌تواند فایل‌های WebP/AVIF را فشرده، تغییر اندازه و تبدیل کند.

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

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

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

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

نمونه‌های سهمیه Imagify با توضیحات ساده

فرض کنید شما یک تصویر اصلی به حجم ۸۰۰ کیلوبایت را بارگذاری می‌کنید و سایت ۸ تصویر کوچک تولید می‌کند.

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

مشکلات رایج با Imagify

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

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

محدودیت آزاد و روش صورتحساب آن

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

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

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

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

یک مثال آسان برای درک اعتبارهای TinyPNG

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

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

مشکلات رایج با TinyPNG

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

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

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

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

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

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

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

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

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

۴.۲ سایت‌های تجارت الکترونیک/محصول (تعداد زیاد تصاویر کوچک، چندین واریانت تصویری، پایداری در اولویت)

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

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

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

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

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

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

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

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

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

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

۵. مقایسه سهمیه/صورتحساب: توضیح اینکه آیا سهمیه رایگان کافی است

کدام یک از نظر هزینه مقرون‌به‌صرفه‌تر است و دورهٔ رایگان تا چه مدت ادامه خواهد داشت؟

۵.۱ سه مدل کسر کارمزد

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

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

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

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

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

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

۶. افشای ریسک

خطر ۱: از داشتن چندین افزونه که به‌طور اضافی یک عملکرد را انجام می‌دهند، خودداری کنید.

این رایج‌ترین منبع بلایا است.“

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

خطر ۲: قابلیت “ID را بازنویسی کن / تصویر اصلی را حذف کن / URL را جایگزین کن” در Plus 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 (یا فقط یکی از آن‌ها را نصب کنید)
  • مسیر B: یکی را از ShortPixel / Imagify / TinyPNG انتخاب کنید.
    وجود چندین افزونه که به‌طور همزمان عملیات فشرده‌سازی/تبدیل به WebP/AVIF/تغییر URL/بازنویسی تحویل را در یک سایت انجام می‌دهند، به احتمال زیاد هرچه بیشتر آشفته شده و عیب‌یابی آن دشوارتر خواهد شد.

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

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

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

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

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

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

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

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

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

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

نقطهٔ خطر آن “فشردگی” نیست، بلکهاصلاح سطح مهاجرت دارایی

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

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

به زبان ساده:

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

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

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

۹. صد اعتبار رایگان ماهانه ShortPixel – چرا انگار پس از تنها چند تصویر تمام می‌شوند؟

زیرا اعتبارها تعداد تصاویر نیستند.“کوچک‌سازی و بزرگ‌نمایی نسل بعدی:

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

۱۰. چرا اعتبار رایگان ماهانهٔ Imagify معادل 201 TP235T این‌قدر سریع تمام می‌شود؟

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

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

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

زیرا اعتبارهای TinyPNG نیز با “size/variant” تقویت می‌شوند:

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

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

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

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

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

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

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

۱۵. ساده‌ترین راه برای اطمینان از اینکه پس از انجام آن واقعاً کار کرده چیست؟

روش تأیید وقت‌پس‌اندازترین:

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