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