Frontend Academy · درس

تحسين الصور: التحميل الكسول والصيغ وWebP

أضف loading=lazy إلى الصور، وقدّم صيغ WebP وAVIF الحديثة، واستخدم الصور المتجاوبة مع srcset وsizes، وحدّد العرض والارتفاع صراحةً لمنع تغيّر التخطيط.

تحسين الصور: التحميل الكسول والصيغ وWebP درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

الصور تهيمن على حجم الصفحة

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

الصيغ الحديثة: WebP وAVIF

حجم WebP أصغر بنسبة 25–35% من JPEG مع جودة مماثلة، وهو مدعوم من جميع المتصفحات الحديثة. أما AVIF فأصغر حجمًا (بنسبة تصل إلى 50%)، لكنه أبطأ في الترميز. استخدم الصيغتين مع صيغة بديلة.

عنصر picture

استخدم <picture> لتقديم AVIF إذا كان مدعومًا، ثم WebP، ثم JPEG كصيغة بديلة نهائية.

<picture>
  <source srcset="/photo.avif" type="image/avif">
  <source srcset="/photo.webp" type="image/webp">
  <img src="/photo.jpg" alt="Description" width="800" height="600">
</picture>

التحميل الكسول الأصلي

أضف loading="lazy" إلى الصور الموجودة أسفل الجزء الظاهر من الصفحة. يؤجل المتصفح التحميل حتى تقترب الصورة من إطار العرض، ولا تحتاج إلى أي JavaScript.

<img src="/post-1.webp" alt="" width="800" height="450" loading="lazy">

<!-- Don't lazy-load the hero — it should load eagerly: -->
<img src="/hero.webp" alt="" width="1200" height="600" fetchpriority="high">

الصور المتجاوبة باستخدام srcset وsizes

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

<img
  src="/photo-800.jpg"
  srcset="/photo-400.jpg 400w,
          /photo-800.jpg 800w,
          /photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="" width="800" height="600">

سبب تحديد width وheight صراحةً

يحجز المتصفح مساحة استنادًا إلى سمتي width وheight، مما يمنع تحرك التخطيط عند وصول الصورة. وتحسب المتصفحات الحديثة aspect-ratio من هاتين السمتين تلقائيًا.

decoding="async"

أضف decoding="async" للسماح للمتصفح بفك ترميز الصورة خارج الخيط الرئيسي، مما يتيح له رسم محتوى آخر.

<img src="/photo.webp" alt="" width="800" height="600" loading="lazy" decoding="async">

شبكات CDN للصور

تحوّل شبكات CDN للصور (Cloudinary وimgix وVercel Image Optimization وCloudflare Images) الصور لحظيًا: فتغيّر حجمها، وتحولها إلى WebP أو AVIF، وتضغطها، وتقدمها من ذاكرات التخزين المؤقت الطرفية.

<!-- Cloudinary auto-format and auto-quality -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/photo.jpg" alt="" width="800" height="600">

مكوّن الصور في Next.js

يتولى <Image> في Next.js تلقائيًا التعامل مع srcset المتجاوب، وتحويل الصور إلى WebP، والتحميل الكسول، والعنصر النائب الضبابي.

import Image from 'next/image';

<Image
  src="/photo.jpg"
  alt="Description"
  width={800}
  height={600}
  placeholder="blur"
  priority={isHero}
/>

ضغط صور JPEG وPNG

إذا تعذر عليك التحويل إلى WebP، فعلى الأقل اضغط الصور: استخدم Squoosh (squoosh.app) للصور الفردية، أو ImageOptim للمعالجة الدفعية، أو sharp في برنامج بناء.

SVG للأيقونات والشعارات

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

تحقق سريع

أي سمة HTML تخبر المتصفح بتأجيل تحميل الصورة حتى تقترب من إطار العرض؟

مراجعة: تحسين الصور

استخدم الصيغ الحديثة (AVIF وWebP) عبر عنصر picture. أضف loading="lazy" للصور الموجودة أسفل الجزء الظاهر من الصفحة، وfetchpriority="high" للصورة الرئيسية. حدّد width وheight صراحةً لمنع CLS. استخدم srcset وsizes للصور المتجاوبة. تعمل شبكات CDN للصور على أتمتة التحويل. ويتولى مكوّن Image في Next.js كل ذلك. استخدم SVG للأيقونات.

الأسئلة الشائعة

هل درس «تحسين الصور: التحميل الكسول والصيغ وWebP» مجاني؟

نعم — نص درس «تحسين الصور: التحميل الكسول والصيغ وWebP» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «تحسين الصور: التحميل الكسول والصيغ وWebP»؟

أضف loading=lazy إلى الصور، وقدّم صيغ WebP وAVIF الحديثة، واستخدم الصور المتجاوبة مع srcset وsizes، وحدّد العرض والارتفاع صراحةً لمنع تغيّر التخطيط. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «تحسين الصور: التحميل الكسول والصيغ وWebP»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

مؤشرات أداء الويب الأساسية: LCP وFID وCLS
عمليات تدقيق Lighthouse والتقييم
تحسين الصور: التحميل الكسول والصيغ وWebP
تقسيم الشيفرة والمسارات الكسولة

← العودة إلى Frontend Academy