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

CDN تصاویر یکی از صحیح‌ترین و بهینه‌ترین روش‌های ارائه تصاویر در وب است که علاوه بر افزایش سرعت بارگذاری سایت، می‌تواند امکانات بسیار زیادی برای ایجاد تغییرات آنی و کم‌هزینه در تصاویر به شما ارائه دهد.

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

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

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

CDN تصویر چیست؟

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

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

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

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

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

مبدا

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

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

تصویر

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

 https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.

این URL تصویر موجود در https://flowers.com/daisy.jpg را بازیابی و بهینه می کند.

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

کلید امنیتی

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

تغییرات

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

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

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

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

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

انواع CDN تصویر

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

CDN تصویر خود مدیریت شده

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

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

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

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

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

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

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