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

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

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

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

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

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

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

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

  • تصاویر واکنش‌گرا (srcset/sizes)از وردپرس ۴.۴ به بعد، هسته تصاویر را خروجی می‌دهد. srcsetsizes... و از تصاویر چندسایزه‌ای که در حین بارگذاری تولید می‌شوند استفاده می‌کند تا مرورگر بتواند بر اساس شرایط صفحه نمایش، مناسب‌ترین منابع را انتخاب و بارگذاری کند.
  • بارگذاری تنبل بومیاز وردپرس ۵.۵ به بعد، بارگذاری تنبل (lazy loading) بومی برای تصاویر، مطابق با استانداردهای 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: گامی فراتر در فشرده‌سازی، مناسب برای تصاویر بزرگ، تصاویر بزرگ در صفحه اول و تصاویر گالری (اما بیشتروابسته به حمایت محیط زیستی

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

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

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

2.5 لایه تحویل: CDN / تصویر CDN

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

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

  • فشرده‌سازی Cloudflareمستندات کلادفلراین بخش روش‌های فشرده‌سازی موجود در پالیش (بدون‌از دست‌دادن، با از دست‌دادن و 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مفهوم اصلی “تولید/جایگزینی” است؛ این ابزار در معنای سنتی “ابزار فشرده‌سازی” نیست.”

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

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

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

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

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

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

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

توصیه

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

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

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

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

بهینه‌سازی تصویر وردپرس - HOSTFO

صفحهٔ افزونهٔ 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 مصرف می‌شوند.

بهینه‌سازی تصویر وردپرس - HOSTFO

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

توضیحات افزونه 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 تصویرسازرایگان 20MB در ماه؛ سهمیه بر اساس “اندازه تصویر اصلی + تعداد بندانگشتی‌ها” کسر می‌شود و فشرده‌سازی مجدد دوباره کسر می‌کند

بهینه‌سازی تصویر وردپرس - HOSTFO

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

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

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

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

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

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

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

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

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

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

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

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

بهینه‌سازی تصویر وردپرس - HOSTFO

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

صفحهٔ افزونهٔ 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 در “نوشتن روی شناسه‌ها، حذف تصاویر اصلی و جایگزینی آدرس‌ها” احتیاط بیشتری به خرج دهید: از آنجا که این امر به معنای مهاجرت دارایی است، توصیه نمی‌شود بلافاصله جایگزینی کامل انجام دهید.

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

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

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

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

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

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

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

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

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

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

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

  1. یکی از “عکس‌های اصلی که معمولاً آپلود می‌کنید” را انتخاب کنید و ببینید حدوداً چقدر حجم دارد (مثلاً 300KB / 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. چند تصویر را نگاه کنید: زوم کنید تا ببینید آیا آن‌ها به‌طور قابل‌توجهی تار هستند یا متن مبهم به نظر می‌رسد.(آیا فشرده‌سازی بیش از حد قوی است؟)

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

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

  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

چرا سهمیه رایگان ماهانه 20MB در Imagify هم خیلی زود تمام می‌شود؟

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

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

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

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

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

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

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

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

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

اگر مسیر A یا B را بروم، چه زمانی به CDN / تصویر CDN نیاز دارم؟

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

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

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

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