مراجعة Quicq: تحسين صورة WordPress في الوقت الفعلي

نشرت: 2022-02-14

هل تعلم أن الصور ، في المتوسط ​​، تمثل حوالي نصف حجم ملف متوسط ​​صفحة الويب؟

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

Quicq هي خدمة من Afosto تتيح لك تحسين صور موقعك بالكامل في الوقت الفعلي وتقديمها من شبكة توصيل محتوى مدعومة من Google Cloud (CDN). بالإضافة إلى الأداء ، يمكنك أيضًا استخدامه لمعالجة الصور بسهولة ، مثل اقتصاصها وإضافة علامات مائية والمزيد.

إنه يعمل مع WordPress عبر مكون إضافي مخصص للتكامل بالإضافة إلى منصات أخرى مثل Magento و PrestaShop.

في مراجعة Quicq العملية ، سنوضح لك كيفية عمل Quicq وكيف يمكنك استخدامه لتحسين صور موقع WordPress الخاص بك.

دعونا نحفر ...

أداة تحسين الصور Quicq WordPress

مراجعة Quicq: ما يفعله البرنامج المساعد

على مستوى عالٍ ، يركز Quicq على تقديم حل كامل لتحسين صورة WordPress. إنها في الأساس أداة للتوصيل والتشغيل تتيح لك الاستفادة من جميع أساليب تحسين الصورة المهمة - المزيد حول تلك أدناه.

هناك تكتيكان "رئيسيان" يفكر فيهما معظم الناس عندما يتعلق الأمر بتحسين الصورة:

  • تغيير الحجم - تغيير حجم الأبعاد الفعلية للصورة لتتناسب مع الطريقة التي ستستخدمها بها على موقعك. الأبعاد الأصغر تعني بيانات أقل مما يعني حجم صورة أصغر.
  • الضغط - باستخدام خوارزمية ضغط لتقليص حجم ملف الصورة دون تغيير أبعادها ، إما من خلال خوارزمية غير ضائعة ( بدون تغيير في الجودة ) أو خوارزمية ضائعة ( ربما انخفاض طفيف في الجودة ).

يمكن لـ Quicq بالتأكيد تنفيذ هذه التكتيكات من أجلك ، ولكنه أيضًا أحد السلالات الجديدة من المكونات الإضافية لتحسين الصور التي تتجاوز مجرد تغيير حجم الصور وضغطها بشكل ثابت.

بدلاً من ذلك ، فإنه يعرض صورك تلقائيًا من شبكة CDN المدعومة من Google Cloud ثم يقوم بتحسينها في الوقت الفعلي للزوار.

بمجرد تنشيط Quicq على موقعك ، سيقوم تلقائيًا بتحسين جميع صورك باستخدام التحسينات التالية:

  1. قم بخدمتها عبر Quicq CDN ، الذي يتم تشغيله بواسطة Google Cloud. يتيح ذلك للزوار تنزيل صورك من موقع CDN الأقرب إليهم.
  2. قم بتغيير حجمها إلى الحجم الأمثل بناءً على جهاز كل زائر.
  3. قم بضغطها لتقليل حجم ملفها.
  4. قم بتحويلها إلى تنسيق صورة محسن يقدم أحجامًا أصغر من JPEG و PNG. يدعم Quicq كلاً من WebP و AVIF ، وهو تنسيق أحدث للصور يمكنه تقديم أحجام ملفات أصغر من WebP. يعد دعم AVIF ملحوظًا حيث لا تدعم جميع الخدمات تنسيق الصورة الأحدث هذا حتى الآن.

ستؤدي كل هذه التغييرات إلى أوقات تحميل أسرع للصور (وبالتالي أوقات تحميل موقع الويب).

لماذا نستخدم التحسين الديناميكي للصور في الوقت الحقيقي؟

يوفر Quicq تحسينًا للصور في الوقت الفعلي

كما ذكرت أعلاه ، يستخدم Quicq نهج تحسين ديناميكي يعمل على تحسين الصور في الوقت الفعلي.

أي ، بدلاً من تحسين الإصدار الأصلي من الصورة على خادم موقع WordPress الخاص بك مثل مكون إضافي للتحسين التقليدي ، لا تلمس Quicq الصورة الأصلية ولكنها تؤدي عملياتها في "السحابة" بدلاً من ذلك.

هناك بعض المزايا لنهج التحسين الديناميكي هذا.

