Cloudflare Image Transformations - تغيير الحجم والتحسين على الفور

إذا كانت Cloudflare Images هي المكان الذي توجد فيه صورك، فإن Cloudflare Image Transformations هي المحرك الذي يجعلها سريعة. فهي تغيّر حجم صورك وتضغطها وتحوّلها إلى صيغ حديثة في لحظة طلبها، مستخدمةً فقط النسخة الأصلية التي لديك بالفعل. لا خطوة بناء، ولا صور مصغّرة مُنشأة مسبقًا، ولا نسخ منفصلة تزحم تخزينك. تطلب الحجم والصيغة اللذين تريدهما في عنوان URL، فتنتجهما Cloudflare على الحافة وتخزّنهما مؤقتًا.

هذا الدليل هو الرفيق العملي لنظرتي العامة حول استضافة الصور على Cloudflare. فهو يشرح الطريقتين لتشغيل التحويلات، والمعاملات المهمة، وما تكلّفه في 2026، وكيف تؤتمت كل ذلك على WordPress وPrestaShop.

باختصار

• تغيّر التحويلات حجم الصور وتضغطها وتحوّلها إلى WebP/AVIF عند الطلب من نسخة أصلية واحدة
• طريقتان: تنسيق URL بسيط (/cdn-cgi/image/...) وCloudflare Worker للتحكم الكامل
• يقدّم format=auto صيغة AVIF أو WebP تلقائيًا بناءً على ما يدعمه المتصفح
• الأسعار سخية: أول 5,000 تحويل فريد شهريًا مجانًا، ثم 0.50 دولار لكل 1,000
• لم تعد التحويلات تتطلب خطة Pro، وهو تغيير مهم مقارنةً بالسنوات السابقة
• يمكنك تحويل الصور من مصدرك الأصلي أو من Cloudflare R2 ، وأتمتة كل ذلك بإضافتي وعامل Worker المجانيين

كيف تعمل Cloudflare Image Transformations

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

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

النتيجة بالنسبة إلى زوّارك: تصل صورة بحجم 1 ميغابايت كصورة AVIF بحجم 100 إلى 200 كيلوبايت، بمقاس مناسب تمامًا لمنفذ العرض لديهم، مُسلّمة من حافة قريبة.

الطريقة 1: تحويلات الصور عبر تنسيق URL

أبسط طريقة لتحويل صورة هي تغليف عنوان URL الخاص بها في مسار خاص على نطاقك:

1https://example.com/cdn-cgi/image/<options>/<source-image-url>

مثال حقيقي يغيّر الحجم إلى 800 بكسل عرضًا، ويضبط الجودة على 75، ويختار أفضل صيغة تلقائيًا:

1https://example.com/cdn-cgi/image/width=800,quality=75,format=auto/https://example.com/uploads/photo.jpg

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

أكثر الخيارات فائدةً هي:

الطريقة 2: تحويلات الصور عبر Cloudflare Worker

للتحكم الحقيقي، تُجري التحويل داخل Cloudflare Worker باستخدام خاصية cf.image على طلب fetch. يتيح لك هذا تطبيق منطق: اختيار الأبعاد بناءً على الجهاز، وتقييد الصور التي يمكن تحويلها، أو إعادة كتابة روابط الصور لصفحة كاملة.

 1export default {
 2  async fetch(request) {
 3    const options = {
 4      cf: {
 5        image: {
 6          width: 800,
 7          quality: 75,
 8          format: "auto",
 9          fit: "scale-down",
10        },
11      },
12    };
13
14    // The image you want to transform
15    const imageURL = "https://example.com/uploads/photo.jpg";
16    return fetch(imageURL, options);
17  },
18};

نهج Worker هو ما يشغّل أدواتي الخاصة، لأنه يستطيع إعادة كتابة مخرجات HTML النهائية لموقع، بما في ذلك الصور التي تحقنها القوالب والإضافات وحتى CSS المضمّن، وهو ما لا يستطيع النهج المعتمد على URL وحده الوصول إليه. إذا أردت تعلّم Workers على نطاق أوسع، فإن وثائق Workers الرسمية نقطة بداية ممتازة.

تحويل الصور من R2 أو من مصدر بعيد

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

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

أسعار Cloudflare Image Transformations

الاقتصاد هنا ودود، خصوصًا للمواقع الصغيرة والمتوسطة. استنادًا إلى أسعار Images الرسمية لعام 2026:

«التحويل الفريد» هو مجموعة مميزة واحدة من الخيارات مطبّقة على صورة أصلية واحدة في الشهر. طلب نسخة width=800,format=auto نفسها من صورة ألف مرة لا يزال يُحتسب كتحويل فريد واحد، لأن الـ 999 الأخرى تُقدَّم من الذاكرة المؤقتة. ولهذا تبقى أعداد التحويلات الواقعية منخفضة حتى على المواقع المزدحمة: لديك عدد أقل بكثير من تركيبات الصورة والحجم المميزة مقارنةً بعدد مشاهدات الصفحة لديك.

التغيير الكبير الذي يستحق التكرار: كانت التحويلات سابقًا خلف خطة Pro مدفوعة. أصبحت الآن متاحة في الخطة المجانية، حتى حد 5,000 الشهري. بالنسبة إلى مدونة صغيرة أو معرض أعمال، أصبح تحسين الصور على الفور الآن مجانيًا فعليًا.

أتمتته على WordPress وPrestaShop

بناء روابط التحويل يدويًا أمر مقبول لبضع صور، لكن الموقع الحقيقي يضم المئات منها، وتُنشأ ديناميكيًا. هذا هو الجزء الصعب، وهو بالضبط ما تحلّه أدواتي المجانية.

• إضافة WordPress. إضافة Cloudflare Image Resizing الخاصة بي (GitHub ) تعيد كتابة روابط صورك لتمر عبر التحويلات تلقائيًا.
• Cloudflare Worker. Cloudflare Image Resizing Worker الخاص بي يعيد كتابة الـ HTML النهائي للتغطية الكاملة، بما في ذلك الصور التي تحقنها الإضافات والقوالب والصور المُشار إليها داخل CSS.

للحصول على شروحات كاملة جاهزة للنسخ واللصق، اقرأ Cloudflare Image Resizing لـ WordPress وCloudflare Image Resizing لـ PrestaShop . بين الإضافة وعامل Worker، تنتهي كل صورة في موقعك محسّنة دون أن تلمس قالبًا واحدًا.

إذا كنت تفضّل تخزين مكتبة صورك وإدارتها عبر منتج Cloudflare Images مباشرةً، فإن Easy Cloudflare Images هو تطبيق سطح المكتب المجاني الخاص بي لرفع الصور وتحسينها على Windows وmacOS وLinux.

اختبار سريع قبل وبعد

الطريقة الصادقة للحكم على أي تحسين هي قياسه.

1. اختر صفحة غنية بالصور وشغّلها عبر PageSpeed Insights . دوّن قيمة Largest Contentful Paint والوزن الإجمالي للصور.
2. فعّل التحويلات وطبّق width وformat=auto على صور تلك الصفحة (عبر طريقة URL، أو الـ Worker، أو إضافتي).
3. أعد تشغيل الاختبار. ينبغي أن ترى حمولة الصور تنخفض بشدة وأن تتحسن قيمة LCP، وغالبًا ما ينتقل التقييم الراسب إلى الأخضر.

ذلك التحسّن القابل للقياس هو ما يميل إلى تحريك المؤشر في تجربة المستخدم وترتيب البحث على حد سواء.

أهم النقاط

• تنشئ Cloudflare Image Transformations صورًا محسّنة وبأحجام صحيحة عند الطلب من نسخة أصلية واحدة
• طريقة URL (/cdn-cgi/image/...) هي أسرع بداية؛ ويمنحك الـ Worker تحكمًا برمجيًا كاملًا
• يتولى format=auto التفاوض على AVIF/WebP نيابةً عنك، مع رجوع آمن للمتصفحات الأقدم
• أول 5,000 تحويل فريد شهريًا مجانية، ثم 0.50 دولار لكل 1,000، دون رسوم خروج
• تعمل التحويلات الآن على الخطة المجانية، دون الحاجة إلى اشتراك Pro
• ادمج التحويلات مع R2 للحصول على مكتبة وسائط بدون خروج، وأتمت كل شيء بإضافتي وعامل Worker

الأسئلة الشائعة

ما الفرق بين Cloudflare Images وImage Transformations؟ Cloudflare Images هي المنتج الأوسع الذي يخزّن الصور ويحسّنها ويسلّمها. أما Image Transformations فهي قدرة تغيير الحجم والتحسين ضمنه. يمكنك استخدام التحويلات على صور مخزّنة في Cloudflare Images، أو في R2، أو على مصدرك الأصلي، دون الحاجة بالضرورة إلى تخزينها في منتج Images.

هل أحتاج إلى خطة مدفوعة لاستخدام تحويلات الصور؟ لا، لم يعد الأمر كذلك. التحويلات متاحة في الخطة المجانية حتى 5,000 تحويل فريد شهريًا. وبعد ذلك، تدفع 0.50 دولار لكل 1,000، ولا توجد رسوم خروج.

ماذا يفعل format=auto؟ يطلب من Cloudflare فحص رأس Accept في المتصفح وتقديم أكفأ صيغة يدعمها، عادةً AVIF أو WebP، والرجوع إلى الصيغة الأصلية (مثل JPEG أو PNG) للمتصفحات التي لا تدعم الصيغ الحديثة.

هل يمكنني تحويل صور غير مستضافة على Cloudflare؟ نعم. يمكن للتحويلات الجلب من مصدر بعيد، بما في ذلك حاوية Cloudflare R2 أو خادم خارجي، طالما سمحت بذلك المصدر في إعدادات التحويل لديك.

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

كيف أطبّق هذا على موقع WordPress أو PrestaShop بالكامل؟ استخدم إضافة WordPress المجانية الخاصة بي لإعداد آلي سريع، أو انشر Cloudflare Worker الخاص بي لتغطية كاملة تعيد كتابة كل رابط صورة، بما في ذلك تلك الموجودة في CSS. كلاهما موثّق في أدلة المنصات خطوة بخطوة الخاصة بي.