بهینهسازی تصاویر برای محتوای تولیدشده توسط هوش مصنوعی
تصاویر هوش مصنوعی یک مشکل عملکردی منحصربهفرد ایجاد میکنند. شما تا زمانی که فرآیند تولید تمام نشود، از اندازه، فرمت یا محتوای تصویر اطلاعی ندارید. با این حال، همچنان باید از بارگذاری کند و جابهجایی چیدمان (layout shifts) جلوگیری کنید.
من هنگام ساخت یک ابزار رایگان تولید تصویر با هوش مصنوعی، از این مراحل استفاده کردم.
بهینهسازی استاندارد بر این فرض استوار است که شما از قبل تصویر را میشناسید. در این حالت میتوانید ابعاد را محاسبه کرده و در زمان ساخت (build time) بهینهسازی را انجام دهید. اما تصاویر تولیدشده این قاعده را نقض میکنند؛ زیرا تصویر تا زمانی که کاربر آن را درخواست نکند، وجود خارجی ندارد.
نحوه مدیریت تحویل (delivery):
- خروجی خام هوش مصنوعی معمولاً PNG است. فایلهای PNG بسیار حجیم هستند و اغلب بین ۸۰۰ کیلوبایت تا ۱.۲ مگابایت حجم دارند.
- تصاویر را به WebP تبدیل کنید. فایلهای WebP در کیفیت یکسان، ۲۵ تا ۳۵ درصد کوچکتر از PNG هستند.
- برای WebP از کیفیت ۸۵ استفاده کنید. تصاویر هوش مصنوعی دارای نویز بافت طبیعی هستند. تنظیمات بالاتر بدون بهبود کیفیت بصری، فقط باعث افزایش حجم فایل میشود.
چگونه از جابهجایی چیدمان (layout shifts) جلوگیری کنیم:
کاربران قبل از کلیک روی دکمه تولید، نسبت ابعاد (aspect ratio) را انتخاب میکنند. از این موضوع به نفع خود استفاده کنید.
- اندازه کانتینر را بر اساس نسبت انتخابشده (۱:۱، ۱۶:۹ و غیره) از قبل تعیین کنید.
- این کار باعث میشود کانتینر قبل از رسیدن تصویر، در اندازه صحیح باقی بماند.
- این کار باعث حذف جابهجایی چیدمان تجمعی (CLS) میشود.
چگونه سرعت بارگذاری را بهبود بخشیم:
تصویر تولیدشده معمولاً المان اصلی در Largest Contentful Paint (LCP) است.
- در کد خود، تصویر را به عنوان یک اولویت (priority) علامتگذاری کنید.
- از یک لینک
preconnectبرای CDN خود استفاده کنید. این کار باعث میشود فرآیندهای DNS و TLS handshakes زودتر انجام شوند. - از یک اسکلتون لودر (skeleton loader) استفاده کنید که دقیقاً همان فضایی را اشغال کند که تصویر نهایی قرار است پر کند.
استراتژی کشینگ (Caching):
- در لایه استنتاج (inference layer) کشینگ انجام ندهید. هر درخواست باید تازه و جدید به نظر برسد.
- برای سرعت تحویل، در لایه CDN کشینگ انجام دهید.
- هر تصویر دارای یک URL منحصربهفرد است، بنابراین کشینگ تهاجمی (aggressive caching) ایمن است.
نتایج این تغییرات:
- میانگین حجم: ۹۰۰ کیلوبایت به ۲۰۰ کیلوبایت.
- LCP: ۴.۱ ثانیه به ۱.۹ ثانیه.
- CLS: حذف شد.
خلاصه اقدامات:
- تبدیل به WebP با کیفیت ۸۵.
- تعیین از پیش اندازه کانتینرها با استفاده از نسبت ابعاد انتخابشده.
- تنظیم تصویر اصلی برای بارگذاری با اولویت بالا.
- کشینگ گسترده در سطح CDN.
- استفاده از بارگذاری تنبل (lazy loading) فقط برای محتوای ثانویه در بخشهای پایینتر صفحه (below the fold).
Optional learning community: https://t.me/GyaanSetuAi