الشيء المهم هو أنه يمكنك التأكد من أن كل زائر يرى صورة محسّنة بناءً على أبعاد أجهزته الفعلية.

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

ولكن إذا كان الزائر يتصفح شاشة ضخمة بدقة 4K ، فيمكن لموقعك تقديم نسخة أكبر من الصورة بسلاسة للتأكد من تمتعهم بتجربة مستخدم رائعة أيضًا.

نظرًا لأن Quicq يستخدم نهجًا ديناميكيًا سريعًا للتحسين ، فإنه قادر على تقديم حجم الصورة الأمثل وتنسيقها لكل مستخدم على حدة.

هذا الأسلوب الديناميكي مفيد أيضًا إذا كنت تريد معالجة صورك لأنه يمكنك إجراء تغييرات على الصورة دون الحاجة إلى تحرير ملف الصورة الأصلي أو تحميل نسخة جديدة من الصورة.

على سبيل المثال ، بمجرد معالجة عنوان URL الخاص بالصورة ، يمكنك إجراء عمليات المعالجة التالية:

  • قص الصورة بطرق مختلفة.
  • أضف علامة مائية.
  • طمس الصورة.
  • تغيير أبعاد الصورة.
  • اضبط جودة الصورة. على سبيل المثال ، ربما تريد استخدام صورة عالية الدقة غير مضغوطة في بعض الأماكن. يمكنك القيام بذلك بسهولة.
  • استخدم تنسيق صورة مختلف. على سبيل المثال ، WebP أو AVIF.

مع Quicq ، كل ما تفعله هو تحميل الصورة الأصلية مرة واحدة. بعد ذلك ، يمكنك إجراء كل هذه المعالجات عن طريق إضافة بعض معلمات الاستعلام الإضافية إلى عنوان URL.

على سبيل المثال ، إليك رابط الصورة الأصلية:

https://cdn.quicq.io/wpmayor/2022/01/pexels-andrea-piacquadio-837358.jpg

وإليك رابط يقوم بقص الصورة إلى مربع 1000 × 1000:

https://cdn.quicq.io/wpmayor/2022/01/pexels-andrea-piacquadio-837358.jpg؟w=1000&h=1000&c=1

سأعرض لكم بعض الأمثلة الحقيقية في القسم التالي.

التدريب العملي مع Quicq: كيفية تحسين صور WordPress

الآن بعد أن عرفت ما يفعله Quicq ، دعنا نبدأ عمليًا وسأوضح لك كيف يعمل على WordPress.

مرة أخرى ، لا يقتصر الأمر على WordPress ، ولكنه يقدم مكونًا إضافيًا مخصصًا لـ WordPress يجعل من السهل جدًا استخدامه مع موقع WordPress الخاص بك.

1. التسجيل للحصول على حساب Quicq مجاني

للبدء ، ستحتاج إلى التسجيل للحصول على حساب Quicq / Afosto مجاني. سأتحدث عن الأسعار بعد ذلك ، ولكن هناك خطة مجانية سخية إلى الأبد وستحصل أيضًا على نسخة تجريبية مجانية غير محدودة لمدة 14 يومًا (بدون الحاجة إلى بطاقة ائتمان).

بمجرد التسجيل لحسابك ، انقر فوق الزر بدء الإصدار التجريبي المجاني بجوار Quicq في لوحة معلومات Afosto:

ابدأ الإصدار التجريبي المجاني من Quicq

2. إنشاء Quicq CDN

بعد ذلك ، تحتاج إلى إنشاء Quicq CDN ، وهو في الأساس ما يخدم الصور ويحسنها لموقعك.

بمجرد بدء تجربة Quicq الخاصة بك ، يجب أن تظهر مهمة للقيام بذلك تلقائيًا في قائمة المهام بلوحة معلومات Afosto الرئيسية. إذا لم تره ، يمكنك أيضًا الوصول إلى هذه الواجهة بالنقر فوق رمز الترس بجوار Quicq:

قم بإنشاء CDN

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

على سبيل المثال ، إذا كنت أقوم بإنشاء واحد لـ WP Mayor ، فسأقوم بعمل عنوان URL wpmayor .

بعد ذلك ، أدخل عنوان URL المباشر لصورة موجودة على موقعك وانقر فوق التحقق من موقع الويب:

أدخل عنوان URL الخاص بـ CDN

