تبديل صيغ الصور بخاصية type | عناصر Picture وSVG في لغة HTML

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تتيح خاصية نوع الوسائط type ميزة الترقية التدريجية وتبديل صيغ الصور بذكاء. تمكنك هذه الخاصية من تقديم صيغ الجيل القادم الحديثة مثل AVIF وWebP للمتصفحات المتقدمة مع توفير بديل تلقائي بصيغة JPEG أو PNG للمتصفحات القديمة دون أي تعارض.

الصف 2 كود برمجي

HTML

<picture>
  <!-- Ultra-efficient AVIF for modern engines -->
  <source type="image/avif"
          srcset="images/examples/coastal-sunset.avif">
  <!-- High-compression WebP fallback -->
  <source type="image/webp"
          srcset="images/examples/coastal-sunset.webp">
  <!-- Universal legacy JPEG fallback -->
  <img src="images/examples/coastal-sunset.jpg"
       alt="Sunset over coastal cliffs" width="640" height="360">
</picture>

جرّب بنفسك

الصف 3 شرح توضيحي

إذا كان المتصفح لا يدعم فك ترميز AVIF، يتخطاه بهدوء ويفحص وسم WebP التالي. فإن كان قديماً لا يدعم WebP أيضاً، يعرض تلقائياً صورة JPEG الاحتياطية المذكورة في وسم <img>. يحقق هذا التدرج أعلى توفير في بايتات الشبكة مع ضمان عمل الموقع بنسبة 100% على كافة الأجهزة.

الصف 4 ملاحظة هامة

Format Switching with Source Type تبديل صيغ الصور بخاصية type

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (عناصر Picture وSVG في لغة HTML)