بهینه‌سازی خودکار تصاویر سایت با WebP و AVIF

وقتی بهینه‌سازی برای یک رکورد روشن است، لبه هر درخواستی را که مسیرش به jpg‏، jpeg‏، png یا gif ختم شود به سرویس بهینه‌ساز می‌فرستد. این سرویس تصویر اصلی را مستقیم از سرور مبدأ شما می‌خواند، هدر Accept مرورگر را نگاه می‌کند و تصمیم می‌گیرد چه فرمتی برگرداند. مرورگرهای جدید کروم، فایرفاکس و سافاری AVIF را می‌شناسند و همان را می‌گیرند؛ مرورگرهایی که فقط WebP را می‌شناسند WebP می‌گیرند و مرورگرهای خیلی قدیمی همان JPG یا PNG اصلی را.

علاوه بر تغییر فرمت، یک سقف ابعاد هم اعمال می‌شود: اگر تصویری عرض یا ارتفاع بیشتر از ۲۰۰۰ پیکسل داشته باشد، با حفظ نسبت ابعاد کوچک می‌شود تا داخل کادر ۲۰۰۰ در ۲۰۰۰ جا بگیرد. این همان مشکل رایج عکس‌های ۴۰۰۰ پیکسلی دوربین گوشی را حل می‌کند که در صفحه فقط ۸۰۰ پیکسل نمایش داده می‌شوند. تصاویر کوچک‌تر از این سقف بزرگ نمی‌شوند.

نکتهٔ مهم این است که نسخهٔ بهینه‌شده روی لبه ذخیره نمی‌شود. هر درخواست تصویر یک بار از سرویس بهینه‌ساز عبور می‌کند و آن سرویس هر بار تصویر اصلی را از سرور شما می‌خواند. بنابراین این قابلیت حجم دریافتی بازدیدکننده را کم می‌کند، نه تعداد درخواست‌هایی را که به سرور شما می‌رسد.

بیشترین اثر را جایی می‌بینید که تصاویر را افرادی غیرفنی آپلود می‌کنند و کسی وقت ندارد تک‌تک آن‌ها را فشرده کند. چند نمونهٔ واقعی:

پیش‌نیاز این است که دامنهٔ شما روی DNS ایران‌کلاد باشد و برای رکوردی که سایت روی آن است، پروکسی لبه روشن باشد. اگر هنوز دامنه را منتقل نکرده‌اید، ابتدا نام‌سرورها را تغییر دهید و با ابزار بررسی DNS مطمئن شوید رکوردها درست پاسخ می‌دهند.

برای خود قابلیت بهینه‌سازی تصاویر هیچ مبلغ ماهانه یا جداگانه‌ای محاسبه نمی‌شود. آنچه پرداخت می‌کنید مصرف لبه است که مثل بقیهٔ قابلیت‌های CDN به‌صورت ماهانه و به‌اندازهٔ مصرف از کیف پول کسر می‌شود. چون تصاویر سبک‌تر حجم ترافیک خروجی را کم می‌کنند و ترافیک خروجی اصلاً هزینه ندارد، روشن کردن این قابلیت قبض شما را بالا نمی‌برد.

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

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

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

گواهی SSL دامنه روی لبه به‌طور خودکار صادر و تمدید می‌شود و تصاویر از همان آدرس HTTPS سایت تحویل داده می‌شوند؛ وضعیت گواهی را با ابزار تست SSL بررسی کنید. برای حفاظت از صفحه‌ها، فرم‌ها و API سایت، فایروال برنامهٔ وب و محافظت در برابر ربات و در صورت نیاز محدودیت جغرافیایی را هم برای همان دامنه تنظیم کنید.

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

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

بازگشت هم ساده است: با خاموش کردن کلید بهینه‌سازی، از درخواست بعدی تصاویر اصلی تحویل داده می‌شوند. هیچ آدرسی در پایگاه‌دادهٔ سایت تغییر نکرده که بخواهید برگردانید و هیچ فایل WebP اضافه‌ای روی دیسک نمانده که پاکش کنید.

اگر الان از افزونه‌ای استفاده می‌کنید که آدرس تصاویر را به نسخهٔ WebP بازنویسی می‌کند، قبل از روشن کردن بهینه‌سازی لبه بهتر است بازنویسی آدرس را در افزونه خاموش کنید. لبه فقط آدرس‌هایی را تبدیل می‌کند که به jpg‏، jpeg‏، png یا gif ختم شوند؛ اگر افزونه آن‌ها را به webp تغییر دهد، تصویر بدون تبدیل عبور می‌کند و دو سیستم با هم تداخل پیدا می‌کنند.

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

برای اینکه انتظار درستی داشته باشید، محدودیت‌ها را صریح می‌نویسیم. نسخه‌های بهینه‌شده در حال حاضر روی لبه ذخیره نمی‌شوند و هر درخواست تصویر به سرور شما می‌رسد؛ اگر کاهش بار سرور هدف اصلی شماست، روی سرور مبدأ هدر Cache-Control مناسب برای تصاویر تنظیم کنید تا مرورگرها آن‌ها را نگه دارند. کیفیت فشرده‌سازی برای هر دامنه قابل تنظیم نیست و سقف ابعاد ثابت ۲۰۰۰ پیکسل است.

پارامتر آدرس برای ساخت اندازه‌های مختلف، برش (crop) یا واترمارک وجود ندارد و فقط چهار پسوند jpg‏، jpeg‏، png و gif پردازش می‌شوند. اگر به این امکانات نیاز دارید، فعلاً باید آن‌ها را در سمت سایت خودتان بسازید. آمار جداگانهٔ «حجم صرفه‌جویی‌شده» هم نمایش داده نمی‌شود؛ تحلیل ترافیک CDN تعداد درخواست و حجم کل را نشان می‌دهد.