يجب أن يكتشف Quicq تلقائيًا أنك تستخدم WordPress وأن ينشئ المسار إلى صورك ، والذي يجب أن يكون مجلد التحميلات داخل مجلد wp-content .

لديك أيضًا خيار توسيع الإعدادات المتقدمة ، والتي تتيح لك التحكم في سلوك ذاكرة التخزين المؤقت لصورك. الافتراضي هو 365 يومًا ، والذي يجب أن يكون جيدًا. ولكن يمكنك تغيير هذا إذا رغبت في ذلك.

لإنهاء الأمور ، انقر فوق الزر " إضافة ":

الانتهاء من إنشاء Quicq CDN الخاص بك

3. قم بتثبيت البرنامج المساعد Quicq وإضافة مفتاح URL

بمجرد إنشاء حسابك وإعداد CDN الخاص بك ، يمكنك تثبيت البرنامج المساعد Quicq المجاني من WordPress.org على موقعك. سيتيح لك ذلك دمج موقع WordPress الخاص بك مع صورة CDN التي أنشأتها للتو.

بمجرد تنشيط المكون الإضافي ، انتقل إلى منطقة Quicq الجديدة في لوحة معلومات WordPress الخاصة بك وأضف مفتاح URL الذي أدخلته في عملية الإعداد. أي جزء URL الخاص بـ CDN الذي تمكنت من تخصيصه.

على سبيل المثال ، هذا هو wpmayor .

بعد ذلك ، حدد تبديل Quicq النشط ثم حفظ التغييرات لجعله مباشرًا:

تكوين البرنامج المساعد QuicQ WordPress

وهذا كل شيء! يجب أن يبدأ موقع WordPress الخاص بك الآن في تحميل صوره عبر Quicq CDN ، والذي يتضمن تحسينات للصور في الوقت الفعلي.

شيء واحد بسيط أود ملاحظته هنا هو أنني لا أعتقد أن منطقة البرنامج المساعد Quicq يجب أن تكون منطقة قائمة ذات مستوى أعلى في لوحة معلومات WordPress. نظرًا لأنها مجرد عملية إعداد لمرة واحدة ، أعتقد أنه سيكون من الأفضل نقلها إلى قائمة فرعية مثل الإعدادات → Quicq لمساعدة المستخدمين في الحصول على منطقة إدارة أنظف.

4. معالجة الصور باستخدام معلمات URL (عند الحاجة)

بالنسبة لمعظم مواقع WordPress ، لا تحتاج إلى فعل أي شيء آخر للحصول على صور محسّنة. في هذه المرحلة ، يقوم Quicq بالفعل بإجراء التحسينات التالية تلقائيًا:

  • ضغط / تغيير حجم الصور بالطريقة المثلى بناءً على جهاز كل مستخدم.
  • تحويل الصور إلى تنسيق WebP أو AVIF حسب الأفضل.
  • خدمة الصور عبر Quicq's Google Cloud CDN.

ومع ذلك ، كما ذكرت سابقًا ، فإن أحد الأشياء الرائعة حول نهج الوقت الفعلي لـ Quicq هو أنه يمكنك أيضًا معالجة صورك فقط عن طريق إضافة بعض معلمات الاستعلام إلى عنوان URL.

يمكنك التحقق من صفحة التوثيق هنا للحصول على نظرة تفصيلية ، ولكن دعنا نتعرف على بعض الأمثلة السريعة لكيفية عمل ذلك.

لنفترض أن لديك صورة عريضة تستخدمها في جزء واحد من موقعك. الآن ، تريد استخدام نفس الصورة ، ولكن قصها في صورة مربعة.

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

باستخدام معالجة الصور في الوقت الفعلي لـ Quicq ، يمكنك إجراء الاقتصاص فقط عن طريق إضافة معلمة URL ( ودون التأثير على الصورة الأصلية ).

ها هي الصورة الأصلية وعنوان URL:

الصورة الأصلية

ثم إليك ما تبدو عليه الصورة عند اقتصاصها إلى مربع 1000 × 1000 بكسل بإضافة معلمة URL هذه - ?w=1000&h=1000&c=1 :

الصورة التي تم اقتصاصها

هذا مثال آخر ...

لنفترض أنك تريد الذهاب إلى أبعد من ذلك وتشويش الصورة ، بالإضافة إلى اقتصاصها في مربع.

كل ما عليك فعله هو إضافة معلمة التمويه وتعيين مقدار التمويه الذي تريد استخدامه (من 0 إلى 3) وستكون صورتك غير واضحة:

صورة مقصوصة وغير واضحة

التسعير Quicq

لدى Quicq خطة مجانية سخية إلى الأبد ثم خطط مدفوعة للمستخدمين الذين يحتاجون إلى المزيد من الميزات.

تتيح لك الخطة المجانية تحسين ما يصل إلى 100000 صورة شهريًا * وخدمة 25 جيجابايت من عرض النطاق الترددي لـ CDN شهريًا إلى الأبد ، وهو ما يجب أن يكون أكثر من كافٍ لموقع صغير. على سبيل المثال ، إذا كان لديك موقع كتيب / محفظة أساسي أو مدونة صغيرة ، فلا أعتقد أنك ستتجاوز ذلك أبدًا.

* تذكر أن تحسينات الصور تحدث ديناميكيًا وليس مرة واحدة مثل المكون الإضافي التقليدي ، لذلك يتم اعتبار الصورة بمثابة تحسين واحد في كل مرة يتم تحميلها.

إذا كنت بحاجة إلى الخطط المدفوعة ، فستتم محاسبتك على مقياسين:

  • التحسينات - عدد تحسينات الصورة التي تجريها شهريًا.
  • نقل البيانات - مقدار النطاق الترددي الذي تستهلكه صورك عند تقديمها عبر شبكة CDN.

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

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

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

لمعرفة ما ستدفعه ، يمكنك استخدام الآلة الحاسبة في صفحة الأسعار.

إذا لم تكن متأكدًا من استخدام موقعك ، فيمكنك فقط استخدام المستوى المجاني للبدء أو هناك أيضًا نسخة تجريبية مجانية مدتها 14 يومًا لخطط الاستخدام الأعلى ، والتي من المفترض أن تمنحك فهمًا جيدًا لاستخدام موقعك:

التسعير Quicq

إذا كنت بحاجة إلى الخطط المميزة ، فيمكنك الحصول على خصم 20٪ على أول شهرين لك على جميع الباقات باستخدام رمز القسيمة الحصري الخاص بنا:

20٪ خصم
كويك
كويك
احصل على خصم 20٪ على أول شهرين لك على جميع حزم QuicqShow More
احصل على خصم 20٪ على أول شهرين لك على جميع حزم Quicq Show Less

الأفكار النهائية على Quicq

بشكل عام ، أعلم أن الكثير من المواقع تنتقل إلى نهج تحسين الصور في الوقت الفعلي هذا.

أعتقد أن هذا النهج لديه الكثير ليقدمه بسبب المرونة التي يوفرها لك فيما يتعلق بمعالجة صورك والتأكد من أن كل زائر يرى صورة تم تحسينها لموقفه الفريد.

لا يعد Quicq هو المكون الإضافي الأول الذي يجلب هذا إلى WordPress ، ولكنه يحتوي على بعض الأشياء التي تعمل من أجله:

  1. لديها فئة مجانية سخية للغاية. إنه يحتوي على أعلى مستوى مجاني رأيته.
  2. يعجبني نموذج التسعير الخاص بالخيارات المميزة لأنك تدفع فقط بناءً على استخدامك الفعلي. بينما يجعل التسعير أكثر تعقيدًا ، أعتقد أنها طريقة "أكثر إنصافًا" للفواتير. بالإضافة إلى ذلك ، يمكنك دائمًا استخدام الإصدار التجريبي غير المحدود لمدة 14 يومًا لمعرفة الاستخدام الفعلي لموقعك إذا لم تكن متأكدًا مما ستدفعه.
  3. لا يزال يتيح لك إجراء عمليات معالجة أخرى للصور مثل الاقتصاص والتشويش وما إلى ذلك. تركز معظم مكونات WordPress الإضافية الأخرى التي أدركها فقط على الأداء أو تمنحك فقط إمكانية الوصول إلى العلامات المائية ، لذلك من الرائع أن يتجاوز Quicq ذلك. من المحتمل ألا يستخدم معظم المستخدمين العاديين هذه ، لكنها لطيفة للمستخدمين المتقدمين والمطورين.

إذا كنت ترغب في تجربته ، فإن Quicq لديه خطة مجانية سخية إلى الأبد بالإضافة إلى إصدار تجريبي مجاني غير محدود لمدة 14 يومًا لمساعدتك في معرفة استخدامك. يمكنك النقر فوق الأزرار أدناه للبدء:

موقع Quicq
صفحة WordPress.org