كيف تخدم الصور المحجوبة في WordPress (عنصر في GTmetrix)

تحتاج إلى عرض الصور في WordPress?


هذا يعني أنك تحتاج إلى تغيير حجم الصور الكبيرة لتكون أصغر.

GTmetrix يخبرك بالصور التي يجب تغيير حجمها والأبعاد الصحيحة التي يجب اقتصاصها أو تغيير حجمها. بعد ذلك ، قم بتغيير حجم (تغيير حجم) الصورة واستبدل الصور القديمة بأخرى جديدة.

قدّم صورًا بحجمها

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

هل يمكنني استخدام المكوّن الإضافي لتغيير حجم الصور تلقائيًا?
غير محتمل. يمكنك تعيين أقصى عرض + ارتفاع في معظم الإضافات لتحسين الصورة. لكن المجالات المختلفة لموقعك تتطلب أبعادًا محددة (يجب تغيير حجم الصور وفقًا لذلك).

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

1. البحث عن صور كبيرة الحجم في GTmetrix

شغّل صفحة من خلال GTmetrix واعرض أخطاء عرض الصور التي تم قياسها في علامة التبويب PageSpeed. وسّع توصياتهم وسترى الأبعاد الصحيحة التي يجب تغيير حجمها لكل صورة. ضع في اعتبارك أن GTmetrix سيعرض فقط أخطاء الصفحة الواحدة التي تختبرها.

تخدم الصور المقاسة GTmetrix

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

نسخ عنوان الصورة

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

تحجيم مقابل الصورة غير المحجوبة

2. تغيير حجم الصور لتصحيح الأبعاد

قم بتنزيل الصورة القديمة وافتحها في أداة تحرير الصور التي تختارها (أستخدم برنامج جيمب). قم بتغيير حجم و / أو اقتصاص الصورة إلى الأبعاد الموصى بها من قبل GTmetrix. تتيح لك العديد من أدوات تحرير الصور ضغط الصور وإزالتها بيانات EXIF الأمر الذي سيجعل تحميل الصورة أسرع.

تحجيم الصورة GIMP

يمكنك أيضًا اقتصاص الصور وتغيير حجمها مباشرة في WordPress:

تحجيم الصورة في WordPress Media Editor

3. استبدل الصورة القديمة بالصورة الجديدة

قم بتحميل صورتك الجديدة إلى WordPress ، ثم استبدل الصورة القديمة بالصورة الجديدة.

صورة القطعة غير المقاسة

صورة القطعة المصغرة

4. أعد اختبار الصفحة في GTmetrix

أعد اختبار الصفحة في GTmetrix ولم يكن من المفترض أن تعرض أخطاء الصورة التي تم تغيير حجمها بعد الآن.

100٪ قدّم صورًا مُقلَّصة

5. قدّم صورًا بأحجام أكبر على الجوّال

يختلف عرض الصور التي تم تغيير حجمها على الجوّال.

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

الخطوة 1: شغّل موقعك من خلال اختبار Android لـ GTmetrix:

اختبار GTmetrix موبايل

قدّم صورًا بحجمها على الجوّال

الخطوة 2: اعثر على أبعاد خلفية هاتفك المحمول المقدمة من GTmetrix:

الحد الأقصى لعرض الخلفية

الخطوه 3: قم بتثبيت مكون إضافي Adaptive Images من ShortPixel أو صور متكيفة.

صور ShortPixel التكيفية

الخطوة 4: قم بتعيين الأبعاد التي توفرها GTmetrix مثل الحد الأقصى لعرض الخلفية.

الحد الأقصى للعرض في الخلفية

الخطوة الخامسة: أعد تشغيل موقعك من خلال اختبار الجوّال لـ GTmetrix للتأكد من عدم وجود أخطاء.

اختبار GTmetrix موبايل

الخطوة الخامسة: تكوين الإعدادات الأخرى في المكوّن الإضافي للصور التكيفية (يتضمن ShortPixel دعم WebP ، وصور التحميل البطيئة ، والاقتصاص الذكي ، وإزالة بيانات EXIF). هذه يمكن أن تساعد أيضًا.

