إتقان وسم img في HTML – أضف الصور باحتراف
إضافة الصور باستخدام وسم img
لإضافة صورة مباشرة داخل صفحة HTML استخدم الوسم:
src يحدد رابط الصورة سواء كانت على موقعك أو من مصدر خارجي، وalt هو النص البديل الذي يظهر إذا لم يتم تحميل الصورة. النص البديل مهم لتحسين تجربة المستخدم والسيو.
التحكم في أبعاد الصورة
يمكن تحديد حجم الصورة باستخدام خصائص width و height داخل الوسم أو عبر CSS. يُنصح بالحفاظ على نسبة الطول إلى العرض لتجنب تشوه الصورة.
أفضل الممارسات لإضافة الصور
- استخدم صورًا عالية الجودة بحجم مناسب لتسريع تحميل الموقع.
- استعمل صيغ حديثة مثل WebP لتقليل حجم الصورة مع الحفاظ على الجودة.
- استخدم CSS لإضافة تأثيرات مثل الإطارات، الظل، أو تأثير عند المرور على الصورة لجعل الموقع أكثر جاذبية.
تحسين السيو وتجربة المستخدم
الصور المنظمة بشكل صحيح تجعل صفحات موقعك أكثر احترافية وتزيد من مدة بقاء الزوار على الصفحة. النص البديل alt مهم لتحسين ظهور الصور في محركات البحث.
شاهد التطبيق العملي
لرؤية كيفية تطبيق هذه النصائح عمليًا خطوة بخطوة، شاهد الفيديو: اضغط هنا لمشاهدة الفيديو