كيفية تحسين الصور للمواقع الإلكترونية: الصيغ، الأحجام، والتسليم

أهمية تحسين صور المواقع الإلكترونية

الصور غالبًا ما تكون السبب الرئيسي في بطء تحميل الصفحة. عندما تشكل الصور الكبيرة الحجم، الصيغ الخاطئة، أو التسليم غير المتجاوب الجزء الأكبر من حجم الصفحة، يتأثر كل من تجربة المستخدم وأداء البحث سلبًا.

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

أنواع الصور التي تحتاجها عادةً في المواقع

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

الصيغ: اختر نوع الملف المناسب للغرض

أفضل صيغة تعتمد على دور الصورة، ومعظم المواقع تحتاج إلى مزيج من الصيغ وليس صيغة واحدة فقط.

استخدم WebP كخيار يومي واحتفظ بـ AVIF لمجموعة أصغر من الصور الفوتوغرافية التي تتطلب أقصى توفير في الحجم.

للمسار الروتيني لصيغة WebP، اقرأ دليل سير العمل من JPG إلى WebP لضغط انتقائي للصور الرئيسية، استخدم دليل JPEG إلى AVIF .

تحديد الأحجام: الصور المتجاوبة، الأبعاد، واستقرار التخطيط

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

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

مثال على ترميز التسليم

استخدم إعداد صور صغير وواضح لصور المحتوى وخصص التحميل الفوري للصورة الرئيسية. هذا النوع من الترميز يسهل فهم سلوك المتصفح ونتائج Lighthouse.

<picture>
  <source
    type="image/avif"
    srcset="/images/articles/hero-640.avif 640w,
            /images/articles/hero-1024.avif 1024w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <source
    type="image/webp"
    srcset="/images/articles/hero-640.webp 640w,
            /images/articles/hero-1024.webp 1024w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <img
    src="/images/articles/hero-1024.jpg"
    alt="Product dashboard preview"
    width="1024"
    height="576"
    loading="lazy"
    decoding="async" />
</picture>

أولويات التسليم: التحميل الكسول، LCP، ومؤشرات Core Web Vitals

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

السياق: أسماء الملفات، النص البديل، والنص المحيط

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

• استخدم أسماء ملفات تصف الموضوع بدلاً من أسماء التصدير من الكاميرا أو الأسماء المؤقتة.
• اكتب نصاً بديلاً عندما تضيف الصورة معنى، وليس كمكان لتكديس الكلمات المفتاحية.
• حافظ على توافق العناوين، التسميات، والنصوص المجاورة مع محتوى الصورة الفعلي.
• تأكد من أن دور الصورة يدعم موضوع الصفحة ولا يبدو عشوائيًا.

بيانات التعريف: أهمية صور Open Graph و JSON-LD

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

إذا كنت تستخدم Blazor في التطوير، فاجمع هذا الدليل مع دليل مكون بيانات التعريف في Blazor حتى تبقى عنوان الصفحة، والوصف، والرابط القانوني، وصورة Open Graph، والبيانات المنظمة متوافقة ومتزامنة.

سير العمل: عملية منظمة لإدارة صور المواقع

1. حدد دور الصورة قبل التصدير: رئيسية، داخلية، بطاقة، Open Graph، أو صورة مخطط.
2. اختر الصيغة المناسبة: WebP للعمل الروتيني، AVIF للصور الفوتوغرافية الثقيلة المختارة، SVG للرسومات المتجهة، وPNG فقط عند الحاجة لشفافية بدون فقدان جودة.
3. صدّر الأحجام المناسبة للتخطيط بدلاً من إرسال نسخة أصلية كبيرة الحجم في كل مكان.
4. حدد أولويات التسليم بحيث تتصرف الصورة الرئيسية كأصل ذو أولوية وتبقى الصور الثانوية فعالة.
5. تحقق من صور بيانات التعريف، النص البديل، وأسماء الملفات قبل النشر.

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

قائمة فحص تحسين صور المواقع

الأسئلة المتكررة

الموارد ذات الصلة