الدرس 05 من 30 · 15:44
الدرس 5: صيغ الصور على الويب
الفيديو والشرح بالعربية
عن هذا الدرس
يقارن الدرس WebP وJPEG وPNG وSVG وGIF من حيث الجودة والحجم والشفافية والحركة، وتشرح الفرق بين إدراج SVG داخل HTML وتحميلها كملف.
عرض وصف الدرس كاملاًطي وصف الدرس+
01:04 فحص WebP في Network
يعرض المثال صفحة كثيرة الصور، ويناقش WebP كخيار لتقليل التنزيل مع الحفاظ على جودة مفيدة، وفق دعم نظام النشر والتطوير. افتح Network وحدد الصور ثم أعد التحميل وافحص النوع والحجم. راجع إجمالي الصور إلى جانب كل ملف منفرد.
03:34 الموازنة بين جودة JPEG وحجمها
تستخدم التجربة صور محتوى كبيرة على WordPress لشرح جودة التصدير. أعلى إعداد ليس ضرورياً دائماً للعرض على الويب. قارن الملفات الحالية بالجهد المطلوب لتحويل المكتبة، خصوصاً عندما تحتاج التغييرات إلى تطوير. الأحجام المذكورة أمثلة وليست حدوداً ثابتة. اربط القرار بغرض الصورة ومظهرها وأثرها في سرعة الصفحة.
06:06 الشفافية في التصميم
يعرض الدرس PNG بخلفية شفافة، مثل صورة سيارة مقصوصة يمكن تركيبها على خلفية أخرى. وتتابع تجميع العناصر في صورة نهائية، مع التمييز بين الصيغة المناسبة لإعداد التصميم والصيغة المختارة لنشره.
07:45 SVG والتكبير
توضح الرسومات والأيقونات المتجهة كيف يمكن تغيير الحجم دون ظهور بكسلات الصورة النقطية المكبرة. يُنزّل مثال ويُفتح في المتصفح وتُفحص شيفرته. يمكن إدراج الشيفرة داخل HTML أو تحميل SVG كصورة مستقلة؛ الأولى تزيد المستند والثانية تنشئ مورداً منفصلاً.
10:36 شيفرة داخلية أم ملف مستقل؟
تكرار SVG كبيرة داخل الصفحة يزيد HTML. أما الإشارة إلى الملف نفسه فتتيح إعادة استخدامه وتخزينه مؤقتاً. تقلل الشيفرة الداخلية طلباً منفصلاً لذلك الرسم، بينما يمنح الملف عنواناً مستقلاً. يعتمد القرار على الاستخدام الفعلي وحجم الرسم والتكرار والطلبات.
13:29 تكلفة GIF المتحركة
توضح الأمثلة فائدة الحركة وتكلفة إضافة صور متحركة كثيرة إلى الصفحة، بما فيها تحويل مقطع قصير إلى GIF. تختلف احتياجات الصور الفوتوغرافية والعناصر الشفافة والأيقونات والحركة. افحص النتيجة في المتصفح وإجمالي وزن الصفحة قبل اختيار الصيغة.