استخدام شبكات توصيل المحتوى (CDN) للصور لتحسين الصور

Jeremy Wagner

Katie Hempenius

Barry Pollard

لماذا يُنصح باستخدام صورة بتنسيق CDN؟

تعد شبكات توصيل محتوى الصور (CDN) ممتازة في تحسين الصور. يمكن أن يؤدي التبديل إلى شبكة توصيل محتوى (CDN) إلى تحقيق توفير يتراوح بين %40 و%80 في حجم ملف الصور. من الناحية النظرية، يمكن تحقيق النتائج نفسها باستخدام النصوص البرمجية لإنشاء المحتوى فقط، ولكن هذا نادر الحدوث على أرض الواقع.

ما هي شبكة توصيل المحتوى (CDN) الخاصة بالصورة؟

تتخصّص شبكات توصيل الصور (CDN) للصور في تحويل الصور وتحسينها وعرضها. يمكنك أيضًا اعتبارها واجهات برمجة تطبيقات للوصول إلى الصور المستخدمة على موقعك ومعالجتها. بالنسبة إلى الصور التي يتم تحميلها من شبكة توصيل للمحتوى (CDN)، لا يشير عنوان URL للصورة إلى الصورة المطلوب تحميلها فحسب، بل يشير أيضًا إلى معلَمات مثل الحجم والتنسيق والجودة. وهذا من شأنه تسهيل إنشاء أشكال مختلفة من الصورة لحالات الاستخدام المختلفة.

أمثلة على عمليات التحويل التي يمكن أن تجريها شبكات توصيل المحتوى (CDN) للصور استنادًا إلى المعلَمات في عناوين URL للصور.

تختلف شبكات توصيل الصور (CDN) عن النصوص البرمجية لتحسين الصور في وقت الإنشاء من حيث أنّها تنشئ نسخًا جديدة من الصور حسب الحاجة. نتيجةً لذلك، تكون شبكات توصيل المحتوى (CDN) أكثر ملاءمة بشكل عام لإنشاء صور مخصصة بشكل كبير لكل عميل على حدة من إنشاء النصوص البرمجية.

كيفية استخدام شبكات توصيل المحتوى (CDN) للصور عناوين URL للإشارة إلى خيارات التحسين

تنقل عناوين URL للصور التي تستخدمها شبكات توصيل المحتوى (CDN) للصور معلومات مهمة حول الصورة والتحويل والتحسينات التي يجب تطبيقها عليها. ستختلف تنسيقات عناوين URL حسب شبكة توصيل المحتوى (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 إلى واجهة برمجة تطبيقات الصورة لشبكة عرض المحتوى (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) الأكثر رواجًا ذاتيًا. وهو مفتوح المصدر ومجاني للاستخدام، ولكن به بشكل عام ميزات أقل من معظم شبكات توصيل المحتوى التجارية، كما أنّ وثائقه محدودة نوعًا ما. ويكيبيديا وSquare و99designs هي ثلاثة مواقع إلكترونية تستخدم Thumbor. يمكنك الاطّلاع على المشاركة كيفية تثبيت شبكة توصيل المحتوى (CDN) لصورة Thumbor للحصول على تعليمات حول إعدادها.
• تخيلية
• Imagor

شبكات توصيل المحتوى (CDN) التابعة لجهات خارجية

توفّر شبكات توصيل المحتوى (CDN) للصور التابعة لجهة خارجية شبكات توصيل المحتوى (CDN) للصور كخدمة. مثلما يوفر مقدّمو الخدمات السحابية الخوادم والبنية الأساسية الأخرى مقابل رسوم، توفّر شبكات توصيل المحتوى (CDN) للصور خدمة تحسين الصور وتسليمها مقابل رسوم. بما أنّ شبكات توصيل المحتوى (CDN) التابعة لجهات خارجية تحتفظ بالتكنولوجيا الأساسية، يمكن البدء بسهولة إلى حدٍّ ما ويمكن عادةً إتمامه في غضون 10 إلى 15 دقيقة، على الرغم من أنّ عملية نقل موقع إلكتروني كبير بالكامل قد تستغرق وقتًا أطول. عادةً ما يتم تحديد أسعار شبكات توصيل المحتوى (CDN) للصور التابعة لجهة خارجية على أساس مستويات الاستخدام، حيث توفّر معظم شبكات توصيل المحتوى للصور فئة مجانية أو فترة تجريبية مجانية لمنحك فرصة لتجربة منتجاتها.

اختيار صورة لشبكة توصيل المحتوى (CDN)

هناك العديد من الخيارات الجيدة لشبكات توصيل المحتوى (CDN) للصور. ستتضمّن بعضها ميزات أكثر من غيرها، ولكنّ جميعها سيساعدك على توفير وحدات البايت في صورك، وبالتالي تحميل صفحاتك بشكل أسرع. إلى جانب مجموعات الميزات، هناك عوامل أخرى يجب مراعاتها عند اختيار شبكة توصيل للمحتوى تشمل التكلفة والدعم والوثائق وسهولة الإعداد أو النقل.

من المفيد أيضًا تجربتها بنفسك قبل اتخاذ قرار. يمكنك العثور أدناه على دروس تطبيقية حول الترميز مع تعليمات حول كيفية البدء بسرعة باستخدام العديد من شبكات توصيل المحتوى (CDN) للصور.

التأثير على سرعة عرض أكبر محتوى مرئي (LCP)

تشكّل الصور جزءًا حيويًا من تجربة المستخدم على العديد من المواقع الإلكترونية، وبالتالي فهي تؤثر في مستوى أداء المواقع الإلكترونية عند عرض سرعة عرض أكبر محتوى مرئي. في ما يلي بعض النقاط التي يجب وضعها في الاعتبار إذا قرّرت استخدام صورة لشبكة توصيل المحتوى (CDN):

1. قد تأتي الصور التي يتم عرضها من شبكات توصيل المحتوى (CDN) من خادم متعدد المصادر، ما يتطلب وقتًا إضافيًا لإعداد الاتصال. حاوِل استخدام شبكة توصيل للمحتوى (CDN) إذا أمكن، تعمل على إنشاء وكيل من خلال المصدر الأساسي حتى لا تضيف مصادر إضافية للمتصفّح الذي سيتصل به. له نفس تأثير الاستضافة الذاتية للصور على المصدر الأساسي.
2. يمكنك استخدام قيمة السمة fetchpriority وهي "high" في عنصر صورة سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) لكي يبدأ المتصفِّح في تحميل تلك الصورة في أقرب وقت ممكن.
3. إذا لم تكن الصورة قابلة للاكتشاف على الفور في رمز HTML الأولي، يمكنك استخدام تلميح rel=preload للصورة المرشَّحة لمقياس LCP لكي يتمكّن المتصفِّح من تحميل تلك الصورة مسبقًا.
4. إذا لم يكن من الممكن إنشاء وكيل من خلال المصدر، ولن تكون الصورة الدقيقة التي سيتم تحميلها معروفة إلا في وقت لاحق أثناء تحميل الصفحة، يجب إعداد اتصال مع شبكة توصيل المحتوى (CDN) المشتركة المصدر في أقرب وقت ممكن من أجل تقصير مرحلة تحميل الموارد لما يمكن أن يكون صورة مرشحة لمقياس LCP في صفحتك.

إنّ شبكات توصيل الصور (CDN) للصور هي أدوات لا غنى عنها والتي تقضي على عناء تحسين الصور يدويًا، ويجب أخذها في الاعتبار. مع ذلك، هناك دائمًا حلول وسط يجب وضعها في الاعتبار، كما أنّ مراقبة الصور المرشَّحة لمقياس LCP على موقعك الإلكتروني وإضافة تلميحات حسب الاقتضاء يمكن أن يحدّ من أي وقت استجابة إضافي لهذه الطلبات الرئيسية.