كيفية استخدام العرض والارتفاع الصريحين على عناصر الصورة

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

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

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

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

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

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

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

علاوة على ذلك، يعد التحول التراكمي للتخطيط (CLS) أحد المقاييس الرئيسية في مؤشرات الويب الأساسية لـ Google . فهو يقيس حركة المحتوى أثناء تحميل صفحتك.

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

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

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

إذا كان على المتصفح معرفة أبعاد صورك، فسيزيد ذلك من عبء العمل ويؤدي إلى إبطاء أوقات التحميل.

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

كيفية استخدام العرض والارتفاع الصريحين على الصور في ووردبريس

الآن، دعونا نلقي نظرة على كيفية استخدام العرض والارتفاع الصريحين على عناصر الصورة في WordPress. في الخطوتين التاليتين، سنوضح لك كيفية إضافة الأبعاد المفقودة إلى صورك.

الخطوة 1: تحديد الصور ذات الأبعاد المفقودة
الخطوة 2: أضف أبعاد الصورة يدويًا أو باستخدام مكون إضافي

الخطوة 1: تحديد الصور ذات الأبعاد المفقودة

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

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

ولحسن الحظ، من السهل جدًا التعرف على هذه الصور. الخطوة الأولى هي إجراء اختبار الأداء باستخدام PageSpeed Insights :

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

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

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

إذا نقرت على عناصر الصورة ليس لها عرض وارتفاع واضحان، فسترى أيضًا الصور المحددة التي تحتاج إلى إصلاح:

يمكنك النقر على عناوين URL المرفقة لإلقاء نظرة فاحصة على كل صورة.

الخطوة 2: أضف أبعاد الصورة يدويًا أو باستخدام مكون إضافي

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

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

على سبيل المثال، سيبدو رمز HMTL لملف الصورة الخاص بك كما يلي:

<img src="chocolatecake.jpg" width="640" height="360" alt="Chocolate Cake.">

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

بمجرد تثبيت المكون الإضافي وتنشيطه على موقعك، انتقل إلى الإعدادات > WP Rocket وحدد علامة التبويب الوسائط:

بعد ذلك، قم بالتمرير لأسفل الصفحة وحدد المربع بجوار إضافة أبعاد الصورة المفقودة:

وأخيرا، انقر على حفظ التغييرات. سيقوم WP Rocket بفحص HTML الخاص بموقعك للعثور على الصور والسمات width المفقودة height. سيقوم بعد ذلك بجلب أحجام الصور باستخدام وظيفة PHP getimagesizeو إضافة السمات باستخدام تلك القيم.

أفضل الممارسات الأخرى لإضافة الصور إلى WordPress

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

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

على سبيل المثال، يمكن لـ Optimole تغيير حجم صورك فورًا عند تحميلها. كما أنه يختار أحجام الصور المناسبة لعرضها، اعتمادًا على المتصفح والجهاز الخاص بكل زائر: