ما هي شبكة CDN للصور؟ التحويل وتغيير الحجم والتخزين المؤقت على الحافة

ماذا تفعل شبكة CDN للصور

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

الصيغة. في الصور الفوتوغرافية تكون WebP وAVIF عادةً أخف بكثير من ملف JPEG الذي رفعته: في قياسنا صارت صورة أخبار حجمها 262,025 بايت إلى 113,860 بايت بصيغة WebP و86,936 بايت بصيغة AVIF. تحوّل شبكة CDN للصور كل صورة إلى صيغة يقبلها متصفح الزائر، فيحصل المتصفح الذي يدعم AVIF على AVIF، ويظل المتصفح الأقدم يحصل على صورة يستطيع عرضها.

الحجم. الهاتف الذي يعرض صورة بعرض 400 بكسل لا يحتاج إلى الملف المرفوع بعرض 2,400 بكسل. وحين يحمل الرابط عرضًا أو ارتفاعًا، تصغّر شبكة CDN للصور الصورة إلى ما تعرضه الصفحة فعلًا.

الضغط. حتى من دون تغيير الصيغة، تؤدي إعادة الترميز بجودة معقولة وحذف البيانات التي لا تستخدمها الشاشة إلى تخفيف معظم الملفات: الصورة الإخبارية نفسها، بعد إعادة ترميزها بصيغة JPEG، نزلت من 262,025 إلى 186,137 بايت.

التخزين المؤقت. تُحفظ كل نتيجة على الحافة. يجري التحويل مرة واحدة لكل نسخة، ويحصل كل زائر بعد ذلك على النسخة المحفوظة بسرعة CDN المعتادة.

تبقى ملفاتك الأصلية في مكانها: ترفع ملفًا واحدًا بجودة جيدة، وتُنتَج منه كل نسخة في مسار التسليم. ولا حاجة إلى إعادة تصدير أي شيء حين تظهر صيغة جديدة أو تتغيّر مقاسات التصميم.

رابط واحد وصيغ متعددة: Accept وVary

يحمل كل طلب صورة يرسله المتصفح ترويسة Accept تسرد الصيغ التي يستطيع عرضها. يرسل Chrome القيمة image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8، والمتصفح الذي لا يدعم AVIF لا يذكر image/avif. تقرأ شبكة CDN للصور هذه القائمة في كل طلب وتجيب على الرابط نفسه بصيغة AVIF أو WebP أو بالصيغة الأصلية. لا يتغيّر اسم الملف، فقد يصل photo.jpg بصيغة AVIF: ترويسة Content-Type هي التي تخبر بما أُرسل فعلًا.

ولأن للرابط الواحد الآن أكثر من إجابة صحيحة، يجب أن تعلن الاستجابة ذلك عبر Vary: Accept. تخبر هذه الترويسة كل ذاكرة تخزين مؤقت بين الحافة والزائر، من وكيل الشركة إلى ذاكرة المتصفح نفسه، بأن الإجابة تتوقف على Accept. ومن دونها قد تحفظ ذاكرة تخزين مشتركة ملف AVIF الذي تلقّاه زائر وتسلّمه للزائر التالي، ومتصفحه لا يستطيع فك ترميزه.

وتتبع ذاكرة الـ CDN نفسها القاعدة ذاتها، وهنا تفصيل مهم. تختلف سلاسل Accept بين المتصفحات، بل بين إصدارات المتصفح الواحد، فالذاكرة التي تتخذ الترويسة الخام مفتاحًا تحتفظ بنسخة شبه متطابقة لكل صياغة. أما شبكة CDN للصور المبنية جيدًا فتختزل الترويسة إلى القرار الذي تحمله (AVIF أو WebP أو لا شيء منهما) وتحتفظ بنسخة واحدة لكل منها.

والطريقة الأخرى أن يُتّخذ القرار في HTML: يسرد عنصر <picture> عنصر <source> بصيغة AVIF وآخر بصيغة WebP، فيأخذ المتصفح أول نوع يدعمه. لا يحتاج ذلك إلى تفاوض، لكنك تنتج كل نسخة وتخزّنها وتشير إليها بنفسك. ومع شبكة CDN للصور يبقى الترميز عنصر <img> عاديًا، ويظل <picture> أداة التوجيه الفني، حين ينبغي أن يحصل الهاتف على قصّ مختلف للصورة لا على نسخة أصغر منها.

تغيير الحجم عبر الرابط

لا يحتاج التفاوض على الصيغة إلى أي تغيير في صفحاتك، أما تغيير الحجم فيحتاج، لأن الصفحة وحدها تعرف بأي عرض ستظهر الصورة. تأخذ شبكات CDN للصور الحجم من الرابط، وغالبًا على هيئة معاملات استعلام: photo.jpg?w=640 يطلب نسخة بعرض 640 بكسل. والخدمة المعقولة تحافظ على نسبة الأبعاد حين تعطيها بعدًا واحدًا، وتُدخل الصورة داخل الإطار حين تعطيها البعدين، ولا تكبّر صورة أبدًا فوق حجمها الأصلي.

ومع srcset وsizes يكفي ملف مصدر واحد لكل الشاشات. تسرد بضعة عروض للرابط نفسه وتحدد العرض الذي تظهر به الصورة، فيحمّل المتصفح أصغر نسخة تبدو حادة بكثافة شاشة الزائر. وتنتج شبكة CDN للصور كل عرض في القائمة أول مرة يطلبه أحد، ثم تقدّمه من ذاكرتها المؤقتة بعد ذلك.

أبقِ القائمة قصيرة وثابتة. كل عرض مختلف تحويل مستقل وعنصر مستقل في التخزين المؤقت، فخمسة عروض تُستخدم في الموقع كله تُخزَّن أفضل بكثير من الأرقام التي يحسبها كل قالب على حدة. وتقبل بعض الخدمات معاملات أخرى مثل القصّ أو الجودة أو نقطة التركيز، وكل واحد منها يضاعف عدد النسخ بالطريقة نفسها.

صورة مصدر واحدة وخمسة عروض: يختار المتصفح ما يحتاجه

<img
  src="https://example.com/media/photo.jpg?w=960"
  srcset="https://example.com/media/photo.jpg?w=320 320w,
          https://example.com/media/photo.jpg?w=640 640w,
          https://example.com/media/photo.jpg?w=960 960w,
          https://example.com/media/photo.jpg?w=1280 1280w,
          https://example.com/media/photo.jpg?w=1920 1920w"
  sizes="(max-width: 720px) 100vw, 720px"
  width="1920" height="1080" alt="">

كل نسخة عنصر مستقل في التخزين المؤقت

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

يجب أن يتضمن مفتاح التخزين المؤقت الحجم. إذا تجاهلت قاعدةٌ سلسلةَ الاستعلام لرفع نسبة الإصابة، يتشارك ?w=320 و?w=1920 المفتاح نفسه، ويُرسَل الحجم الذي طُلب أولًا إلى الجميع. أبقِ معاملات الحجم في المفتاح حتى لو أسقطت معاملات أخرى.

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

التفريغ وانتهاء الصلاحية يشملان العائلة كلها. حين يتغيّر أصلٌ تحت الاسم نفسه، يجب أن تختفي كل صيغة وكل حجم صُنع منه. التفريغ ببادئة المسار يصل إليها كلها، أما تفريغ رابط واحد بعينه فقد يترك النسخ المصغّرة خلفه. أما تفعيل التحويل فهو الحالة السهلة: حين تكون الصيغة جزءًا من مفتاح التخزين المؤقت، تكون كل نسخة محوَّلة عنصرًا جديدًا وتخرج من أول طلب. ولا يبقى على حاله إلا النسخ الموجودة أصلًا في متصفحات الزوار، حتى تنتهي صلاحيتها هناك.

الجودة والحجم: متى يخسر التحويل

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

والصيغة لا تقل أهمية عن الإعداد، والفائز يتغيّر مع الصورة. في 5 أكتوبر 2026 مرّرنا ثلاث صور عبر محسّن الصور الذي يعمل خلف CDN.com.tr بإعدادات الإنتاج، وعددنا البايتات.

صورة أخبار، JPEG. الأصل 262,025 بايت؛ WebP 113,860؛ AVIF 86,936. الحالة النموذجية: تنقل AVIF الصورة نفسها في نحو ثلث بايتات الأصل.

لقطة شاشة للوحة التحكم، PNG. الأصل 105,078 بايت؛ PNG المحسَّن 40,379؛ WebP 41,218؛ AVIF 27,942. ملف PNG بلوحة ألوان بارع جدًا في الألوان المسطحة والنصوص، وهنا خرجت WebP أكبر منه، بينما فازت AVIF رغم ذلك.

أيقونة موقع، PNG، 16×16. الأصل 701 بايت؛ PNG المحسَّن 483؛ WebP 314؛ AVIF 682. في هذا الحجم يطغى العبء الثابت لحاوية AVIF على ضغطها الأفضل، وتفوز WebP بوضوح.

لا توجد صيغة تفوز في كل مكان، وقد ينتج التحويل ملفًا أثقل من أفضل نسخة من الأصل. شبكة CDN للصور الجيدة ترمّز وتقارن البايتات وترسل الملف الأصغر، أما الخدمة التي تحوّل دون تمييز فتُثقل جزءًا من صورك وتصفها مع ذلك بأنها محسّنة. القياسات كاملة وأسبابها في دليلنا AVIF أم WebP.

شبكة CDN للصور أم التحسين وقت البناء؟

يمكنك الحصول على الصيغ نفسها من دون شبكة CDN للصور. فخطوة بناء أو خطّاف عند الرفع أو إضافة يمكنها تحويل كل صورة مرة واحدة، وكتابة النسخ بجوار الأصول، وترك شبكة CDN عادية تقدّمها بترميز <picture>. وأي الطريقين أفضل يتوقف على مصدر صورك.

يفوز التحسين وقت البناء في موقع تعيش صوره في المستودع: موقع تعريفي، أو توثيق، أو تطبيق ثابت. المجموعة معروفة مسبقًا، ويمكن ضبط كل ملف يدويًا، ولا يُعالَج شيء بينما ينتظر زائر، وما يخرج هو بالضبط ما اختبرته.

تفوز شبكة CDN للصور حين تصل الصور أسرع مما يستطيع أحد معالجته: صور منتجات تُرفع من لوحة إدارة متجر، أو أرشيف موقع إخباري، أو مكتبة وسائط WordPress تضم رفعًا متراكمًا منذ سنوات، أو صور ينشرها مستخدموك. وتفوز أيضًا حين يزداد عدد الأحجام مع كل تصميم جديد، وحين يكتب الترميزَ قالبٌ أو نظام إدارة محتوى مستضاف، وحين تفضّل ألا تشغّل محوّلًا على خادمك.

ويجتمع الطريقان جيدًا: صور الواجهة المضبوطة يدويًا من البناء، وكل ما يُرفع عبر نظام إدارة المحتوى من شبكة CDN للصور. أما الشعارات والأيقونات المرسومة لا المصوَّرة فالأفضل إبقاؤها بصيغة SVG في الحالتين: لا شيء فيها يُحوَّل، وتبقى حادة بأي حجم.

فخاخ تفحصها قبل التفعيل

معظم مشكلات شبكات CDN للصور تأتي من مواضع قليلة، ويمكن فحص كل منها قبل أن يلاحظها زائر.

غياب Vary. الاستجابة التي تتغيّر بحسب Accept ولا تحمل Vary: Accept هي الخلل الوحيد في هذه القائمة الذي قد يُري الزائر صورة معطوبة. افحص ما ترسله شبكتك وما يمرّره أي وكيل أمامها.

معاملات الحجم خارج مفتاح التخزين المؤقت. حجم واحد للجميع: اطلب عرضين للصورة نفسها وقارن ما يعود.

معاملات بلا حدود. إذا قُبل أي عرض، يستطيع أي شخص طلب آلاف الأحجام وتحميلك ثمن كل تحويل. وقائمة ثابتة من العروض في قوالبك تحصر صفحاتك أنت في نسخ قليلة، أما الطلبات القادمة من الخارج فلا يوقفها إلا حدّ من جهة الخدمة، كقائمة بالعروض المسموح بها أو حدّ لمعدل الطلبات.

ملفات أثقل. قِس مزيج صورك أنت. إذا لم تقارن الخدمة البايتات، فالرسوم المسطحة والأيقونات هي أكثر ما يتضرر.

صيغ تمرّ كما هي. صور GIF المتحركة وملفات SVG والصور التي هي أصلًا بصيغة WebP تخرج في الغالب دون تغيير، فتحقّق من الصيغ التي تحوّلها خدمتك.

تكلفة المعالجة والحصص. الترميز، وبخاصة إلى AVIF، يستهلك من المعالج أكثر بكثير من إرسال ملف مخزّن، والخدمات تحتسب ذلك: لكل تحويل، أو لكل بايت معالَج، أو من حصة الباقة. اقرأ كيف تحتسبه خدمتك قبل أن تفعّله لكل الصور دفعة واحدة.

نسخ قديمة. الصور التي حمّلتها المتصفحات قبل التفعيل تبقى في ذاكرتها المؤقتة حتى تنتهي صلاحيتها، ولا يصل إليها أي تفريغ في الـ CDN. احكم على النتيجة بطلب جديد، كطلب الفاحص أدناه، لا بإعادة تحميل الصفحة.

افحص ما يقدّمه موقعك

