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