كيفية تقديم الصور المُقاسة بسهولة في ووردبريس (خطوة بخطوة)

هل سبق لك أن زرت موقعًا وغادرت خلال ثوانٍ لأن الصور لم'تُحمَّل بسرعة كافية؟ هذا' بالضبط ما قد يواجهه زوارك إذا لم'تُقَدِّم صورًا مُقاسة على موقع WordPress الخاص بك. 

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

لكن لا تقلق، لقد غطيناك! اتبع الدرس السريع أدناه لتعلم كيفية تقديم الصور ذات الحجم المناسب بسهولة!

لماذا يجب عليك تقديم صور ذات حجم مناسب؟

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

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

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

من المهم استخدام صور مُقاسة لأن عدم القيام بذلك قد يؤدي إلى عدة مشكلات:

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

دليل خطوة بخطوة

1. استخدم أدوات تحرير الصور

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

إذا كنت' تبحث عن بديل مجاني، فإن الأدوات عبر الإنترنت مثل PhotoPea خيار جيد. ولكن لهذا البرنامج التعليمي، سنركز على Photoshop بسبب ميزاته الشاملة.

لإعادة تحجيم صورة قبل التحميل، اتبع البرنامج التعليمي أدناه:

• افتح صورتك في Photoshop
• انقر على Image علامة التبويب واختر Image Size

• في مربع الحوار الذي يظهر، غيّر حجم الصورة وفقًا لمتطلبات عرض صفحة الويب. 

على سبيل المثال، إذا كانت صورتك الأصلية بحجم 1281 × 493 بكسل وتريد تكبيرها إلى 3600 × 2400 بكسل، أدخل الأبعاد الجديدة. 

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

• انقر موافق لتطبيق التغييرات. تم الآن تغيير حجم صورتك.
• لحفظ الصورة، افتح ملف تبويب واختر تصدير.

• انقر تصدير كـ واختر أي تنسيق ملف واضبط الإعدادات لتحقيق أصغر حجم ملف ممكن دون فقدان جودة الصورة كثيرًا.

2. استفد من أحجام الصور المدمجة في WordPress'

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

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

لنبقي الأمور بسيطة، لن'نبدأ بدليل أساسي أدناه:

• حمّل صورتك إلى مشاركتك في ووردبريس. 

• اختر الصورة، ثم انقر استبدال واختر فتح مكتبة الوسائط من القائمة.

• في الشريط الجانبي، انقر تحرير الصورة.

• ستُنقَل' إلى محرر الصورة. انقر على تحجيم لتغيير حجم صورة

• أدخل البُعد الجديد لصورتك. على سبيل المثال، غيّرها من 1198 × 744 بكسل إلى 805 × 500 بكسل. النسبة الأبعاد مقيدة، لذا ستُضبط القيمة الأخرى تلقائيًا بناءً على العرض أو الارتفاع الذي تدخله.

• انقر على تعديل الزر لتطبيق التغييرات.
• تم تعديل حجم صورتك الآن وجاهزة للاستخدام في مشاركتك.

3. استخدم الإضافات

• قم بتثبيت وتفعيل WP Meta SEO على موقع WordPress الخاص بك.

• من لوحة تحكم WordPress الخاصة بك، انتقل إلى WP Meta SEO > محرر الصور.

• افتح إعدادات تحسين محركات البحث للصور & تعديل حجم HTML.

• فعّل خيار تعديل حجم الصورة الديناميكي للسماح لـ WP Meta SEO بإعادة تحجيم الصور تلقائيًا بناءً على حجم العرض.

• حدد قيم العرض والارتفاع القصوى للتحكم في كيفية إعادة تحجيم الصور في الواجهة الأمامية.

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

لمزيد من التفاصيل، يمكنك استكشاف الوثائق الرسمية ونظرة عامة على الميزات:

• WP Meta SEO ميزة تحسين صور محركات البحث & تعديل حجم HTML
• ديناميكي توثيق تعديل حجم الصورة

4. نفّذ الصور المتجاوبة باستخدام السمة srcset

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

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

إذا كنت تريد معرفة كيفية تقديم صور مُقاسة يدويًا، اتبع التعليمات أدناه:

• افتح ملف HTML الخاص بالموقع' عبر محرر الشيفرة الخاص بك.
• حدد الوسم للصورة التي تريد تحسينها.

• حرّر الوسم وأضف سمة srcset، كما هو موضح في الصورة. 

في هذا المثال، 100w و 400w تشير إلى العرض الفعلي لكل صورة. سيستخدم المتصفح هذه المعلومات لتحديد الصورة التي يجب تحميلها لجهاز المستخدم'.

• احفظ التغييرات وأعد تحميل موقعك لرؤية النتيجة.

كيفية التعرف على الصور غير المقاسة

بعد تعلم كيفية تحسين الصور، it's من المهم أيضًا تحديد أي الصور لا تزال بحاجة إلى تعديل الحجم وأيها تم تحسينها بالفعل.

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

1. باستخدام Google PageSpeed Insights

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

للقيام بفحص سريع، يمكنك اتباع التعليمات أدناه:

• افتح Google PageSpeed Insight على https://pagespeed.web.dev.

• الصق الكامل URL لصفحتك في حقل الإدخال.
• انقر Analyze لبدء العملية.
• انتظر حتى ينتهي. سيقدم لك PSI بعد ذلك تقرير الأداء.
• قم بالتمرير لأسفل للعثور على إدخال معنون بـ تحجيم الصور بشكل صحيح.
• إذا كان موجودًا، سترى قائمة بالصور غير المقاسة الموجودة على موقعك.

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

• تقديم الصور بصيغ الجيل التالي, مثل WebP، AVIF، JPEG XR، أو JPEG2000.
• تغيير حجم الصور بشكل صحيح لتلبية متطلبات الأحجام المختلفة، مثل تغيير الحجم إلى 1000 × 1000 بكسل لصفحة تفاصيل المنتج، أو 400 × 400 بكسل لصفحة قائمة المنتجات.
• استخدام lazy loading، بحيث يتم تحميل الصور الظاهرة على شاشة المستخدم' فقط فورًا.

2. إجراء تدقيق موقع منتظم

إجراء تدقيقات منتظمة للموقع يزودك برؤى عميقة حول صحة موقعك' وأدائه.

عند التدقيق، حاول إعطاء الأولوية لمراجعة بنية موقعك وتجربة المستخدم لاكتشاف أي مشكلات محتملة.

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

أيضًا، انتبه إلى ما إذا كانت الصور مُقاسة بشكل صحيح. إذا لم تكون مُقاسة'، لا' تنسَ متابعة البرنامج التعليمي أعلاه.

الاستنتاج

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

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