يُظهر الفاحص أدناه ما تفعله شبكة CDN للصور، أو غيابها، بصفحة حقيقية. فهو يقرأ HTML الصفحة، ويأخذ ما يصل إلى 20 صورة من <img> وsrcset و<picture> وog:image، ويطلب كل صورة مرتين: مرة كما يطلبها متصفح حديث (Accept: image/avif,image/webp,…)، ومرة كعميل يقبل أي شيء (Accept: */*). ويقرأ البايتات الأولى من كل إجابة ليعرف الصيغة الحقيقية مهما قال اسم الملف، ويعدّ البايتات، ويعرض ترويسة Vary وحالة التخزين المؤقت. ويمكنك أيضًا إدخال عنوان صورة واحدة.

إذا تلقّى الطلبان الصيغة الأصلية في كل صورة، فلا شيء في الطريق يحوّل صورك. وإذا تلقّى الطلب الحديث AVIF أو WebP من دون Vary: Accept في الإجابة، فأصلح ذلك أولًا. تشرح صفحة الفاحص نفسها كل نتيجة وحدودها.

تحسين الصور على CDN.com.tr

تحسين الصور مفتاح للحساب كله أو لقاعدة تسليم واحدة. يحوّل الـ edge صور JPEG وPNG إلى WebP، أو إلى AVIF وWebP إن اخترت WebP + AVIF للحساب، فيحصل كل متصفح على صيغة يقبلها؛ أما المتصفحات التي لا تقبل أيّاً منهما فتحصل على الصورة بصيغتها الأصلية. مع WebP + AVIF يأتي الجواب من الرابط نفسه مع Vary: Accept؛ ومع WebP وحده يُعاد توجيه المتصفحات التي تقبل WebP إلى نسخة .webp. وفي الحالتين تبقى روابط الصور في شيفرة HTML كما هي. وبالحجم الكامل لا تُرسَل الصورة المحوَّلة حديثاً إلا إذا كانت أصغر من الأصل. وإذا فشل التحويل يقدّم الـ edge الصورة الأصلية بدلاً منها. وتُحتسب المعالجة من حصتك الشهرية.

القياسات أعلاه من هذا المحسّن نفسه. مع WebP + AVIF تخرج صورة الأخبار التي حجمها 262,025 بايت في 86,936 بايت بصيغة AVIF، ولقطة لوحة التحكم التي حجمها 105,078 بايت في 27,942 بايت. أما صور PNG الصغيرة أو ذات الألوان المسطحة حتى ميغابكسل واحد (الأيقونات ولقطات الشاشة والرسوم التوضيحية) فعليها أيضًا أن تتفوّق على ملف PNG المحسَّن لدينا؛ لذلك يحصل المتصفح الذي يقبل WebP ولا يقبل AVIF على تلك اللقطة في صورة ملف PNG بحجم 40,379 بايت، وتخرج أيقونة الموقع بصيغة WebP في 314 بايت لا بصيغة AVIF في 682.

ويجري تغيير الحجم عبر الرابط: أضف ?w= أو ?h= أو كليهما إلى عنوان الصورة. القيمة الواحدة تحافظ على نسبة الأبعاد، والقيمتان تُدخلان الصورة داخل ذلك الإطار، ولا تُكبَّر الصورة أبدًا فوق حجمها الأصلي. تُحوَّل الصور المصغّرة أيضًا لكنها لا تُقارَن بالأصل. وتُبقي القاعدة w وh في مفتاح التخزين المؤقت ما دامت تُبقي سلسلة الاستعلام، وهذا هو الإعداد الافتراضي؛ أما القاعدة التي تتجاهل كل معاملات الاستعلام فتخزّن حجمًا واحدًا لها جميعًا.

النسخ التي حوّلتها الحافة قبل وصول المقارنة بالحجم الكامل تبقى على حالها حتى تنتهي صلاحيتها أو تُفرَّغ، والمتصفحات التي حمّلت صورة من قبل تحتفظ بنسختها حتى تنتهي صلاحيتها في المتصفح. ومع WebP وحده لا تحمل إعادة التوجيه إلى نسخة .webp الترويسة Vary: Accept، وهذا ما يُبلغ عنه الفاحص أعلاه؛ أما WebP + AVIF فيجيب كل المتصفحات من الرابط نفسه مع Vary: Accept. وتُحتسب AVIF من الحصة بمعدل أعلى من WebP لأن ترميزها يتطلب معالجة أكثر، وتعرض اللوحة المعدل الحالي تحت المفتاح. ويشرح موضوع المساعدة الخاص بتحسين الصور المفاتيح واختيار الصيغة والتفريغ خطوة بخطوة.

WordPress. في موقع WordPress خلف CDN.com.tr تتولّى الحافة التحويل: تُحوَّل صور مكتبة الوسائط أثناء مرورها عبر الـ CDN، فلا ينفق خادمك شيئًا من المعالج على الترميز، ولا تُكتب ملفات WebP أو AVIF إضافية في المكتبة، وتستمر القوالب ومنشئات الصفحات في العمل لأن روابط الصور لا تتغيّر. وإذا لم يكن الموقع على شبكتنا، يمكن لـإضافة CDNTR المجانية أن تحوّل الصور إلى WebP، وإلى AVIF حيث يدعمها الخادم، على خادم الموقع نفسه. استخدم أحدهما فقط: حين يكون التحويل على الحافة مفعّلًا، أبقِ التحويل المحلي في الإضافة معطّلًا كي تعمل الحافة من ملفاتك الأصلية.