تُعدّ شبكات توصيل المحتوى (CDN) للصور ممتازة في تحسين الصور للويب. يمكن أن يؤدي تبديل موقعك الإلكتروني إلى شبكة توصيل محتوى (CDN) للصور إلى توفير بنسبة %40 إلى %80 في حجم ملفات الصور، وفي معظم الحالات، يمكن لهذه الشبكات تحسين صورك بشكل أفضل من نص برمجي لتحسين الصور في وقت الإنشاء.
ما هي شبكة توصيل المحتوى (CDN) للصور؟
تتخصّص شبكات توصيل المحتوى للصور في تحويل الصور وتحسينها وعرضها. ويمكنك أيضًا اعتبارها واجهات برمجة تطبيقات للوصول إلى الصور المستخدَمة على موقعك الإلكتروني ومعالجتها. بالنسبة إلى الصور التي يتم تحميلها من شبكة توصيل محتوى (CDN) للصور، يشير عنوان URL للصورة إلى الصورة التي يجب تحميلها، بالإضافة إلى مَعلمات مثل الحجم والتنسيق والجودة. يتيح لك ذلك إنشاء نُسخ مختلفة من صورة لحالات استخدام مختلفة.
تختلف شبكات توصيل المحتوى (CDN) للصور عن نصوص تحسين الصور البرمجية في وقت الإنشاء من حيث إنّها تنشئ إصدارات جديدة من الصور حسب الحاجة. ونتيجة لذلك، فإن شبكات توصيل المحتوى (CDN) تكون بشكل عام أكثر ملاءمة لإنشاء صور مخصصة بشكل كبير للعملاء الأفراد من البرامج النصية للبناء.
كيفية استخدام شبكات توصيل المحتوى (CDN) للصور لعناوين URL للإشارة إلى خيارات التحسين
تنقل عناوين URL للصور التي تستخدمها شبكات توصيل المحتوى (CDN) للصور معلومات مهمة حول الصورة والتحويلات والتحسينات التي يجب تطبيقها عليها. تختلف تنسيقات عناوين URL حسب شبكة توصيل المحتوى (CDN) للصور التي تستخدمها، ولكنها تتضمّن جميعًا ميزات متشابهة على مستوى عالٍ. في ما يلي بعض الميزات الأكثر شيوعًا.
الأصل
يمكن أن تكون شبكة توصيل المحتوى للصور على نطاقك الخاص أو على نطاق شبكة توصيل المحتوى للصور. عادةً ما توفّر شبكات توصيل المحتوى (CDN) للصور التابعة لجهات خارجية خيار استخدام نطاق خاص مقابل رسوم. يؤدي استخدام نطاقك الخاص إلى تسهيل عملية التبديل بين شبكات توصيل المحتوى للصور لاحقًا، لأنّه لن تكون هناك حاجة إلى إجراء أي تغييرات على عناوين URL.
يستخدم المثال السابق نطاق شبكة توصيل المحتوى للصور ("example-cdn.com") مع نطاق فرعي مخصّص، بدلاً من نطاق خاص.
صورة
يمكن عادةً ضبط شبكات توصيل المحتوى للصور لاسترداد الصور تلقائيًا من مواقعها الحالية عند الحاجة إليها. ويتم تحقيق هذه الإمكانية غالبًا من خلال تضمين عنوان URL الكامل للصورة الحالية ضمن عنوان URL للصورة التي تم إنشاؤها بواسطة شبكة توصيل المحتوى (CDN) للصور. على سبيل المثال، قد يظهر لك عنوان URL على النحو التالي: 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 ليتمكّن من معالجته بشكل صحيح. قد يؤدي ذلك إلى حدوث التباس إذا تم حفظ الملف على القرص واستخدامه من قِبل برنامج آخر يتوقع أن يتطابق التنسيق مع امتداد الملف.
هناك طريقة أخرى متوافقة على نطاق واسع لتحميل الصور إلى شبكة توصيل محتوى الصور، وهي إرسالها في طلب POST عبر HTTP إلى واجهة برمجة التطبيقات لشبكة توصيل محتوى الصور.
مفتاح الأمان
يمنع مفتاح الأمان المستخدمين الآخرين من إنشاء نُسخ جديدة من صورك. عند تفعيل هذه الميزة، يتطلّب كل إصدار جديد من الصورة مفتاح أمان فريدًا.
إذا حاول أحد المستخدمين تغيير مَعلمات عنوان URL للصورة ولكنّه لم يقدّم مفتاح أمان صالحًا، لن يتمكّن من إنشاء نسخة جديدة. تتولّى شبكة توصيل المحتوى (CDN) للصور الاهتمام بتفاصيل إنشاء مفاتيح الأمان وتتبُّعها نيابةً عنك.
عمليات التحويل
تقدّم شبكات توصيل المحتوى (CDN) للصور عشرات، وفي بعض الحالات مئات، من عمليات تحويل الصور المختلفة. يتم تحديد هذه التحويلات في سلسلة عنوان URL، ولا توجد قيود على استخدام تحويلات متعددة في الوقت نفسه. بالنسبة إلى أداء الويب، فإنّ أهم عمليات تحويل الصور هي الحجم وكثافة البكسل والتنسيق والضغط. هذه التحويلات هي السبب في أنّ التبديل إلى شبكة توصيل محتوى (CDN) للصور يؤدي عادةً إلى تصغير حجم ملفات الصور في موقعك الإلكتروني.
بما أنّه عادةً ما يكون هناك إعداد أفضل من الناحية الموضوعية لعمليات تحويل الأداء، تتيح بعض شبكات توصيل المحتوى (CDN) للصور وضع "تلقائي" لعمليات التحويل هذه. على سبيل المثال، بدلاً من تحديد أن يتم تحويل الصور إلى تنسيق WebP، يمكنك السماح لشبكة توصيل المحتوى باختيار التنسيق الأمثل وعرضه تلقائيًا. يمكن لشبكة توصيل المحتوى (CDN) للصور تحديد أفضل طريقة لتحويل الصورة باستخدام الإشارات التالية، من بين إشارات أخرى:
- حقول معلومات العميل (مثل عرض إطار العرض ونسبة بكسل الجهاز وعرض الصورة)
- العنوان
Save-Data - عنوان طلب وكيل المستخدم
- واجهة Network Information API
على سبيل المثال، قد تعرض شبكة توصيل المحتوى (CDN) للصور تنسيق AVIF لمتصفّح Chrome، وتنسيق WebP لمتصفّح Edge، وتنسيق JPEG لمتصفّح قديم جدًا. تحظى الإعدادات التلقائية بشعبية كبيرة لأنّها تتيح لك الاستفادة من خبرة شبكات توصيل المحتوى (CDN) للصور في تحسين الصور بدون الحاجة إلى تغيير الرمز البرمجي لاعتماد تقنيات جديدة عندما تبدأ شبكة توصيل المحتوى (CDN) للصور في إتاحتها.
أنواع شبكات CDN للصور
هناك فئتان رئيسيتان من شبكات توصيل المحتوى للصور: المُدارة ذاتيًا والمُدارة من قِبل جهات خارجية.
شبكات توصيل محتوى الصور المُدارة ذاتيًا
يمكن أن تكون شبكات توصيل المحتوى المُدارة ذاتيًا خيارًا جيدًا للمواقع الإلكترونية التي تضم موظفين هندسيين يمكنهم صيانة البنية الأساسية الخاصة بهم.
- Thumbor هي شبكة توصيل المحتوى (CDN) الأكثر رواجًا للصور المُدارة ذاتيًا. وهي شبكة مفتوحة المصدر ومجانية الاستخدام، ولكنّها تتضمّن ميزات أقل من معظم شبكات CDN التجارية، كما أنّ مستنداتها محدودة إلى حدّ ما. تشمل المواقع الإلكترونية التي تستخدم thumbor كلاً من Wikipedia وSquare و99designs. يمكنك الاطّلاع على كيفية تثبيت شبكة توصيل المحتوى (CDN) للصور في Thumbor للحصول على تعليمات حول إعدادها.
- Imaginary
- Imagor
شبكات توصيل المحتوى (CDN) للصور التابعة لجهات خارجية
وتوفّر شبكات توصيل المحتوى (CDN) للصور التابعة لجهات خارجية شبكات توصيل المحتوى (CDN) للصور كخدمة. بالطريقة نفسها التي يوفّر بها مقدّمو خدمات السحابة الإلكترونية الخوادم والبنية الأساسية الأخرى مقابل رسوم، توفّر شبكات توصيل المحتوى (CDN) للصور تحسين الصور وعرضها مقابل رسوم. بما أنّ شبكات توصيل المحتوى (CDN) التابعة لجهات خارجية تحتفظ بالتكنولوجيا الأساسية، يمكنك عادةً البدء في استخدام إحداها بسرعة إلى حدّ ما، مع أنّ عملية نقل البيانات الكاملة لموقع إلكتروني كبير قد تستغرق وقتًا أطول. يتم عادةً تحديد أسعار شبكات توصيل المحتوى (CDN) للصور التابعة لجهات خارجية استنادًا إلى مستويات الاستخدام، مع توفير معظم شبكات توصيل المحتوى (CDN) للصور إما مستوى مجانيًا أو فترة تجريبية مجانية للسماح لك بتجربة منتجاتها.
اختيار شبكة توصيل محتوى للصور
هناك العديد من الخيارات الجيدة لشبكات CDN للصور. يحتوي بعضها على ميزات أكثر من غيرها، ولكن يمكن لأي منها مساعدتك في توفير وحدات البايت على صورك وبالتالي تحميل صفحاتك بشكل أسرع. بالإضافة إلى مجموعة الخصائص، هناك عوامل أخرى يجب مراعاتها عند اختيار شبكة توصيل المحتوى (CDN) للصور، وهي التكلفة والدعم والوثائق وسهولة الإعداد أو نقل البيانات.
التأثيرات في سرعة عرض أكبر محتوى مرئي (LCP)
تُعدّ الصور جزءًا حيويًا من تجربة المستخدم على العديد من المواقع الإلكترونية، لذا فهي عامل مهم في سرعة عرض أكبر محتوى مرئي على الموقع الإلكتروني. في ما يلي بعض الأمور التي يجب وضعها في الاعتبار إذا قررت استخدام شبكة توصيل محتوى للصور:
- يمكن أن تأتي الصور المعروضة من شبكات توصيل المحتوى من خادم متعدّد المصادر، ما قد يؤدي إلى زيادة وقت إعداد الاتصال بموقعك الإلكتروني. عند الإمكان، حاوِل استخدام شبكة توصيل محتوى (CDN) للصور تعمل كخادم وكيل من خلال المصدر الأساسي لكي لا تضيف مصادر إضافية ليتصل بها المتصفّح. ويكون لذلك التأثير نفسه الذي تتركه استضافة الصور على المصدر الأساسي.
- ننصحك باستخدام قيمة السمة
fetchpriorityعلى أنّها"high"في عنصر صورة LCP ليتمكّن المتصفّح من بدء تحميل تلك الصورة في أقرب وقت ممكن. - إذا لم تكن الصورة قابلة للاكتشاف على الفور في رمز HTML الأولي، ننصحك باستخدام تلميح
rel=preloadللصورة المرشّحة لتكون أكبر محتوى مرئي كي يتمكّن المتصفّح من تحميلها مسبقًا. - إذا لم تتمكّن من استخدام الخادم الوكيل من خلال المصدر، ولن يعرف المتصفّح الصورة التي يجب تحميلها إلا في وقت لاحق من عملية تحميل الصفحة، عليك إعداد اتصال بشبكة توصيل المحتوى (CDN) للصور المتعدّدة المصادر في أقرب وقت ممكن لتقصير مرحلة تحميل الموارد للصور المحتملة المرشّحة لمقياس LCP.