قد تكون على دراية بالمفهوم الأساسي لشبكة توصيل المحتوى (CDN): شبكة من الخوادم الموزعة والمترابطة التي توفّر مواد العرض إلى المستخدمين بسرعة وكفاءة. عند تحميل ملف إلى موفر شبكة توصيل المحتوى (CDN)، سيتم إنشاء نسخة طبق الأصل منها على النقاط الأخرى لشبكة توصيل المحتوى (CDN) في جميع أنحاء العالم. عندما يطلب أحد المستخدمين ملفًا، سترسل العقدة الأقرب جغرافيًا إلى ذلك المستخدم، ما يقلل من وقت الاستجابة. كما توفر الطبيعة الموزعة لشبكات توصيل المحتوى (CDN) أيضًا التكرار في حالة انقطاع الشبكة أو تعطل الأجهزة وموازنة التحميل للتخفيف من حالات الارتفاع المفاجئ في حركة المرور.
بإمكان شبكة توصيل المحتوى (CDN) للصور توفير كل هذه المزايا، بفارق واحد رئيسي، وهو: القدرة على تحويل محتوى صورة وتحسينه استنادًا إلى السلاسل التي يستخدمها عنوان URL للوصول إليها.
سيحمّل المستخدم صورة أساسية عالية الدقة إلى مقدّم الخدمة، ما سيؤدي إلى إنشاء عنوان URL يُستخدم للوصول إليه:
https://res.cloudinary.com/demo/image/upload/sample.jpg
على الرغم من أنّ البنية الدقيقة المستخدمة ستختلف من موفر إلى آخر، تتيح لك جميع شبكات توصيل المحتوى (CDN) على الأقل تغيير أبعاد الصورة المصدر وترميزها وإعدادات الضغط. Cloudinary، على سبيل المثال،
إجراء تغيير ديناميكي لصورة تم تحميلها من خلال التركيبات التالية: h_ متبوعًا بالارتفاع العددي بالبكسل، وw_ متبوعًا بالعرض، والقيمة c_ التي تسمح لك بتحديد معلومات تفصيلية حول كيفية تحجيم أو اقتصاص الصورة.
يمكن تطبيق أي عدد من عمليات التحويل عن طريق إضافة قيم مفصولة بفواصل إلى عنوان URL قبل اسم الملف والامتداد،
ما يعني أنّه يمكن معالجة الصورة التي تم تحميلها على النحو المطلوب من خلال src للعنصر img الذي يطلبها.
<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">
وفي المرّة الأولى التي يزور فيها أحد المستخدمين عنوان URL الذي يحتوي على هذه الإحالات الناجحة، يتم إنشاء نسخة جديدة من الصورة وقد تم تغيير حجمها بالتناسب إلى عرض 400 بكسل (w_400) وإرسالها. ويتم بعد ذلك تخزين هذا الملف الذي تم إنشاؤه حديثًا في ذاكرة التخزين المؤقت عبر شبكة توصيل المحتوى (CDN) بحيث يمكن إرساله إلى أي مستخدم يطلب عنوان URL نفسه بدلاً من إعادة إنشائه عند الطلب.
على الرغم من أنّه ليس من غير الشائع أن يقدّم مزوّدو شبكات توصيل المحتوى (CDN) للصور مجموعات تطوير برامج لتسهيل الاستخدام المتقدّم والتكامل مع حِزم التكنولوجيا المختلفة، يتيح لنا نمط عنوان URL الذي يمكن توقّعه وحده تحويل ملف واحد تم تحميله بسهولة إلى سمة srcset قابلة للتطبيق بدون الحاجة إلى أي أدوات تطوير أخرى:
<img
src="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w"
srcset="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w,
https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg 800w,
https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg 600w"
alt="…">
ويمكننا أن نحدّد يدويًا مستوى الضغط المطلوب باستخدام بنية مألوفة الآن: q_، وهي اختصار لـ "الجودة"، متبوعًا بالاختصار الرقمي لمستوى الضغط:
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
مع ذلك، من النادر أن تحتاج إلى تضمين هذه المعلومات يدويًا بفضل مجموعة من الميزات الفعّالة جدًا التي توفّرها معظم شبكات توصيل المحتوى (CDN) للصور، وهي الضغط التلقائي بالكامل والترميز والتفاوض على المحتوى.
الضغط التلقائي
إن شبكات توصيل المحتوى (CDN) الخاصة بصورة الحوسبة تحت تصرفها تعني أنّها قادرة على تقديم ميزة فعَّالة للغاية: تحليل محتوى صورة ما لتحديد مستوى الضغط المثالي وإعدادات الترميز بطريقة خوارزمية، كما يمكننا أن نضبط يدويًا الضغط لكل صورة من الصور لدينا.
وتعمل هذه الخوارزميات على التشغيل المبرمَج للقرارات التي قد تتخذها لتحقيق التوازن بين حجم الملف وجودة المحتوى الملموس، وتحليل محتوى الصور بحثًا عن علامات قابلة للقياس في تراجع حجم الملف وضبط إعدادات الضغط وفقًا لذلك. وهذا يعني بشكل متكرر تخفيضات كبيرة في حجم الملف مقارنةً بالطريقة اليدوية التي "تناسب الجميع" مع إعدادات الضغط.
وبالرغم من التعقيد لهذه العملية، لا يمكن أن يكون التنفيذ أكثر بساطة: بالنسبة إلى Cloudinary، تتيح إضافة q_auto إلى عنوان URL للصورة هذه الميزة:
<img src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg" alt="…">
<!-- 250 KB-->
<img src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg" alt="…">
<!-- 134 KB-->
الترميز الآلي والتفاوض على المحتوى
عند تلقّي طلب لصورة، تحدد شبكات توصيل المحتوى (CDN) الخاصة بالصورة أحدث ترميز يتوافق مع المتصفّح من خلال عناوين HTTP التي يرسلها المتصفّح إلى جانب طلبات مواد العرض، وتحديدًا العنوان Accept. يشير هذا العنوان إلى الترميزات التي يمكن للمتصفّح فهمها، وذلك باستخدام أنواع الوسائط نفسها التي سنستخدمها لتعبئة السمة type للعنصر <picture> <source>.
على سبيل المثال، عند إضافة المَعلمة f_auto إلى قائمة عمليات تحويل الصور في عنوان URL لمادة العرض، يتم بوضوح إعلام Cloudinary بتقديم الترميز الأكثر فعالية الذي يستطيع المتصفّح فهمه:
<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">
ينشئ الخادم بعد ذلك نسخة من الصورة بهذا الترميز ويحتفظ بالنتيجة في ذاكرة التخزين المؤقت لجميع المستخدمين اللاحقين الذين لديهم مستوى دعم المتصفّح نفسه. تتضمّن تلك الاستجابة عنوان Content-Type لإعلام المتصفّح بترميز الملف بشكل صريح، بغض النظر عن امتداد الملف. ومع أنّ المستخدم الذي لديه متصفح حديث سيطلب
ملفًا ينتهي بـ .jpg، سيصاحب هذا الطلب عنوان يبلغ الخادم بأنّ AVIF متاح، وسيرسل الخادم
ملفًا مشفّرًا بترميز AVIF مع تعليمات صريحة للتعامل معه كملف AVIF.
إنّ النتيجة النهائية هي عملية لا تعفيك فقط من إنشاء ملفات بترميز تبادلي وضبط إعدادات الضغط يدويًا
(أو صيانة نظام يؤدي هذه المهام نيابةً عنك)، بل هي تغنيك عن الحاجة إلى استخدام <picture> والسمة type لإرسال هذه الملفات إلى المستخدمين بشكل فعّال. وبالتالي، يمكن أن يؤدي استخدام بنيتَي srcset وsizes وحدهما إلى توفير صور مرمّزة للمستخدمين، على سبيل المثال، AVIF
عبر الرجوع إلى WebP (أو JPEG-2000 في متصفّح Safari فقط)، ثم استخدام الترميز القديم الأكثر منطقية.
ومن عيوب استخدام شبكة توصيل المحتوى (CDN) أنّها لوجستية أكثر من كونها فنية، وأبرزها هي التكلفة. على الرغم من أنّه من الشائع أن تقدّم شبكات توصيل المحتوى (CDN) للصور خططًا مجانية فعّالة من حيث الميزات للاستخدام الشخصي، يتطلّب إنشاء مواد عرض الصور معدل نقل بيانات ومساحة تخزين للتحميل والمعالجة على الخادم لتحويل الصور ومساحة إضافية لنتائج التحويل المخزّنة مؤقتًا، لذا قد يتطلّب الاستخدام المتقدّم والتطبيقات التي تجذب عددًا كبيرًا من الزيارات خطة مدفوعة.