ساحر WebP - حسّن صورك

ارفع صورتك

اسحب صورتك هنا أو انقر للرفع

الصيغ المدعومة: JPG، PNG، GIF (الحجم الأقصى للملف: 16 ميجابايت)

لماذا نستخدم srcset لتحسين الصور؟

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

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

مثال على srcset قيد التنفيذ

مثال على صورة متجاوبة

تستخدم هذه الصورة srcset لتقديم أحجام مختلفة بناءً على عرض نافذة العرض:

<img 
    srcset="/static/example_425w.webp 425w,
            /static/example_567w.webp 567w,
            /static/example_756w.webp 756w,
            /static/example_1008w.webp 1008w,
            /static/example_1344w.webp 1344w,
            /static/example_1792w.webp 1792w"
    sizes="(max-width: 425px) 425px,
           (max-width: 567px) 567px,
           (max-width: 756px) 756px,
           (max-width: 1008px) 1008px,
           (max-width: 1344px) 1344px,
           1792px"
    src="/static/example.webp"
    alt="مثال على صورة متجاوبة"
>

جرب تغيير حجم نافذة المتصفح لترى كيف تتكيف الصورة!

اعتبارات تحسين محركات البحث والأداء

لماذا يشتكي PageSpeed من أحجام الصور؟

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

كيف يمكننا تحسين الأداء باستخدام srcset وWebP؟

  • srcset: تتيح لك هذه السمة تحديد مصادر متعددة للصور لأحجام وقرارات الشاشة المختلفة. يمكن للمتصفح بعد ذلك اختيار الصورة الأنسب، مما يقلل من نقل البيانات غير الضرورية.
  • WebP: يوفر تنسيق الصور الحديث هذا ضغطًا وجودة متفوقة مقارنة بـ JPEG و PNG. يمكنه تقليل أحجام الملفات بشكل كبير دون المساس بالجودة البصرية.

خطوات التنفيذ:

  1. إنشاء أحجام متعددة لكل صورة (مثل 425w، 567w، 756w، 1008w، 1344w، 1792w).
  2. تحويل جميع الأحجام إلى تنسيق WebP.
  3. استخدم عنصر <picture> مع <source> لـ WebP والرجوع إلى التنسيق الأصلي كبديل.
  4. تنفيذ سمات srcset و sizes للسماح للمتصفح باختيار أفضل صورة.

الفوائد:

  • أوقات تحميل أسرع للصفحات، خاصة على الأجهزة المحمولة.
  • استخدام أقل لعرض النطاق الترددي.
  • تحسين درجات Core Web Vitals (خاصة Largest Contentful Paint).
  • تجربة مستخدم أفضل عبر الأجهزة المختلفة وظروف الشبكة.
  • تعزيز محتمل لتحسين محركات البحث بسبب تحسين أداء الصفحة.

مثال على هيكل HTML:

<picture>
    <source type="image/webp" 
            srcset="image-425w.webp 425w, image-567w.webp 567w, image-756w.webp 756w, 
                    image-1008w.webp 1008w, image-1344w.webp 1344w, image-1792w.webp 1792w"
            sizes="(max-width: 425px) 425px, (max-width: 567px) 567px, (max-width: 756px) 756px, 
                   (max-width: 1008px) 1008px, (max-width: 1344px) 1344px, 1792px">
    <img src="image-original.jpg" alt="الوصف" loading="lazy" decoding="async">
</picture>

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

نود الحصول على ملاحظاتك!