شبکه‌های توزیع محتوای (CDN) تصویر برای بهینه‌سازی تصویرها برای وب عالی هستند. تغییر وب‌سایت به CDN تصویر می‌تواند ۴۰ تا ۸۰ درصد صرفه‌جویی در اندازه فایل تصویر به‌همراه داشته باشد، و در بیشتر موارد، آن‌ها می‌توانند تصاویر شما را بهتر از یک اسکریپت بهینه‌سازی تصویر زمان ساخت بهینه کنند.
شبکه توزیع محتوای تصویر چیست؟
شبکه‌های توزیع محتوای تصویر در تبدیل، بهینه‌سازی، و ارائه تصاویر تخصص دارند. همچنین می‌توانید آن‌ها را به‌عنوان میاناهای برنامه‌سازی کاربردی برای دسترسی و دستکاری تصاویر استفاده‌شده در سایتتان درنظر بگیرید. برای تصاویری که از CDN تصویر بارگیری می‌شوند، نشانی وب تصویر نه‌تنها نشان می‌دهد که کدام تصویر باید بارگیری شود، بلکه پارامترهایی مانند اندازه، قالب، و کیفیت را نیز مشخص می‌کند. این ویژگی به شما امکان می‌دهد گونه‌های مختلفی از یک تصویر را برای موارد استفاده مختلف ایجاد کنید.
شبکه‌های توزیع محتوای تصویر با دستورگان‌های بهینه‌سازی تصویر زمان ساخت متفاوت هستند زیرا نسخه‌های جدیدی از تصاویر را درصورت نیاز ایجاد می‌کنند. درنتیجه، شبکه‌های توزیع محتوا معمولاً برای ایجاد تصاویری که به‌شدت برای مشتریان منفرد سفارشی‌سازی شده‌اند، نسبت‌به اسکریپت‌های ساخت مناسب‌تر هستند.
نحوه استفاده CDNهای تصویر از نشانی‌های وب برای نشان دادن گزینه‌های بهینه‌سازی
نشانی‌های وب تصویر که توسط CDNهای تصویر استفاده می‌شوند، اطلاعات مهمی را درباره تصویر و تبدیل‌ها و بهینه‌سازی‌هایی که باید روی آن اعمال شود، منتقل می‌کنند. قالب‌های نشانی وب بسته به CDN تصویری که استفاده می‌کنید متفاوت است، اما در سطح بالا، همه آن‌ها ویژگی‌های مشابهی دارند. در اینجا برخی‌از رایج‌ترین ویژگی‌ها آورده شده است.
مبدأ
CDN تصویر می‌تواند در دامنه خودتان یا دامنه CDN تصویرتان قرار داشته باشد. شبکه‌های توزیع محتوای تصویر شخص ثالث معمولاً گزینه استفاده از دامنه سفارشی را درازای پرداخت هزینه ارائه می‌دهند. استفاده از دامنه خودتان باعث می‌شود که بعداً راحت‌تر بتوانید CDN تصویر را تغییر دهید زیرا نیازی به تغییر نشانی وب نخواهد بود.
مثال قبلی از دامنه CDN تصویر («example-cdn.com») با یک زیردامنه شخصی‌سازی‌شده به‌جای دامنه سفارشی استفاده می‌کند.
تصویر
معمولاً می‌توان CDNهای تصویر را طوری پیکربندی کرد که درصورت نیاز، تصاویر را به‌طور خودکار از مکان‌های موجودشان بازیابی کنند. این قابلیت اغلب با گنجاندن نشانی وب کامل تصویر موجود در نشانی وب تصویر تولیدشده توسط CDN تصویر به‌دست می‌آید. برای مثال، ممکن است نشانی وبی را ببینید که شبیه این است: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
این نشانی وب تصویری را که در https://flowers.com/daisy.jpg وجود دارد بازیابی و بهینه‌سازی می‌کند.
قالب فایل درخواستی (JPG در مثال) ممکن است با قالب فایل تصویر برگردانده‌شده (WebP در مثال) یکسان نباشد. سرصفحه HTTP content-type به مرورگر می‌گوید نشانی وب در چه قالبی است تا بتواند نشانی وب را به‌درستی پردازش کند. اگر فایل در دیسک ذخیره شود و برنامه دیگری از آن استفاده کند که انتظار دارد قالب با پسوند فایل مطابقت داشته باشد، این امر می‌تواند باعث سردرگمی شود.
روش دیگری که به‌طور گسترده برای بارگذاری تصاویر در CDN تصویر پشتیبانی می‌شود، ارسال آن‌ها در درخواست HTTP POST به API مربوط به CDN تصویر است.
کلید ایمنی
کلید امنیتی مانع از این می‌شود که افراد دیگر نسخه‌های جدیدی از تصاویر شما ایجاد کنند. با فعال شدن این ویژگی، هر نسخه جدید از تصویر به کلید امنیتی یکتایی نیاز دارد.
اگر کسی سعی کند پارامترهای نشانی وب تصویر را تغییر دهد اما کلید امنیتی معتبری ارائه نکند، نمی‌تواند نسخه جدیدی ایجاد کند. CDN تصویر شما جزئیات تولید و ردیابی کلیدهای امنیتی را برای شما مدیریت می‌کند.
تبدیل‌ها
شبکه‌های توزیع محتوای تصویر ده‌ها و در برخی موارد صدها تبدیل تصویر مختلف ارائه می‌دهند. این تبدیل‌ها در رشته نشانی وب مشخص شده‌اند و هیچ محدودیتی برای استفاده هم‌زمان از چند تبدیل وجود ندارد. برای عملکرد وب، مهم‌ترین تبدیل‌های تصویر عبارت‌اند از اندازه، تراکم پیکسل، قالب، و فشرده‌سازی. این تبدیل‌ها دلیل این هستند که رفتن به CDN تصویر معمولاً فایل‌های تصویری سایت شما را کوچک‌تر می‌کند.
Because there's usually an objectively best setting for performance transformations, some image CDNs support an "auto" mode for these transformations. برای مثال، به‌جای اینکه مشخص کنید تصاویر به قالب WebP تبدیل شوند، می‌توانید به CDN اجازه دهید قالب بهینه را به‌طور خودکار انتخاب و ارائه کند. یک CDN تصویر می‌تواند بهترین راه برای تبدیل یک تصویر را تعیین کند با استفاده از سیگنال های زیر، از جمله:
- اشاره‌های کارخواه (برای مثال، پهنای نمای هدف، DPR، و پهنای تصویر)
- سرایند
Save-Data - سرایند درخواست User-Agent
- Network Information API
برای مثال، CDN تصویر ممکن است AVIF را به مرورگر Chrome، WebP را به مرورگر Edge، و JPEG را به مرورگر بسیار قدیمی ارائه دهد. تنظیمات خودکار محبوب هستند زیرا به شما اجازه می‌دهند از تخصص شبکه‌های توزیع محتوای تصویر در بهینه‌سازی تصاویر بهره‌مند شوید، بدون اینکه نیاز باشد کد خود را برای پذیرش فناوری‌های جدید تغییر دهید، زمانی که شبکه توزیع محتوای تصویر شروع به پشتیبانی از آن‌ها می‌کند.
انواع CDN تصویر
دو دسته اصلی از CDNهای تصویر وجود دارد: خودمدیریتی و مدیریت‌شده توسط شخص ثالث.
شبکه‌های توزیع محتوای تصویر خودگردان
شبکه‌های توزیع محتوای خودمدیریتی می‌توانند انتخاب خوبی برای سایت‌هایی باشند که کارکنان مهندسی آن‌ها با نگهداری زیرساخت خودشان مشکلی ندارند.
- Thumbor محبوب‌ترین CDN تصویر خودمدیریتی است. این نرم‌افزار متن‌باز و رایگان است، اما ویژگی‌های کمتری نسبت به اکثر CDNهای تجاری دارد و مستندات آن تا حدودی محدود است. سایت‌هایی که از thumbor استفاده می‌کنند عبارتند از Wikipedia، Square، و 99designs. برای دستورالعمل‌های راه‌اندازی، نحوه نصب Thumbor image CDN را ببینید.
- خیالی
- Imagor
شبکه‌های توزیع محتوای تصویر طرف سوم
شبکه‌های توزیع محتوای تصویر طرف سوم، شبکه‌های توزیع محتوای تصویر را به‌عنوان سرویس ارائه می‌دهند. همان‌طور که ارائه‌دهندگان فضای ابری سرورها و زیرساخت‌های دیگر را با دریافت هزینه ارائه می‌دهند، CDNهای تصویر بهینه‌سازی و تحویل تصویر را با دریافت هزینه ارائه می‌دهند. Because third-party image CDNs maintain the underlying technology, you can usually get started using one fairly quickly, although a complete migration for a large site might take longer. قیمت CDN تصویر شخص ثالث معمولاً براساس ردیف‌های استفاده تعیین می‌شود و اکثر CDNهای تصویر ردیف رایگان یا دوره آزمایشی رایگان ارائه می‌دهند تا بتوانید محصولشان را امتحان کنید.
انتخاب CDN تصویر
گزینه‌های خوب زیادی برای CDN تصویر وجود دارد. برخی‌از آن‌ها ویژگی‌های بیشتری نسبت به بقیه دارند، اما همه آن‌ها می‌توانند به شما کمک کنند بایت‌های تصاویرتان را ذخیره کنید و درنتیجه صفحه‌هایتان را سریع‌تر بار کنید. Besides feature sets, other factors to consider when choosing an image CDN are cost, support, documentation, and ease of setup or migration.
تأثیرات بر بزرگ‌ترین نقاشی دارای محتوا (LCP)
تصاویر بخش حیاتی تجربه کاربری در بسیاری از وب‌سایت‌ها هستند، بنابراین عامل مهمی در بزرگ‌ترین نقاشی دارای محتوا سایت محسوب می‌شوند. اگر تصمیم گرفتید از CDN تصویر استفاده کنید، چند نکته را باید به‌خاطر داشته باشید:
- تصاویری که از CDN ارائه می‌شوند می‌توانند از سرور میان‌مبدئی باشند که می‌تواند زمان راه‌اندازی اتصال سایتتان را افزایش دهد. درصورت امکان، سعی کنید از CDN تصویری استفاده کنید که ازطریق مبدأ اصلی پراکسی می‌شود تا مبدأهای اضافی برای اتصال مرورگر اضافه نکنید. این کار همان تأثیر میزبانی تصاویر توسط خودتان در مبدأ اصلی را دارد.
- استفاده از مقدار مشخصه
fetchpriority"high"را در عنصر تصویر LCP درنظر بگیرید تا مرورگر بتواند بار کردن آن تصویر را در اسرع وقت شروع کند. - اگر تصویری فوراً در HTML اولیه قابل‌کشف نیست، از
نکته
rel=preloadبرای تصویر نامزد «بزرگ‌ترین نقاشی دارای محتوا» استفاده کنید تا مرورگر بتواند آن تصویر را زودتر از موعد بار کند. - اگر نمی‌توانید ازطریق مبدأ خود پراکسی کنید و مرورگر تا مراحل بعدی بار کردن صفحه نمی‌داند کدام تصویر را باید بار کند، در اولین فرصت ممکن، اتصالی به CDN تصویر میان‌مبدئی راه‌اندازی کنید تا مرحله بار کردن منبع برای تصاویر نامزد احتمالی LCP کوتاه‌تر شود.