حسّن صور موقعك: افحص الصفحة قبل الإطلاق الآن

افحص أولاً

ابدأ بما يحمله المتصفح

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

خطة الصور

ضع خطة لكل صورة مهمة قبل التحويل

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

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

أحجام الصور

حدد مقاسات واضحة لكل منطقة صورة

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

فحص بسيط: إذا حملت بطاقة 360 بكسل ملف 2400 بكسل، فليس الضغط هو المشكلة الرئيسية. الصفحة تحتاج نسخة أصغر أو أن HTML يشير إلى ملف خاطئ.

ترتيب التحميل

اجعل أول صورة تُحمّل بشكل مقصود

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

1. 1

   سمّ صورة LCP

   إذا كانت الصورة الأولى المهمة من المحتمل أن تكون Largest Contentful Paint، لا تقم بتحميلها الكسول عن طريق الخطأ.

2. 2

   اجعل الصور السفلية هادئة

   الصور أسفل العرض الأولي يجب أن تستخدم عادة التحميل الكسول وفك التشفير غير المتزامن.

3. 3

   افحص خلفيات CSS

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

4. 4

   افحص الطلبات المتكررة

   تصبح صورة البطاقة الصغيرة مكلفة عندما يتكرر الملف الكبير نفسه عشرات المرات.

HTML

استعمل HTML متجاوب للمنطقة المقاسة

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

<picture>
  <source
    type="image/avif"
    srcset="/images/article/product-640.avif 640w,
            /images/article/product-960.avif 960w,
            /images/article/product-1280.avif 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <source
    type="image/webp"
    srcset="/images/article/product-640.webp 640w,
            /images/article/product-960.webp 960w,
            /images/article/product-1280.webp 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <img
    src="/images/article/product-960.jpg"
    alt="لقطة شاشة من لوحة التحكم تعرض سير الرفع"
    width="960"
    height="540"
    loading="lazy"
    decoding="async" />
</picture>

البحث والمشاركة

اجعل الصور، النص البديل، وبيانات التعريف تروي قصة واحدة

SEO لصور موقعك ليس مجرد إضافة كلمات مفتاحية. يجب أن تصف الصورة المرئية، النص المجاور، النص البديل المفيد، علامات Open Graph، وروابط JSON-LD نفس الصفحة بوضوح. الصور الزخرفية تبقى زخرفية.

عندما يجد الفحص معاينات اجتماعية ضعيفة، تابع مع افتح دليل صور الرسم البياني. وعندما تكون المخططات والبيانات الوصفية هي المشكلة، استخدم دليل بيانات التعريف في Blazor للحفاظ على تناسق JSON-LD وبيانات الصفحة.

خطوات

مراجعة بسيطة للصور في كل صفحة

1. 1

   افتح الصفحة الحقيقية

   ابدأ من عنوان URL الحالي، لا من مجلد الأصول. سجل الصور التي تم تحميلها فعليًا.

2. 2

   أنشئ خطة الصور

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

3. 3

   حوّل فقط ما تغير

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

4. 4

   حدّث HTML والبيانات الوصفية

   وجه srcset، المقاسات، الأبعاد، روابط Open Graph، وJSON-LD إلى الملفات المعدة.

5. 5

   تحقق من مخرجات المتصفح

   افحص الصفحة، طلبات الشبكة، بيانات التعريف الاجتماعية، البيانات المنظمة، وتخطيط الجوال.

6. 6

   احتفظ بهذه القاعدة للمرة القادمة

   وثّق قرارات الصور حتى لا تبدأ تحديثاتك القادمة بالتخمين من جديد.

قائمة التحقق

قائمة فحص الصور قبل الإطلاق

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