6. تغيير حجم الصور على صفحات متعددة

إذا كنت تستخدم الصورة نفسها على صفحات متعددة وتحتاج إلى تغيير الحجم ، يمكنك تغيير حجم الصورة ونسخها بتنسيق HTML ثم استخدام المكوّن الإضافي Better Search Replace لإصلاحها على صفحات متعددة.

الخطوة 1: تحميل هذا أفضل بحث استبدال البرنامج المساعد.

الخطوة 2: انسخ HTML للصورة القديمة والصقها في حقل “البحث عن” في المكوّن الإضافي Better Search Replace. يمكنك استخدام ال محرر نصوص ووردبرس] لرؤية HTML للصورة. ملاحظة: سيحل Better Search Replace صورة فقط إذا كانت تحتوي على HTML الدقيق الذي أدخلته في المكون الإضافي.

الخطوه 3: انسخ HTML للصورة الجديدة والصقها في حقل “استبدال بـ”.

تخدم HTML الصورة تحجيمها

الخطوة 4: حدد الجداول (مثل المشاركات) التي تريد مسحها وإلغاء تحديد المسح الجاف.

الخطوة الخامسة: انقر على “بحث / استبدال” وسوف يستبدل البرنامج المساعد الصورة القديمة بالصورة الجديدة.

7. إنشاء ورقة الغش أبعاد الصورة

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

مثال:

  • صور المنزلق: 1900 (عرض) × 400 (ارتفاع)
  • صور دائري: 115 (ث)
  • صور القطعة: 414 (w)
  • صور نشر مدونة Fullwidth: 680 (w)
  • الصور المميزة: 250 (عرض) × 250 (ارتفاع)
  • صورة Yoast Facebook OG: 1200 (عرض) × 628 (ارتفاع) – الخطوة 11
  • Yoast Twitter OG image 1024 (w) x 512 (h) – الخطوة 11

مستطيل بعرض 680 بكسل

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

8. وورد الإضافات لخدمة الصور تحجيمها

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

سحق

قم بتغيير حجم الصور

تخيل

تغيير حجم الصور تخيل

محسن صورة EWW

تغيير حجم الصور EWWW

تحسينات الصور الأخرى

كتبت تعليمي كامل حول تحسين الصور في WordPress الذي يتضمن:

  • ضغط الصور
  • خدمة الصور من خلال CDN
  • تغيير حجم ملفات GIF
  • إزالة بيانات EXIF
  • كسول تحميل الصور ومقاطع الفيديو
  • Cloudflare Mirage ، البولندية ، حماية Hotlink

تحسينات الصورة في GTmetrix

البحث عن المزيد من دروس سرعة ووردبرس]?
فيما يلي دروس أخرى كتبتها:

  • كيفية إعداد WP Rocket (البرنامج المساعد لذاكرة التخزين المؤقت أوصي)
  • Cloudways vs. SiteGround (أوصي بأكبر مضيفين)
  • كيف حصلت على نتائج GTmetrix 100٪ (دليل سرعة WordPress)

لدي أيضًا فيديو رائع حول تحسين سرعة WordPress:

أسئلة مكررة

&# x2705 ؛ هل يمكنني استخدام المكوّن الإضافي لخدمة الصور التي تم تغيير حجمها?

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

&# x2705 ؛ ما هي أسهل طريقة لتغيير حجم الصورة?

قم بتنزيل الصورة ، وقم بقصها / تغيير حجمها في برنامج مثل Photoshop أو Gimp ، ثم استبدل الصورة القديمة بالصورة الجديدة.

&# x2705 ؛ ما الصور التي يجب أن أبدأ تحجيمها أولاً?

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

&# x2705 ؛ أين أجد الأبعاد الصحيحة للصورة?

يخبرك GTmetrix بالأبعاد الصحيحة لكل صورة عند توسيع العنصر في علامة التبويب PageSpeed.

&# x2705 ؛ كيف أقوم بتحسين الصورة بالكامل?

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

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

في صحتك,
توم

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map