شبکه های تحویل محتوای تصویر (CDN) در بهینه سازی تصاویر برای وب عالی هستند. تغییر وب سایت شما به CDN تصویر می تواند 40 تا 80 درصد در اندازه فایل تصویر صرفه جویی کند و در بیشتر موارد می تواند تصاویر شما را بهتر از یک اسکریپت بهینه سازی تصویر در زمان ساخت بهینه کند.
CDN های تصویر در تبدیل، بهینه سازی و ارائه تصاویر تخصص دارند. همچنین می توانید آنها را به عنوان APIهایی برای دسترسی و دستکاری تصاویر استفاده شده در سایت خود در نظر بگیرید. برای تصاویر بارگیری شده از یک CDN تصویر، URL تصویر نه تنها نشان می دهد که کدام تصویر باید بارگیری شود، بلکه پارامترهایی مانند اندازه، فرمت و کیفیت را نیز نشان می دهد. این به شما امکان می دهد تغییراتی از یک تصویر را برای موارد استفاده مختلف ایجاد کنید.
CDN های تصویر با اسکریپت های بهینه سازی تصویر در زمان ساخت متفاوت هستند زیرا نسخه های جدیدی از تصاویر را در صورت نیاز ایجاد می کنند. در نتیجه، CDN ها معمولاً برای ایجاد تصاویری که به شدت برای مشتریان شخصی سفارشی شده اند، بهتر از ساخت اسکریپت ها مناسب هستند.
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 را بازیابی و بهینه سازی می کند.
قالب فایل درخواستی (JPG، در مثال) ممکن است با فرمت فایل تصویری بازگردانده شده یکسان نباشد (WebP، در مثال). هدر HTTP content-type به مرورگر می گوید که URL در کدام قالب است تا بتواند URL را به درستی پردازش کند. اگر فایل در دیسک ذخیره شود و توسط برنامه دیگری استفاده شود که انتظار دارد فرمت با پسوند فایل مطابقت داشته باشد، این می تواند باعث سردرگمی شود.
یکی دیگر از راه های پشتیبانی گسترده برای آپلود تصاویر در یک 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 های خود مدیریت می توانند انتخاب خوبی برای سایت هایی با کارکنان مهندسی باشند که از حفظ زیرساخت های خود راحت هستند.
- Thumbor محبوب ترین CDN تصویر خود مدیریت است. این منبع باز و رایگان برای استفاده است، اما ویژگی های کمتری نسبت به اکثر CDN های تجاری دارد و مستندات آن تا حدودی محدود است. سایت هایی که از thumbor استفاده می کنند عبارتند از Wikipedia , Square , و 99designs . نحوه نصب Thumbor image CDN را برای دستورالعمل‌های مربوط به تنظیم آن ببینید.
- خیالی
- تصویرگر
CDN های تصویر شخص ثالث CDN های تصویر را به عنوان یک سرویس ارائه می دهند. همانطور که ارائه دهندگان ابری سرورها و سایر زیرساخت ها را با پرداخت هزینه ارائه می کنند، CDN های تصویر نیز بهینه سازی و تحویل تصویر را با هزینه ای ارائه می دهند. از آنجایی که CDN های تصویر شخص ثالث فناوری اساسی را حفظ می کنند، معمولاً می توانید نسبتاً سریع استفاده از آن را شروع کنید، اگرچه انتقال کامل برای یک سایت بزرگ ممکن است بیشتر طول بکشد. CDN های تصویر شخص ثالث معمولاً بر اساس سطوح استفاده قیمت گذاری می شوند، اکثر CDN های تصویر یک سطح رایگان یا آزمایشی رایگان ارائه می دهند تا به شما امکان می دهند محصول خود را امتحان کنید.
گزینه های خوبی برای CDN های تصویری وجود دارد. برخی از آنها ویژگی های بیشتری نسبت به بقیه دارند، اما هر یک از آنها می تواند به شما کمک کند تا بایت ها را در تصاویر خود ذخیره کنید و بنابراین صفحات خود را سریعتر بارگذاری کنید. علاوه بر مجموعه ویژگی‌ها، فاکتورهای دیگری که باید در هنگام انتخاب CDN تصویر در نظر گرفته شوند عبارتند از هزینه، پشتیبانی، مستندات و سهولت راه‌اندازی یا مهاجرت.
تصاویر بخش مهمی از تجربه کاربر در بسیاری از وب‌سایت‌ها هستند، بنابراین آنها عامل مهمی در بزرگترین رنگ محتوای یک سایت هستند. اگر تصمیم دارید از CDN تصویر استفاده کنید، چند نکته را باید در نظر داشته باشید:
- تصاویر ارائه شده از CDN ها می توانند از یک سرور متقاطع باشند که می تواند زمان راه اندازی اتصال سایت شما را افزایش دهد. در صورت امکان، سعی کنید از یک CDN تصویر استفاده کنید که از طریق مبدا اصلی پراکسی می شود تا مبداهای اضافی برای اتصال مرورگر اضافه نکنید. این همان تأثیری را دارد که تصاویر خود میزبانی روی مبدا اصلی دارند.
- استفاده از مقدار مشخصه
fetchpriority"high"را در عنصر تصویر LCP در نظر بگیرید تا مرورگر بتواند در اسرع وقت بارگذاری آن تصویر را آغاز کند. - اگر تصویری بلافاصله در HTML اولیه قابل کشف نیست، از یک راهنمایی
rel=preloadبرای تصویر کاندید LCP خود استفاده کنید تا مرورگر بتواند آن تصویر را زودتر از موعد بارگیری کند. - اگر نمی‌توانید از طریق مبدا خود پروکسی کنید و مرورگر نمی‌داند کدام تصویر را تا زمانی که بارگذاری صفحه بارگذاری کند، در اسرع وقت یک اتصال به CDN تصویر متقاطع راه‌اندازی کنید تا مرحله بارگیری منبع را کوتاه کنید. تصاویر کاندید LCP بالقوه