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

افحص أولاً

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

ملفات التصميم ومجلدات الوسائط لا تعكس ما يحصل عليه المستخدمون فعليًا. المتصفح يعرض عنوان 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 نفس الصفحة بوضوح. الصور الزخرفية تبقى زخرفية.

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

خطوات

فحص بسيط للصور في كل صفحة

1. 1

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

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

2. 2

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

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

3. 3

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

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

4. 4

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

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

5. 5

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

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

6. 6

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

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

قائمة الفحص

قائمة فحص الصور قبل النشر

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