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

Jeremy Wagner

Katie Hempenius

Barry Pollard

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

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

CDN تصویر چیست؟

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

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

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

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

اصل و نسب

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

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

تصویر

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
• API اطلاعات شبکه

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

انواع CDN تصویر

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

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

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

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

CDNهای تصویر شخص ثالث

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

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

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

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

اثرات روی بزرگترین رنگ محتوایی (LCP)

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

1. تصاویر ارائه شده از CDN ها ممکن است از یک سرور متقاطع باشند که مستلزم زمان راه اندازی اتصال اضافی است. در صورت امکان، سعی کنید از یک CDN تصویر استفاده کنید که از طریق مبدا اصلی پراکسی می شود تا مبداهای اضافی برای اتصال مرورگر اضافه نکنید. این همان تأثیری را دارد که تصاویر خود میزبانی روی مبدا اصلی دارند.
2. استفاده از مقدار مشخصه fetchpriority "high" را در عنصر تصویر LCP در نظر بگیرید تا مرورگر بتواند در اسرع وقت بارگذاری آن تصویر را آغاز کند.
3. اگر یک تصویر بلافاصله در HTML اولیه قابل کشف نیست، از یک اشاره rel=preload برای تصویر کاندید LCP خود استفاده کنید تا مرورگر بتواند آن تصویر را زودتر از موعد بارگذاری کند.
4. اگر پروکسی از طریق مبدا شما امکان پذیر نیست و تصویر دقیقی که باید بارگذاری شود تا زمانی که در زمان بارگذاری صفحه مشخص نمی شود، باید هرچه زودتر یک اتصال به CDN تصویر متقاطع راه اندازی کنید تا مرحله بارگیری منبع کوتاه شود. تصویر نامزد LCP صفحه شما چه چیزی می تواند باشد.

CDN های تصویر ابزارهای ضروری هستند که زحمت بهینه سازی دستی تصاویر را از بین می برند و باید مورد توجه قرار گیرند. با این حال، مثل همیشه، معاوضه‌هایی وجود دارد که باید در نظر بگیرید، و توجه به تصاویر کاندید LCP وب‌سایت‌تان و اضافه کردن نکات در صورت لزوم، می‌تواند هرگونه تأخیر اضافه‌شده به آن درخواست‌های کلیدی را کاهش دهد.