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