الصور التكيفية لـ WordPress: ما هي وكيفية استخدامها
هل تفكر في استخدام الصور التكيفية لـ WordPress؟ 🤓
يعد استخدام الكثير من العناصر المرئية عالية الجودة أمرًا ضروريًا إذا كنت ترغب في الحفاظ على تفاعل المستخدمين عبر الإنترنت مع محتوى موقع الويب الخاص بك.
ومع ذلك، إذا لم تكن حذرًا، فقد تؤدي ملفات الصور الثقيلة والثابتة إلى إعاقة أداء موقعك وإنشاء تجربة مستخدم سيئة (UX) على أجهزة معينة. وهذا بدوره يمكن أن يمنع الزائرين من قضاء الوقت على صفحاتك.
والخبر السار هو أنه يمكنك استخدام الصور التكيفية لـ WordPress لمنع حدوث ذلك. عند استخدام الصور التكيفية، يتم تحديد حجم العناصر المرئية الثابتة ديناميكيًا ومن المحتمل أن يتم اقتصاصها بناءً على جهاز كل زائر.
بالإضافة إلى ذلك، ستحصل دائمًا على أحجام ملفات مثالية لمساعدة موقعك على العمل بشكل لا تشوبه شائبة في جميع الأوقات.
نظرة عامة على الصور التكيفية لـ WordPress
قبل أن نعرض لك كيفية إنشاء صور قابلة للتكيف لـ WordPress، من المهم أن تفهم ما هي. باختصار، يشير مصطلح “التكيف” إلى قدرة الصورة على التكيف والتوافق مع أي جهاز.
👉 يمكن أن يساعدك المكون الإضافي للصور التكيفية في WordPress على القيام ببعض الأشياء تلقائيًا:
- قم بتغيير حجم كل صورة بناءً على جهاز الزائر. على سبيل المثال، سيرى الشخص الذي يتصفح على شاشة سطح مكتب بدقة 4K صورة ذات أبعاد أكبر من الشخص الذي يتصفح على هاتفه الذكي.
- قم بضغط حجم ملف الصورة على النحو الأمثل بناءً على جهاز المستخدم لضمان بقاء موقع الويب الخاص بك سريعًا.
- قم بقص صورة لتحسين نقطة التركيز الخاصة بها بناءً على حجم شاشة الزائر (هذا أمر اختياري ولا تحتاج إلى تمكين هذه الميزة التكيفية إذا كنت لا تريد ذلك).
اعتمادًا على كيفية تكوين المكون الإضافي للصور التكيفية في WordPress، يمكنك فقط عرض نفس الصورة بأحجام مختلفة بناءً على جهاز الزائر.
أو يمكنك أيضًا إعداد نوع من وظائف “الاقتصاص الذكي” من الأعلى لاقتصاص الصورة تلقائيًا بناءً على حجم شاشة الزائر.
إذًا – ما هو الاقتصاص الذكي التكيفي؟
حسنًا، مع الاقتصاص “العادي” أو “غير التكيفي”، عادةً ما يتم اقتصاص الصورة للتركيز على المركز، مما قد يؤدي إلى مواقف محرجة.
ومع ذلك، باستخدام الاقتصاص الذكي، يمكنك قص الصورة تلقائيًا للتركيز على الجزء الأكثر أهمية.
فيما يلي مثال لما قد يبدو عليه الاقتصاص الذكي التكيفي، إذا قمت بتمكينه:
من المهم أيضًا ملاحظة أن الصور التكيفية هي عنصر أساسي في التصميم سريع الاستجابة. ومع ذلك، هذا لا يعني أن “التكيف” و”الاستجابة” هما نفس الشيء.
سيتم تغيير حجم الصور المستجيبة ببساطة على أحجام مختلفة للشاشات. على النقيض من ذلك، ستغير الصور التكيفية أحجام ملفاتها واقتصاصها تلقائيًا لتوفير تجربة مرئية أفضل.
لماذا تعتبر الصور التكيفية لـ WordPress مهمة
كما ذكرنا من قبل، يعد استخدام الصور التكيفية لـ WordPress أمرًا بالغ الأهمية.
وذلك لأن أكثر من نصف مستخدمي الإنترنت في الولايات المتحدة يتصفحون الإنترنت باستخدام الأجهزة المحمولة [1]. علاوة على ذلك، يبدو أن هذا العدد يتزايد كل عام.
مع أخذ ذلك في الاعتبار، سيكون من الحكمة لكل مالك موقع ويب إعطاء الأولوية لتصميم الأجهزة المحمولة. إذا كانت الصور كبيرة الحجم أو بطيئة التحميل تلحق الضرر بتجربة الهاتف المحمول، فقد يكون ذلك كارثيًا لموقعك (وشركتك).
قد تؤدي تجربة الهاتف المحمول السيئة إلى الإضرار بسمعتك ومصداقيتك. أو ما هو أسوأ من ذلك، قد يتسبب ذلك في هجر المستخدمين لموقعك، مما يؤدي إلى خسارة المبيعات والتحويلات.
ومع ذلك، حتى لو قررت اتباع نهج تصميم “الهاتف المحمول أولاً”، فإن ترك مستخدمي سطح المكتب والكمبيوتر المحمول خلفك قد يكون كارثيًا بنفس القدر.
ولهذا السبب فإن التكيف هو أفضل رهان لك. بهذه الطريقة، لن تضطر إلى التضحية بأي من الديموغرافيات، ويمكنك الوصول إلى أكبر عدد ممكن من الأشخاص.
العديد من سمات WordPress “تستجيب” بشكل افتراضي. وهذا يعني أنه سيتم تعديل عناصر مثل القوائم والصور لتناسب شاشات معينة. ومع ذلك، لا تستطيع هذه السمات عادةً اقتصاص الصور أو تحسينها لجعلها قابلة للتكيف حقًا.
كيفية إنشاء صور قابلة للتكيف لـ WordPress
للحصول على أسهل طريقة لإعداد صور قابلة للتكيف لـ WordPress، يمكنك استخدام المكون الإضافي freemium Optimole:
⚙️ فيما يلي بعض الميزات الرئيسية لـ Optimole:
- أتمتة كاملة للصور التكيفية
- ضغط الصور التلقائي
- التحسين على أساس جهاز المستخدم
- شبكة توصيل المحتوى (CDN) المدمجة التي تدعمها Amazon CloudFront
- دعم لجميع أنواع الصور
- تحسين أحجام ملفات الصور
- الاقتصاص الذكي
- تحميل كسول
هذه مجرد النقاط البارزة، ولكنك ستتمكن من الوصول إلى المزيد من الميزات إذا قمت بالترقية إلى خطة Optimole المتميزة. الآن دعونا نرى كيف يمكنك إنشاء صور قابلة للتكيف لـ WordPress باستخدام هذا البرنامج المساعد:
- الخطوة 1: الاتصال بـ Optimole
- الخطوة 2: تكوين إعدادات Optimole
الخطوة 1: الاتصال بـ Optimole
بعد تثبيت وتنشيط Optimole في لوحة تحكم WordPress، يجب أن تشاهد الشاشة التالية:
انقر فوق إنشاء حسابك وتوصيله أو انتقل مباشرةً إلى صفحة تسجيل Optimole عبر الرابط هنا الموجود أعلى الزر:
بمجرد قيامك بالتسجيل للحصول على حساب Optimole، ستتلقى رسالة تأكيد عبر البريد الإلكتروني. انتقل إلى صندوق الوارد الخاص بك لتحديد موقع الرسالة والتحقق من حسابك. ستتمكن بعد ذلك من الوصول إلى لوحة تحكم Optimole:
بعد ذلك، انسخ مفتاح API الجديد الخاص بك وارجع إلى لوحة تحكم WordPress الخاصة بك. الصق المفتاح وانقر على الاتصال بـ Optimole :
عند الانتهاء من ذلك، سيبدأ Optimole تلقائيًا في تحسين صورك.
الخطوة 2: تكوين إعدادات Optimole
سوف يبدأ Optimole العمل على الفور. ومع ذلك، نوصي بتكوين البرنامج المساعد وفقًا لمواصفاتك. للقيام بذلك، توجه إلى علامة التبويب إعدادات Optimole :
ضمن عام، استكشف خياراتك وقم بتبديل أي إعدادات إضافية ترغب في تمكينها. انقر على حفظ التغييرات.
ثم انتقل إلى القائمة المتقدمة:
هنا، على الأقل، نوصي بالانتقال إلى علامة التبويب “تغيير الحجم ” لتشغيل الاقتصاص الذكي. تضمن هذه الميزة استخدام “القسم الأكثر إثارة للاهتمام” في الصورة عند الاقتصاص، مما يجعلها قابلة للتكيف مع الأجهزة المختلفة.
بمجرد الانتهاء من جميع الإعدادات، احفظها وحاول معاينة موقعك على أجهزة مختلفة. هذا كل شيء!
المصدر: themeisle
قد يهمك:
