تم إنشاء هذه الدورة التدريبية للمطوّرين على الويب المبتدئين والمتقدمين على حد سواء، حيث تتناول هذه الدورة كل شيء بدءًا من أساسيات ضمان طلب مصادر الصور وعرضها بفعالية، ووصولاً إلى تفاصيل كيفية توصيل تنسيقات الصور الشائعة من الخادم إلى العميل. خلال هذه الدورة التدريبية، ستتعلم كيفية تحقيق أصغر أحجام ممكنة لنقل الصور دون المساس بجودتها، على الأقل، ولن يستطيع أي شخص رؤيتها.
يمكنك تصفُّح السلسلة من البداية إلى النهاية للحصول على فهم شامل لطريقة عمل الصور على شبكة الويب الحديثة أو استخدامها كمرجع للمفاهيم وأنماط الترميز المحددة التي ستستخدمها في عملك اليومي.
بالنسبة إلى المبتدئين في مجال تطوير البرامج على الويب، يُرجى الاطّلاع على دورات تعلُّم HTML للتعرّف على أساسيات استخدام الترميز، ودورات تعلّم CSS حول أساسيات التصميم، ودورات تعلّم التصميم السريع الاستجابة للتعرّف على كيفية عرض الصور في التنسيقات المتجاوبة مع مختلف الأجهزة.
إليك ما ستتعلمه:
لمحة تاريخية عن الصور على الويب
تاريخ الصور على الويب، بدءًا بعنصر الصور في عام 1993
مشاكل الأداء الرئيسية
تعرَّف على طرق لضمان أن تكون طلبات الصور صغيرة وفعّالة قدر الإمكان.
صور المتجه
تعرَّف على SVG، وهو تنسيق صورة الخط المتجه المستخدم على الويب.
الصور النقطية
يمكنك الاطّلاع على الصور النقطية، مثل JPEG وGIF وPNG وWebP.
تنسيقات الصور: GIF
فهم تنسيق صورة GIF وشرح كيفية عمل ترميز الصور
تنسيقات الصور: PNG
معرفة الوقت الذي تكون فيه PNG هو أفضل تنسيق للصور للاختيار من بينها.
تنسيقات الصور: JPEG
تعرَّف على أكثر تنسيقات الصور شيوعًا على الويب.
تنسيقات الصور: WebP
اطّلِع على تنسيق WebP وتفهم الفرق بين هذا التنسيق وغيره من التنسيقات.
تنسيقات الصور: AVIF
إنّ تنسيق ملف صورة AV1 (AVIF) هو ترميز يستند إلى برنامج ترميز الفيديو AV1 مفتوح المصدر.
الصور المتجاوبة مع مختلف الأجهزة
نظرة تفصيلية على الصور المتجاوبة مع مختلف الأجهزة
البِنى الوصفية
استخدام srcset والأحجام لتزويد المتصفح بمعلومات حول مصادر الصور وكيفية استخدامها.
البُنى الإجرائية
تعرف على عنصر الصورة.
برمجة الضغط والترميز
جعل عملية إنشاء مصادر صور عالية الأداء جزءًا سلسًا من عملية تطوير التطبيق
أدوات إنشاء المواقع الإلكترونية وأُطر العمل وأنظمة إدارة المحتوى
اكتشِف كيف يمكن لأنظمة إدارة المحتوى، مثل WordPress وأدوات إنشاء المواقع الإلكترونية الأخرى، تسهيل استخدام الصور المتجاوبة مع مختلف الأجهزة.
شبكات إرسال محتوى الصور
تعرَّف على قدرة شبكات توصيل المحتوى (CDN) للصور على تحويل محتوى الصورة وتحسينه.
الخاتمة
بعض المراجع الإضافية.
إذًا، هل أنت مستعد لتعلم الصور؟