استفاده از CDN تصویر برای بهبود تصاویر و سرعت سایت – بعدی

آنچه در این مقاله خواهیم خواند

چرا از تصاویر CDN استفاده کنیم؟

شبکه های تحویل محتوای تصویر (CDN) یکی از بهترین گزینه های ممکن برای بهینه سازی تصویر هستند. استفاده از CDN برای تصاویر می تواند 40 تا 80 درصد حجم فایل تصویر را ذخیره کند. در تئوری و روی کاغذ، دستیابی به چنین نتایجی تنها با استفاده از اسکریپت های کامپایل امکان پذیر است، اما در عمل بسیار نادر و تقریبا غیرممکن است.

CDN تصویر چیست؟

CDN های تصویر در تبدیل، بهینه سازی و ارائه تصاویر تخصص دارند. همچنین می توانید از آنها به عنوان یک API برای دسترسی و ویرایش تصاویر استفاده کنید. برای تصاویر دانلود شده از یک CDN تصویر، URL تصویر نه تنها مسیر و نام تصویر را نشان می دهد، بلکه پارامترهایی مانند اندازه، فرمت و کیفیت را نیز نشان می دهد.

استفاده از این روش در هنگام بازیابی تصاویر، ایجاد تغییرات در یک تصویر برای اهداف مختلف را آسان می کند. به عنوان مثال، در مواردی که قصد دارید از تصاویر واکنش گرا در صفحه خود استفاده کنید، به جای ذخیره چندین تصویر مختلف با حالت ها و اندازه های مختلف، فقط باید تغییرات مورد نظر را در آدرس تصویر درخواست کنید تا CDN تصویر به طور خودکار تصویر مورد نظر را ایجاد کند. برای تو . به آرامی

CDN های تصویر با اسکریپت های بهینه سازی تصویر در زمان ساخت تفاوت دارند زیرا در صورت نیاز نسخه های جدیدی از تصاویر را ایجاد می کنند. در نتیجه، CDN ها به طور کلی برای ایجاد تصاویری که برای هر مشتری بسیار سفارشی شده اند، مناسب تر هستند.

چگونه CDN های تصویر از URL ها برای نمایش گزینه های بهینه سازی استفاده می کنند؟

URL های تصویری که توسط CDN های تصویر استفاده می شوند، اطلاعات مهمی را در مورد یک تصویر، تبدیل ها و بهینه سازی هایی که باید روی آن اعمال شوند، منتقل می کنند. قالب های URL بسته به CDN تصویر متفاوت خواهد بود، اما در سطح بالایی همه آنها ویژگی های یکسانی دارند. بیایید برخی از رایج ترین ویژگی ها را مرور کنیم.

اصل و نسب

CDN تصویر می تواند در دامنه خود ارائه دهنده یا دامنه شما قرار گیرد. CDN های تصویر شخص ثالث معمولاً گزینه ای را برای استفاده از یک دامنه سفارشی با هزینه ارائه می دهند. استفاده از دامنه خود تغییر CDN تصویر را در آینده آسان می کند زیرا نیازی به تغییر URL ندارید.

در مثال بالا، CDN تصویر وب سایت فرضی است ("example-cdn.com") از یک زیر دامنه سفارشی به نام است my-site به جای آن از یک دامنه کاربری استفاده می کند.

تصویر

CDN های تصویر را می توان برای دریافت خودکار تصاویر از مکان های موجود در صورت نیاز پیکربندی کرد. این قابلیت اغلب با گنجاندن URL کامل تصویر در URL تصویر تولید شده توسط CDN تصویر به دست می آید. به عنوان مثال، ممکن است URL را مشاهده کنید که به شکل زیر است:

 

این URL تصویر در دسترس است بازیابی و بهینه سازی می کند

یکی دیگر از راه های پشتیبانی گسترده برای آپلود تصاویر در Image CDN ارسال آنها از طریق یک درخواست HTTP POST به Image CDN API است.

کلید امنیتی

کلید امنیتی از ایجاد نسخه های جدید از تصاویر شما توسط افراد دیگر جلوگیری می کند. اگر این ویژگی فعال باشد، هر نسخه جدید از یک تصویر به یک کلید امنیتی منحصر به فرد نیاز دارد. اگر شخصی سعی کند پارامترهای URL تصویر را تغییر دهد اما یک کلید امنیتی معتبر ارائه ندهد، نمی‌تواند نسخه جدیدی ایجاد کند. تصویر CDN شما از جزئیات تولید و ردیابی کلیدهای امنیتی برای شما مراقبت می کند.

تغییرات

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

مهم ترین دلیل موثرتر CDN نسبت به سایر روش های بهینه سازی، تغییرات آنی و ارزان است.

برخی از CDN های تصویر از حالت “خودکار” برای این تبدیل ها پشتیبانی می کنند. به عنوان مثال، به جای تعیین اینکه تصاویر باید به فرمت WebP تبدیل شوند، می توانید به CDN اجازه دهید به طور خودکار فرمت بهینه را انتخاب و ارائه کند. سیگنال هایی که CDN تصویر می تواند برای تعیین بهترین راه برای تبدیل یک تصویر استفاده کند عبارتند از:

• ویژگی های دستگاه مشتری (مانند نسبت ابعاد نمایش، DPR، و عرض تصویر).
• از هدرها استفاده کنید Save-Data در دستگاه مشتری
• سربرگ درخواست عامل کاربر
• اطلاعات شبکه کاربر

به عنوان مثال، یک CDN می تواند JPEG XR را در مرورگر Edge، WebP را به مرورگر کروم و JPEG را به یک مرورگر بسیار قدیمی ارائه دهد. تنظیمات خودکار به شما این امکان را می دهد که از تجربه قابل توجه CDN تصویر در بهینه سازی تصویر بدون نیاز به تغییر کد برای استفاده از فناوری های جدید پس از پشتیبانی از CDN تصویر استفاده کنید.

انواع CDN تصویر

CDN های تصویر را می توان به دو دسته تقسیم کرد: خود مدیریتی و شخص ثالث.

CDN برای تصویر خود مدیریت

CDN های خود مدیریت می توانند انتخاب خوبی برای سایت هایی باشند که سفارشی سازی و کدنویسی آنها آسان است.

Thumbor تقریباً تنها CDN تصویر مستقلی است که امروزه در دسترس است. اگرچه Thumbor منبع باز و رایگان است، اما ویژگی های کمتری نسبت به اکثر CDN های تجاری دارد و مستندات آن تا حدودی محدود است. Wikipedia، Square و 99designs سه سایتی هستند که از Thumbor استفاده می کنند.

CDN تصویر شخص ثالث (تجاری)

زیرا ارائه دهندگان سرورهای ابری زیرساخت هایی را با هزینه ای فراهم می کنند. CDN های تصویر همچنین بهینه سازی و تغییرات تصویر را با پرداخت هزینه ارائه می دهند. شروع کار با این ابزارها نسبتاً آسان است و معمولاً در 10-15 دقیقه انجام می شود، اگرچه انتقال کامل برای یک سایت بزرگ می تواند بسیار بیشتر طول بکشد. CDN های تصویر شخص ثالث معمولاً بر اساس سطوح استفاده قیمت گذاری می شوند و یک سطح رایگان یا آزمایشی ارائه می دهند تا به شما فرصتی برای آزمایش یا استفاده در سایت های کوچک بدهد.

CDN تصویر را انتخاب کنید

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

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