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

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

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

  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/تصویر CDN).

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

  • پردازش تصویر Cloudflareمستندات 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) در مجموع پایدارتر خواهد بود، مطالعه شتاب‌دهی WordPress CDN

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

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

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