قد تكون على دراية بالمفهوم الأساسي لشبكة توصيل المحتوى (CDN): شبكة من الشبكات الموزعة والمترابطة خوادم توفر الأصول إلى المستخدمين بسرعة وكفاءة. عند تحميل ملف إلى موفر شبكة توصيل المحتوى (CDN)، سيتم إنشاء نسخة طبق الأصل. على العُقد الأخرى لشبكة توصيل المحتوى (CDN) حول العالم. عندما يطلب المستخدم ملفًا، سترسل العقدة جغرافيًا البيانات من خلال العقدة. والأقرب إلى هذا المستخدم، مما يقلل من وقت الاستجابة. كما توفر الطبيعة الموزعة لشبكات توصيل المحتوى التكرار في حالة انقطاع الشبكة أو وتعطل الأجهزة وموازنة التحميل للتخفيف من الارتفاع المفاجئ في حركة المرور.
ويمكن أن توفر شبكة توصيل المحتوى (CDN) للصور كل هذه المزايا، مع وجود اختلاف رئيسي واحد، وهو القدرة على تحويل تحسين محتويات الصورة استنادًا إلى السلاسل المستخدمة على عنوان URL للوصول إليها.
سيحمّل المستخدم صورة أساسية عالية الدقة إلى مقدّم الخدمة، ما يؤدي إلى إنشاء عنوان URL يُستخدم للوصول إليها:
https://res.cloudinary.com/demo/image/upload/sample.jpg
رغم أن البنية الدقيقة المستخدمة ستختلف من موفر إلى آخر، تسمح لك جميع شبكات توصيل المحتوى (CDN) للصور على الأقل بتغيير مصدر
أبعاد الصورة وإعدادات الترميز والضغط. السحابة الإلكترونية، على سبيل المثال،
لإجراء تغيير ديناميكي
صورة تم تحميلها من خلال بناء الجملة التالي: 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) للصور: الضغط التلقائي بالكامل والترميز وتفاوض المحتوى.
الضغط المبرمَج
تعني قوة الحوسبة التي تمتلكها شبكات توصيل المحتوى تحت تصرفها أنها قادرة على تقديم ميزة قوية بشكل لا يصدق وهي: تحليل محتوى الصورة لتحديد مستوى الضغط المثالي وإعدادات الترميز باستخدام الخوارزميات، تمامًا كما تفعل أنت تحسين الضغط يدويًا لكل صورة من صورنا.
تعمل هذه الخوارزميات على أتمتة القرارات التي قد تتخذها للموازنة بين حجم الملف والجودة الإدراكية، وتحليل محتوى الصور علامات قابلة للقياس لتقليص وضبط إعدادات الضغط وفقًا لذلك. ويشير هذا غالبًا إلى تخفيض كبير في حجم الملف مقارنةً بـ "منهج واحد يناسب الجميع" يدويًا لإعدادات الضغط.
وبقدر ما قد تبدو هذه العملية معقّدة، لا يمكن أن يكون تنفيذها أبسط بكثير: بالنسبة إلى 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
السمة <source> للعنصر <picture>.
على سبيل المثال، إنّ إضافة المَعلمة 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) بالصور تقديم خطط مجانية وفعّالة للاستخدام الشخصي، يتطلّب إنشاء مواد عرض الصور معدّل نقل بيانات ومساحة تخزين لعمليات التحميل والمعالجة على الخادم لتحويل الصور، ومساحة إضافية لنتائج التحويل المخزنة مؤقتًا - لذلك قد تتطلب التطبيقات المتقدمة والسريعة الزيارات خطة مدفوعة.