AVIF یا WebP، با اندازهگیری
کدام قالب روی عکس، اسکرین‌شات و آیکون کوچکتر است، با بایت‌ها.
خواندن راهنماراهنمای CDN.com.tr
بهینهسازی تصویر: AVIF و WebP روی لبه
بهینهسازی تصویر را برای حساب یا برای یک قانون تحویل روشن کنید و WebP یا WebP + AVIF را انتخاب کنید: لبه تصاویر JPEG و PNG را تبدیل میکند و به هر مرورگر قالبی را که میپذیرد میفرستد، و URL تصاویر در صفحات شما همان می‌ماند.
کش، امنیت، WAF و پاکسازی
بهینهسازی تصویر: AVIF و WebP روی لبه
بهینهسازی تصویر را برای حساب یا برای یک قانون تحویل روشن کنید و WebP یا WebP + AVIF را انتخاب کنید: لبه تصاویر JPEG و PNG را تبدیل میکند و به هر مرورگر قالبی را که میپذیرد میفرستد، و URL تصاویر در صفحات شما همان می‌ماند.
مسیر در پنل
- پنل مدیریت
- قوانین تحویل
- بهینهسازی تصاویر
- قالب تصویر
پیش‌نیازها
- یک حساب CDN که سایتش از طریق لبه ارائه میشود.
- نقش مالک یا ویرایشگر: بیننده‌ها می‌توانند تنظیمات را ببینند و بررسی تصویر را اجرا کنند، اما نمی‌توانند آنها را تغییر دهند.
- بدانید کدام مسیرها به محافظت hotlink، URLهای امضاشده یا محدودیت نرخ درخواست نیاز دارند: قانونی که بهینهسازی تصویر در آن روشن است هیچ‌کدام را اعمال نمی‌کند، و کلید حساب آنها را از فایل‌های JPEG و PNG برمی‌دارد.
مدل تصمیم‌گیری
کل حساب یا یک قانون؟
کلید حساب فایل‌های JPEG و PNG را در همه قوانین پوشش میدهد. کلید قانون فقط مسیرهای همان قانون را پوشش میدهد؛ راه خوبی برای امتحان کردن آن اول روی یک پوشه یا یک دامنه.
- کل حساب: برای سایتی که تصاویرش عمومی است
- برای هر قانون: اول یک پوشه یا دامنه، در حالی که قوانین دیگر محافظت‌هایشان را نگه می‌دارند
WebP یا WebP + AVIF؟
قالب یک بار برای حساب انتخاب میشود و هرجا بهینهسازی تصویر روشن باشد اعمال میشود.
- WebP: تقریباً همه مرورگرهای در حال استفاده، هزینه پردازش کمتر
- WebP + AVIF (خودکار): AVIF برای مرورگرهایی که آن را میپذیرند، معمولاً کوچکترین برای عکس‌ها
راهنمای گام‌به‌گام
بهینهسازی تصویر را روشن کنید
کلید حساب سریع‌ترین شروع است؛ کلید قانون آن را به مسیرهای همان قانون محدود میکند.
- قوانین تحویل را باز کنید و حساب را انتخاب کنید.
- بهینهسازی تصاویر برای کل حساب را روشن کنید، یا یک قانون را باز کنید و بهینهسازی تصویر را همان‌جا روشن کنید.
- ذخیره کنید و صبر کنید تا تغییر روی لبه منتشر شود.
نتیجه مورد انتظار: درخواست‌های JPEG و PNG در آن مسیرها روی لبه تبدیل میشوند.
معادل cdnctl
curl -s -X POST -H "Authorization: Bearer $CDN_TOKEN" -H 'Content-Type: application/json' -d '{"type":1}' https://cdn.com.tr/api/accounts/$ACCOUNT_UUID/image_optimization
# فقط برای یک قانون: "image_optimization":"on" را در JSON قانون بگذارید
cdnctl cdn advanced-rules create --account "$ACCOUNT_UUID" --file rule-images.jsonقالب را انتخاب کنید
قالب هرجا بهینهسازی تصویر روشن باشد اعمال میشود، چه برای کل حساب چه در یک قانون.
- زیر قالب تصویر، WebP یا WebP + AVIF (خودکار) را انتخاب کنید.
- پیش از ذخیره، نرخی را که زیر قالب نشان داده میشود بخوانید.
نتیجه مورد انتظار: با WebP + AVIF، مرورگرهایی که AVIF را میپذیرند از همان URLها AVIF دریافت میکنند؛ بقیه WebP یا تصویر را در قالب اصلیاش.
معادل cdnctl
curl -s -X POST -H "Authorization: Bearer $CDN_TOKEN" -H 'Content-Type: application/json' -d '{"enabled":true}' https://cdn.com.tr/api/accounts/$ACCOUNT_UUID/image_avifپاکسازی کنید، سپس بررسی کنید
تصاویری که پیش از روشنکردن بهینهسازی کش شده‌اند تا زمان انقضا قالب قبلی را نگه می‌دارند، پس پس از روشنکردن، مسیرهای تصویر را پاکسازی کنید. تغییر قالب به پاکسازی نیاز ندارد.
- پوشه‌های تصویر، یا همه چیز را، در پاکسازی کش پاکسازی کنید.
- بررسی قالب تصویرِ زیر کلید را روی یکی از دامنه‌های حساب اجرا کنید.
نتیجه مورد انتظار: بررسی، هر تصویر را با قالب و اندازه‌ای که یک مرورگر مدرن دریافت میکند فهرست میکند؛ وقتی بهینه‌ساز نسخه اصلی را نگه داشته چون تبدیل کوچکتر نبوده، آن سطر این را می‌گوید.
معادل cdnctl
cdnctl purge --account "$ACCOUNT_UUID" --path /wp-content/uploads/ --type prefix
curl -s -H "Authorization: Bearer $CDN_TOKEN" "https://cdn.com.tr/api/accounts/$ACCOUNT_UUID/image_check?host=www.example.com"راستی‌آزمایی
- curl -sLo /dev/null -w '%{content_type} %{size_download}\n' -H 'Accept: image/avif,image/webp,*/*' https://www.example.com/photo.jpg → image/avif یا image/webp (با WebP بهتنهایی: image/webp پس از تغییر مسیر)، مگر اینکه فایل تبدیل‌شده کوچکتر نبوده باشد
- curl -s -D - -o /dev/null -H 'Accept: image/webp,*/*' https://www.example.com/photo.jpg | grep -iE '^(vary|location)' → WebP + AVIF: Vary: Accept؛ WebP بهتنهایی: Location: …/photo.jpg.webp
- curl -so /dev/null -w '%{content_type}\n' -H 'Accept: */*' https://www.example.com/photo.jpg → image/jpeg، یعنی قالب اصلی
موارد کاربرد
یک فروشگاه میخواهد عکس‌های محصول سبک‌تر شوند، بدون خروجی‌گرفتن دوباره از کتابخانه رسانه، بدون نصب افزونه و بدون تغییر حتی یک URL تصویر.
جریان کاری سریع
- قوانین تحویل حساب را باز کنید.
- بهینهسازی تصویر را برای کل حساب روشن کنید، یا آن را در یک قانون روشن کنید تا از مسیرهای همان قانون شروع کنید.
- زیر قالب تصویر، برای حساب WebP یا WebP + AVIF (خودکار) را انتخاب کنید.
- تصاویری را که از قبل کش شده‌اند پاکسازی کنید، سپس بررسی قالب تصویرِ زیر کلید را اجرا کنید.
بررسی‌ها
- تبدیل میشوند: فایل‌های JPEG و PNG (.jpg، .jpeg، .png). GIF، SVG و فایل‌هایی که از قبل .webp هستند بدون تغییر ارسال میشوند.
- اینکه قالب چگونه به مرورگر میرسد به قالب حساب بستگی دارد. با WebP + AVIF یک URL به همه مرورگرها پاسخ میدهد: لبه هدر
Acceptمرورگر را میخواند، AVIF، WebP یا تصویر را در قالب اصلیاش میفرستد و باVary: Acceptپاسخ میدهد. با WebP بهتنهایی، مرورگرهایی که WebP را میپذیرند (با 302) به یک نسخهٔ WebP با همان نام و.webpدر انتها (photo.jpg.webp) هدایت میشوند و بقیه تصویر را در قالب اصلیاش می‌گیرند. در هر دو حالت URL تصاویر در HTML شما همان می‌ماند. - در اندازه کامل، تصویری که تازه تبدیل شده فقط وقتی ارسال میشود که از نسخه اصلی کوچکتر باشد: AVIFی که کوچکتر نباشد جای خود را به WebP میدهد، و WebPی که کوچکتر نباشد به نسخه اصلی. تصاویری که با
?w=یا?h=تغییر اندازه داده میشوند مقایسه نمیشوند. - اگر تبدیل شکست بخورد، لبه به‌جای آن تصویر اصلی را ارائه میدهد.
- تصاویر تبدیل‌شده 365 روز نگه داشته میشوند، روی لبه و در مرورگرها. نسخه‌هایی که پیش از روشنکردن بهینهسازی کش شده‌اند، تا زمان انقضا یا تا وقتی آنها را پاکسازی کنید قالب قبلی خود را حفظ میکنند. تغییر قالب به پاکسازی نیاز ندارد: لبه هر قالب را جداگانه نگه می‌دارد، پس بازدیدکنندگان جدید بلافاصله قالب جدید را می‌گیرند، اما مرورگری که تصویری را از قبل بارگذاری کرده ممکن است نسخهٔ خودش را تا یک سال نگه دارد.
- محافظت hotlink، URLهای امضاشده و محدودیت نرخ درخواست: قانونی که بهینهسازی تصویر در آن روشن است هیچ‌کدام از این‌ها را روی هیچ فایلی که ارائه میدهد اعمال نمی‌کند. با روشن بودن کلید حساب، فایل‌های JPEG و PNG در هر قانونی که کلید خودش را ندارد از آنها عبور میکنند. در هر قانونی که فایل‌هایش به این محافظت‌ها نیاز دارند بهینهسازی تصویر را خاموش نگه دارید، و اگر JPEG و PNGهای آن هم نیاز دارند کلید حساب را هم خاموش نگه دارید. قانونِ مسیر دقیق نمی‌تواند از بهینهسازی تصویر استفاده کند.
- پردازش از سهمیه ماهانه شما کسر میشود و AVIF با نرخی بالاتر از WebP. پنل نرخ فعلی را زیر کلید نشان میدهد.
پرسش‌های متداول
چرا بعضی تصاویر هنوز بهصورت JPEG یا PNG میرسند؟
بیشتر وقتها آن نسخه پیش از روشنکردن بهینهسازی کش شده است: آن مسیرها را پاکسازی کنید و دوباره درخواست دهید. دلایل دیگر: در اندازه کامل، نتیجه تبدیل از نسخه اصلی کوچکتر نبوده، مرورگر نه WebP را میپذیرد نه AVIF، یا درخواست قالب تصویر خاصی نخواسته است (یک curl ساده Accept: */* میفرستد). بررسی قالب تصویر در صفحه قوانین تحویل، تصویر به تصویر نشان میدهد یک مرورگر مدرن و یک کلاینت ساده چه دریافت میکنند.
آیا میتوانم اندازه تصاویر را از طریق URL تغییر دهم؟
بله. به URL تصویر ?w= (عرض)، ?h= (ارتفاع) یا هر دو را اضافه کنید. یک مقدار نسبت ابعاد را حفظ میکند، دو مقدار تصویر را داخل همان کادر جا میدهند، و هیچ تصویری بزرگتر از اندازه اصلیاش نمیشود. w و h را در کلید کش آن قانون نگه دارید (حالت پیشفرض، یعنی کل رشته کوئری، همین کار را میکند): قانونی که همه پارامترهای کوئری را نادیده بگیرد برای همه آنها یک اندازه را کش میکند. تصاویری که اندازهشان تغییر میکند هم تبدیل میشوند، اما با نسخه اصلی مقایسه نمیشوند.
هزینه آن چطور حساب میشود؟
بسته جداگانهای وجود ندارد. پردازش مانند ترافیک از سهمیه ماهانه حساب کسر میشود: هر تبدیل به اندازه نسخه اصلی که میخواند بهعلاوه تصویری که برمیگرداند حساب میشود، و AVIF با نرخی بالاتر از WebP حساب میشود چون encode کردن آن پردازش بیشتری میخواهد. پنل نرخ فعلی را زیر کلید نشان میدهد و مصرف داده بهینهسازی تصویر را در سطری جداگانه نشان میدهد.
آیا به WebP + AVIF نیاز دارم؟
یک انتخاب است، نه الزام. WebP بهتنهایی تقریباً به همه مرورگرهای در حال استفاده میرسد. WebP + AVIF برای مرورگرهایی که AVIF را میپذیرند AVIF را اضافه میکند که معمولاً کوچکترین قالب برای عکسهاست: در اندازهگیری ما یک عکس JPEG با حجم 262,025 بایت بهصورت AVIF با 86,936 بایت ارسال شد. بررسیکنندهٔ فرمت تصویر را روی صفحههای خودتان اجرا کنید تا تفاوت را ببینید.