تحسين الصور باستخدام @sveltejs/enhanced-img
قدّم صورًا بالحجم المناسب ومن الجيل الجديد باستخدام المكوّن enhanced:img.
تحسين الصور باستخدام @sveltejs/enhanced-img درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
تحسين الصور
ينشئ المكوّن الإضافي @sveltejs/enhanced-img صورًا متجاوبة وبتنسيقات حديثة وقت البناء.
التثبيت
أضيفوه إلى تبعيات التطوير وسجّلوه في إعدادات Vite.
npm install -D @sveltejs/enhanced-imgإعداد Vite
أضيفوا المكوّن الإضافي إلى vite.config.js.
import { enhancedImages } from "@sveltejs/enhanced-img/vite";
plugins: [enhancedImages(), sveltekit()]استخدام المكوّن
استوردوا صورة باستخدام الاستعلام الخاص، ثم استخدموا <enhanced:img>.
import Hero from "./hero.jpg?enhanced";
<enhanced:img src={Hero} alt="Hero" />إنشاء srcset تلقائيًا
ينشئ المكوّن الإضافي أحجامًا وتنسيقات متعددة، مثل AVIF وWebP، لاستخدامها في srcset.
التحميل الكسول
أضيفوا loading="lazy" إلى الصور الموجودة أسفل الجزء الظاهر من الصفحة.
<enhanced:img src={Hero} alt="..." loading="lazy" />نسبة العرض إلى الارتفاع
يضمّن المكوّن الإضافي العرض والارتفاع لمنع تحرّك تخطيط الصفحة.
الاستضافة عبر CDN
بالنسبة إلى الصور الديناميكية، فكّروا في Cloudinary أو Imgix أو Image Optimization من Vercel لتغيير الحجم وقت التشغيل.
التنسيقات الحديثة
يقلّل AVIF وWebP أحجام الملفات بنسبة تتراوح بين 30 و70% مقارنةً بـ JPEG وPNG.
تأثير الأداء
غالبًا ما يكون تحسين الصور أكبر مكسب منفرد للأداء في مواقع المحتوى.
تكلفة البناء
تزيد معالجة الصور من أوقات البناء. خزّنوا النتائج مؤقتًا لإجراء عمليات بناء تزايدية.
تحقق سريع
ماذا ينشئ enhanced-img؟
مراجعة
استخدموا @sveltejs/enhanced-img لإنشاء صور متجاوبة وقت البناء، مع تنسيقات حديثة وsrcset.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «تحسين الصور باستخدام @sveltejs/enhanced-img» مجاني؟
نعم — نص درس «تحسين الصور باستخدام @sveltejs/enhanced-img» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «تحسين الصور باستخدام @sveltejs/enhanced-img»؟
قدّم صورًا بالحجم المناسب ومن الجيل الجديد باستخدام المكوّن enhanced:img. تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «تحسين الصور باستخدام @sveltejs/enhanced-img»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تقسيم الشيفرة والاستيرادات الديناميكية
- تحسين الصور باستخدام @sveltejs/enhanced-img
- التحميل الكسول للمكوّنات
- تحليل أداء تطبيقات SvelteKit